<%- include('../../_common/ja/_head', {
  key: 'docs',
  pagetitle: 'はじめに | Document'
}) %>

<%- include('../../_component/docs/ja/_header') %>

<%- include('../../_component/docs/ja/_menu') %>

<div class="uc-grid _small-col-full _nowrap">

<%- include('../../_component/docs/ja/_sidebar', {
  current: 'index'
}) %>

  <div class="uc-grid-cell _col-fit">

  <%- include('../../_component/docs/_hero', {
    title: 'Welcome to UNITS'
  }) %>

  <main class="uc-content">
    <section class="uc-section">

      <h2 class="uc-section-title">はじめに</h2>
      <p>UNITS（ユニッツ）は、シンプルで美しいコンポーネントセットです。<br>CSSを読み込み、UNITS Componentとして定められたHTMLをコピー&ペーストするだけで誰でも簡単に利用することができます。</p>

      <div class="uc-card-unit">
        <div class="uc-grid _col-3 _small-col-full _medium-col-2 _gutter">
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">すぐに使える</h3>
              <p>units.cssを読み込むだけ。あらかじめ様々なコンポーネントが用意されているので、必要なものだけを選択しあなたのWebサイトに組み込むことが可能です。</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">シンプルで美しいビジュアル</h3>
              <p>各コンポーネントは美しくデザインされています。デザインは定期的にアップデートされますが、大きな変更は加えず、細かいマージンの調整を中心に行われます。</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">モダンブラウザサポート</h3>
              <p>UNITSはMicrosoft Edge, Google Chrome, Firefox, Safariなど各ブラウザの最新バージョンに最適化されています。古いブラウザの動作は...ごめんなさい。</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">レスポンシブWebデザイン</h3>
              <p>UNITSはレスポンシブWebデザインを採用し、全てのデバイス上で最適化されたデザインを表示できるように調整されています。</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">定期アップデート</h3>
              <p>UNITSはまだベータ版なので、正式版に向けて定期的にアップデートされます。それは新しいコンポーネントの追加やソースコード最適化、デザインの微調整などです。</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">日本語をサポート</h3>
              <p>開発者は日本人なので、日本語でのサポートが可能です。日本語で書かれているWebページへの最適化、ドキュメントのアップデートも進めています。</p>
            </div>
          </div>
        </div>
      </div>

    </section>

    <div class="uc-pager-unit">
      <div class="uc-btn _primary"><a href="./install.html">インストール手順 →</a></div>
    </div>
  </main>

  </div>

</div>

<%- include('../../_component/_footer') %>

<%- include('../../_common/_foot') %>
