順序付きリスト／Order list

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

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

英語表示

<!-- en -->
<ol class="c-orderList">
  <li class="c-orderList__item">
    <span class="c-orderList__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-orderList__item">
    <span class="c-orderList__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-orderList__item">
    <span class="c-orderList__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>
</ol>

原則

2桁までの順序表示に対応しています。
注釈は、日本語の場合「※（米印）」、英語の場合「*（アスタリスク）」で表現します。
リスト内にリストを入れ子にして階層化する場合はインデントで表現します。

パターン

順序付き注釈

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

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

英語表示

<!-- en -->
<ol class="c-orderList c-orderList--notes">
  <li class="c-orderList__item">
    <span class="c-orderList__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-orderList__item">
    <span class="c-orderList__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-orderList__item">
    <span class="c-orderList__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>
</ol>

リストの階層化

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


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