<li>タグの解説
<li>
は、リストやメニューの項目を表します。「li」とは、英語で「list item」の頭文字を取った略語です。この要素はリストやメニュー自体を表す親要素の子要素として配置できます。順序つきのリストの親要素は<ol>
、順序なしのリストは<ul>
、操作可能な機能の集合を表すメニューの場合は<menu>
を用います。
リストの中で各項目は箇条書きとなり、先頭にマーカーが追加されます。マーカーの種類は親要素の既定値で表示されます。マーカーの種類を選択したい場合はCSS(スタイルシート)で変更して下さい。
<li>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素の
display
の値は、list-item
となります。 - 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。さらに、この要素の中にリストを入れることもできます。
<li>要素に指定できる属性
value
- 順序つきのリストを表す
<ol>
の場合に、最初のマーカーの起点となる順序を整数で指定できます。通常1から順に始まる並びを途中から変えることができます。 type
(非推奨)- リスト項目の先頭に置かれるマーカーを指定します。代わりにCSSの
list-style-type
プロパティを使用することが推奨されています。disc
:黒丸circle
:白丸square
:四角
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<li>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<li>
要素は単体では配置できません。必ずリストやメニューを作成する<ol>
、<ul>
、<menu>
の子要素として配置します。
<ol>
<li>ol item</li>
<li>ol item</li>
<li>ol item</li>
</ol>
<ul>
<li>ul item</li>
<li>ul item</li>
<li>ul item</li>
</ul>
<menu>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</menu>
リスト項目のマーカーを変更する場合は、CSSのlist-style-type
プロパティを使います。特別なマーカーを表示させたい場合は、画像やアイコン・フォントを指定します。
<ul class="list-block">
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
</ul>
.list-block {
padding-inline: 1.5rem 0;
margin-block: 1rem 0;
}
.list-block .item1 {
list-style-type: disc;
}
.list-block .item2 {
list-style-type: circle;
}
.list-block .item3 {
list-style-type: square;
}
順序のあるリストの場合、value
属性を使って項目の順序マーカーを操作することができます。指定された項目以降の並びは、value
属性の値を起点としたものに変わります。
<ol class="list-block">
<li value="5">item</li>
<li>item</li>
<li>item</li>
</ol>
リスト項目の中に子要素を配置する
li
はあらゆるフロー・コンテンツを子要素に配置できます。最も多く見られるパターンは、<a>
要素のdisplay
プロパティをblock
にして、項目全体をリンクにしたリストです。
<ul class="list-block">
<li><a href="/">リンクつきのリスト項目</a></li>
<li><a href="/">リンクつきのリスト項目</a></li>
<li><a href="/">リンクつきのリスト項目</a></li>
</ul>
.list-block {
padding: 0;
margin-block: 1rem 0;
list-style-type: "";
}
.list-block a {
display: block;
padding: 0.5em;
background-color:
var(--hover-off, inherit)
var(--hover-on, rgb(0 0 0 / 0.1));
}
@media (any-hover: hover) {
:where(:any-link):hover {
--hover-on: initial;
--hover-off: ;
}
}
リスト項目の中にリストを配置して入れ子にする
リスト項目の中にリストを配置すれば、多重構造のリストを作成できます。<ol>
と<ul>
を混合することも可能なので、順序なしの大カテゴリーの中に順序ありの小カテゴリーを並べることもできます。
<ul class="list-block">
<li>大カテゴリー</li>
<ol class="list-block">
<li>小カテゴリー</li>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
</ol>
</li>
<li>大カテゴリー</li>
<ol class="list-block">
<li>小カテゴリー</li>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
</ol>
</li>
<li>大カテゴリー</li>
<ol class="list-block">
<li>小カテゴリー</li>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
</ol>
</li>
</ul>
.list-block {
padding-inline: 1.5rem 0;
margin-block: 1rem;
}
.list-block .list-block li {
padding-inline-start: 0.5rem;
border-inline-start: 1px solid;
}