L I タグの使い方

L I タグを使おう

リストを表すのが　Ｌ　Ｉ　タグです

複数の項目を縦に並べるのがliタグです。リストとして使います。

このliタグは、実は子供のタグです。単体では使えません。
親タグを使い分けることでマークのリストや、ナンバリングのリストなど、
使用の幅が広がります。

■　ＵＬタグの使い方

リストの中では、一番オーソドックスなタグです。

typeを指定すると、diskは●　 circleは○　 squareは■　がつきます。
typeを省略すると、頭には●が表示されます。

<ul　type="disk か　circle か　square">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
　　　・
　　　・
</ul>

表示例

• リスト１
• リスト２
• リスト３

■　OＬタグの使い方１

リストの文頭マークを選ぶことができます。

type指定では、タイプを変える事で文頭のマークが変わります。
たとえばタイプをAとすると、文頭にはABCDE・・・が付きます。
同様に aならabcde　I では�T�U�V�W�X。そして iは�@�A�B�C�Dが文頭に付きます。

typeを省略するか、１を指定すると英数字が表示されます。

<ol　type="A　か a か　I　か i か　1">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
　　　・
　　　・
</ol>

表示例

1. リスト１
2. リスト２
3. リスト３

■　OＬタグの使い方２

olタグの文頭を番号にする場合、開始番号を１以外で始めたり、途中の番号をスキップすることができます。
下は、５で始める例と、途中を飛ばした例です。

<!-- 5で始める -->
<ol　start="5">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ol>

<!--　途中を飛ばす　-->
<ol>
<li>リスト１</li>
<li>リスト２</li>
<li value="10">リスト３</li>
<li>リスト４</li>
</ol>

表示例１

5. リスト１
6. リスト２
7. リスト３

表示例２

1. リスト１
2. リスト２
10. リスト３
11. リスト４

１口メモ
説明では、liの最後を<li>で閉じています。
HTMLではリストの最後を閉じなくても機能はするんです。
でも、今後の展望のために閉じる癖をつけておきます。