リスト Lists
ul要素、ol要素、dl要素などの、リスト要素に関するスタイル。
順不同リスト（ul要素）
サンプル
- リスト項目Ａ
-
リスト項目Ｂ
- リスト項目Ｂ１
- リスト項目Ｂ２
- リスト項目Ｂ３
- リスト項目Ｃ
ソースコード
<ul> <li>リスト項目Ａ</li> <li> リスト項目Ｂ <ul> <li>リスト項目Ｂ１</li> <li>リスト項目Ｂ２</li> <li>リスト項目Ｂ３</li> </ul> </li> <li>リスト項目Ｃ</li> </ul>
順序リスト（ol要素）
サンプル
- リスト項目Ａ
-
リスト項目Ｂ
- リスト項目Ｂ１
- リスト項目Ｂ２
- リスト項目Ｂ３
- リスト項目Ｃ
ソースコード
<ol> <li>リスト項目Ａ</li> <li> リスト項目Ｂ <ol> <li>リスト項目Ｂ１</li> <li>リスト項目Ｂ２</li> <li>リスト項目Ｂ３</li> </ol> </li> <li>リスト項目Ｃ</li> </ol>
リスト・マーカーと左マージンをなくす
ul要素やol要素のclass属性に、list-unstyledを指定すると、リスト・マーカーと左マージンをなくすことができる。
サンプル
- リスト項目Ａ
-
リスト項目Ｂ
- リスト項目Ｂ１
- リスト項目Ｂ２
- リスト項目Ｂ３
- リスト項目Ｃ
ソースコード
<ul class="list-unstyled">
<li>リスト項目Ａ</li>
<li>
リスト項目Ｂ
<ul>
<li>リスト項目Ｂ１</li>
<li>リスト項目Ｂ２</li>
<li>リスト項目Ｂ３</li>
</ul>
</li>
<li>リスト項目Ｃ</li>
</ul>
インライン表示
ul要素やol要素のclass属性に、list-inlineを指定すると、display: inline-block;によるインライン表示にすることができる。左右に5pxの余白も付ける。
サンプル
- リスト項目Ａ
- リスト項目Ｂ
- リスト項目Ｃ
ソースコード
<ul class="list-inline">
<li>リスト項目Ａ</li>
<li>リスト項目Ｂ</li>
<li>リスト項目Ｃ</li>
</ul>
説明リスト（dl要素）
サンプル
- 用語Ａ
- 用語Ａの説明。
- 用語Ｂ
- 用語Ｂの説明１。
- 用語Ｂの説明２。
- 用語Ｃ
- 用語Ｃの説明。
ソースコード
<dl> <dt>用語Ａ</dt> <dd>用語Ａの説明。</dd> <dt>用語Ｂ</dt> <dd>用語Ｂの説明１。</dd> <dd>用語Ｂの説明２。</dd> <dt>用語Ｃ</dt> <dd>用語Ｃの説明。</dd> </dl>
水平説明リスト
幅が768px以上のタブレットやパソコンには、用語と説明を水平に並べて表示する。
幅が768px未満のモバイルには、垂直に並べて表示する。
サンプル
- 用語Ａ
- 用語Ａの説明。
- 用語Ｂ
- 用語Ｂの説明１。
- 用語Ｂの説明２。
- 用語Ｃ
- 用語Ｃの説明。
ソースコード
<dl class="dl-horizontal">
<dt>用語Ａ</dt>
<dd>用語Ａの説明。</dd>
<dt>用語Ｂ</dt>
<dd>用語Ｂの説明１。</dd>
<dd>用語Ｂの説明２。</dd>
<dt>用語Ｃ</dt>
<dd>用語Ｃの説明。</dd>
</dl>