箇条書きリスト／List

箇条書きのリストを表示するためのコンポーネントです。
注釈文のリストや、階層化したリストの入れ子表示などにも対応しています。

<ul class="c-list">
  <li class="c-list__item">
    <span class="c-list__label">
      「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </span>
  </li>
</ul>

英語表示

<!-- en -->
<ul class="c-list">
  <li class="c-list__item">
    <span class="c-list__label">
      Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis.
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis.
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis.
    </span>
  </li>
</ul>

原則

箇条書きの行頭には1項目を示す記号（バレット）を表示します。
基本的に「・（中黒）」で表現します。
注釈は、日本語の場合「※（米印）」、英語の場合「*（アスタリスク）」で表現します。
リスト内にリストを入れ子にして階層化する場合はインデントで表現します。

パターン

注釈

.c-list--notesを付与することで注釈表示が可能です。

<ul class="c-list c-list--notes">
  <li class="c-list__item">
    <span class="c-list__label">
      「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </span>
  </li>
</ul>

英語表示

<!-- en -->
<ul class="c-list c-list--notes">
  <li class="c-list__item">
    <span class="c-list__label">
      Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis.
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis.
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis.
    </span>
  </li>
</ul>

リストの階層化

リスト内にリストを入れ子にして階層化する場合はインデントで表現されます。


<ul class="c-list">
  <li class="c-list__item">
    <span class="c-list__label">
      「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
      <ul class="c-list">
        <li class="c-list__item">
          <span class="c-list__label">
            「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
          </span>
        </li>
        <li class="c-list__item">
          <span class="c-list__label">
            「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
          </span>
        </li>
      </ul>
    </span>
  </li>
  <li class="c-list__item">
    <span class="c-list__label">
      「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
      <ol class="c-list">
        <li class="c-list__item">
          <span class="c-list__label">
            「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
            <ul class="c-orderList">
              <li class="c-orderList__item">
                <span class="c-orderList__label">
                  「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
                </span>
              </li>
              <li class="c-orderList__item">
                <span class="c-orderList__label">
                  「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
                </span>
              </li>
            </ul>
          </span>
        </li>
        <li class="c-list__item">
          <span class="c-list__label">
            「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。
          </span>
        </li>
      </ol>
    </span>
  </li>
</ul>