liタグ -リストの各項目を表す｜HTML辞典
<li>タグとは？
<li>タグは、リストの各項目（リストアイテム）を表すためのタグ です。
必ず <ul>（順序のないリスト）または <ol>（順序のあるリスト）の中で使用する必要があります。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<li> は開始タグ（<li>）と閉じタグ（</li>）の両方が必要です。
基本的な記述方法
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>使用できる主な属性
<li>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
value | 番号付きリストの値を変更 | <li value="5">項目5</li>（<ol> 内でのみ有効） |
class | CSSのクラスを適用 | <li class="list-item">...</li> |
id | 一意の識別子を設定 | <li id="menu-item">...</li> |
style | インラインスタイルを適用 | <li style="color: red;">...</li> |
CSSを使ったデザイン変更
リストの項目にスタイルを適用したい場合は、CSSを活用できます。
li {
font-size: 16px;
color: #333;
}適切な使用例
✅ <li> を使って順序のないリストを作成
<ul>
<li>猫</li>
<li>犬</li>
<li>ウサギ</li>
</ul>✅ <li> を使って順序のあるリストを作成
<ol>
<li>材料を準備する</li>
<li>オーブンを180度に予熱する</li>
<li>生地を混ぜる</li>
<li>焼く</li>
</ol>✅ <li> の value 属性で番号を変更
<ol>
<li value="5">第5番目の項目</li>
<li>第6番目の項目</li>
</ol>適切でない使用例（誤った使い方）
❌ <li> を <ul> や <ol> なしで使用するのはNG
<!-- NG: <li> を単体で使用 -->
<li>これは誤ったリスト項目です。</li><ul>
<li>これは正しいリスト項目です。</li>
</ul>❌ <li> の中にブロック要素を直接入れるのはNG
<!-- NG: <li> の中に <div> を直接入れる -->
<ul>
<li><div>これは誤った書き方です。</div></li>
</ul>✅ 正しい書き方（<li> の中でブロック要素を適切に使用）
<ul>
<li>
<p>これは正しい書き方です。</p>
</li>
</ul><li>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<li> | リストの各項目を作成 | <ul> や <ol> の中で使用 | 箇条書きや番号付きリスト |
<ul> | 順序のないリストを作成 | リストマーカー（●、■ など）を表示 | メニュー、箇条書き |
<ol> | 順序のあるリストを作成 | 番号付きリスト（1, 2, 3…） | 手順の説明、ランキング |
<dl> | 定義リストを作成 | <dt>（用語）、<dd>（説明）を使用 | 用語集、FAQの作成 |
使用上の注意点
✅ <li> は <ul> や <ol> の中でのみ使用する
<li>を単体で使用するのは避ける。
✅ <li> の中にブロック要素を入れる場合は <p> などを適切に使う
関連タグ
まとめ
<li>タグは、HTML文書内でリストの各項目（リストアイテム）を作成するためのタグです。必ず<ul>または<ol>の中で使用し、単体では使わないことが推奨されます。
