li要素・liタグとは

Tweet

リストの項目を表す　li要素

リスト項目として利用されるli要素は、ol要素またはul要素と共に利用される（ol要素、ul要素の内部で1つ以上のli要素を含ませるルールである）。

ul要素、ol要素は1つ以上のli要素を含む必要がある。
※間違えやすいのだが、ul要素、ol要素の直下にli要素以外を配置するのは文法的に正しくない。
※定義リストを示すdl要素の項目はdt要素とdd要素を使のでli要素は使われない。

<ul>
    <li>小麦粉200g</li>
    <li>砂糖10g</li>
    <li>牛乳1カップ</li>
    <li>卵3個</li>
    <li>塩コショウ</li>
</ul>

含むことができる要素について

li要素は内部にブロック要素、インライン要素のどちらも含むことができる。ほとんどのHTML要素を含むことができるため、自由度が高いのが特徴である。

最近のWEBサイトではli要素とcssのfloatプロパティを組み合わせることで項目が横並びのナビゲーションを表現する等、li要素の汎用性の高さが目立つ。

リストマーカーについて

ブラウザにおいて、ul要素に内包されるli要素には黒丸が、ol要素に内包されるli要素には1からの10進数などのリストマーカーがデフォルトで表示される。このリストマーカの種類はスタイルシートを利用する事で変更が可能である。

具体的にはcssの「list-style-type」や「list-style-image」を利用する事でリストマーカーの表示種別を変更する。

以下、スタイルシートでリストマーカーを変更した実例を示す。

また、cssの「list-style-position」を利用する事で、リストマーカーを基本となるブロックボックスの外側に配置するか（outside）、内側に配置するか（inside）を指定することができる。