List

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

リストのテキストは1行目以外をインデントして読みやすくする
リストのテキストは1行目以外をインデントして読みやすくする
リストのテキストは1行目以外をインデントして読みやすくする
リストのテキストは1行目以外をインデントして読みやすくする
- リストを入れ子にした場合は、その分インデントを追加して構造を見せる
- リストを入れ子にした場合は、その分インデントを追加して構造を見せる
- リストを入れ子にした場合は、その分インデントを追加して構造を見せる
- リストを入れ子にした場合は、その分インデントを追加して構造を見せる

リストのテキストは1行目以外をインデントして読みやすくする
リストのテキストは1行目以外をインデントして読みやすくする
リストのテキストは1行目以外をインデントして読みやすくする
リストのテキストは1行目以外をインデントして読みやすくする
- リストを入れ子にした場合は、その分インデントを追加して構造を見せる
- リストを入れ子にした場合は、その分インデントを追加して構造を見せる
- リストを入れ子にした場合は、その分インデントを追加して構造を見せる
- リストを入れ子にした場合は、その分インデントを追加して構造を見せる

リストのテキストは1行目以外をインデントして読みやすくする
リストのテキストは1行目以外をインデントして読みやすくする
リストのテキストは1行目以外をインデントして読みやすくする
リストのテキストは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: 11/6/2018, 1:24:05 AM

← Button Table →