List

リストの基本形は .list > .item です。デフォルトスタイルでリストを作る場合、黒丸は .is-disc、 白丸は .is-circle、 ナンバリングは .is-decimal.list に付与します。

  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
  1. リストのテキストは1行目以外をインデントして読みやすくする
  2. リストのテキストは1行目以外をインデントして読みやすくする
  3. リストのテキストは1行目以外をインデントして読みやすくする
  4. リストのテキストは1行目以外をインデントして読みやすくする
    1. リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    2. リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    3. リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    4. リストを入れ子にした場合は、その分インデントを追加して構造を見せる
<ul class="list is-disc">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

<ul class="list is-circle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

<ol class="list is-decimal">
  <li class="item">...</li>
  <li class="item">...</li>
</ol>

Note

ナンバリング付きの米印など、カスタマイズが必要な場合は .list.is-note を付与します。直下の要素が横並びになり自由に要素を置けます。

  • ※1自由にナンバリング付きの米印などを置ける注釈用のスタイル
  • ※2自由にナンバリング付きの米印などを置ける注釈用のスタイル
  • ※3自由にナンバリング付きの米印などを置ける注釈用のスタイル
  • 自由にナンバリング付きの米印などを置ける注釈用のスタイル
  • ※100自由にナンバリング付きの米印などを置ける注釈用のスタイル
<ul class="list is-note">
  <li class="item">
    <span>※1</span>
    <span>...</span>
  </li>
  <li class="item">
    <span>※2</span>
    <span>...</span>
  </li>
</ul>
Last Updated: 2018-11-6 01:24:05