HTML liタグについて
liタグの定義と使用方法
<li>
タグは、HTMLのリスト項目を定義するために使用されます。このタグは、順序付きリスト(<ol>
)または順序なしリスト(<ul>
)の中で使用されます。各
- タグはリストの1つの項目を表し、複数の
- タグを使用することで複数のリスト項目を作成できます。
ブラウザのサポート状況
<li>
タグは、すべての現代のウェブブラウザでサポートされています。以下の表は、主要なブラウザでのサポート状況を示しています。
ブラウザ | サポート状況 |
---|---|
Google Chrome | サポート |
Mozilla Firefox | サポート |
Safari | サポート |
Microsoft Edge | サポート |
Opera | サポート |
liタグの属性
<li>
タグには標準のHTMLグローバル属性が使用できます。また、順序付きリスト(<ol>
)の中で、value
属性を使用することでリスト項目の番号付けを制御することができます。
- class:CSSクラスを指定します。
- id:一意のIDを指定します。
- style:インラインCSSスタイルを指定します。
- value:順序付きリストの場合に項目の番号を指定します。
liタグのイベント
<li>
タグは、標準のHTMLイベント属性をサポートします。これには、以下のようなイベントが含まれます。
- onclick:クリック時に実行されるJavaScript関数を指定します。
- onmouseover:マウスが項目上に来たときに実行されるJavaScript関数を指定します。
- onmouseout:マウスが項目から離れたときに実行されるJavaScript関数を指定します。
コード例
以下は、<li>
タグを使用したシンプルなリストの例です。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ol>
<li>項目1</li>
<li>項目2</li>
<li value="5">項目3</li> <!-- 5として番号を表示します -->
</ol>
よくある質問(FAQ)
Q1: <li>
タグはどのようにスタイルを設定できますか?
A1: <li>
タグにはclass
、id
、style
属性を使用してCSSスタイルを適用できます。
Q2: <li>
タグは入れ子にできますか?
A2: はい、<li>
タグを入れ子にして使用できます。入れ子にする場合、<ul>
または<ol>
タグの中にさらに<ul>
または<ol>
を入れることができます。
Q3: value
属性は<ul>
タグ内でも使用できますか?
A3: いいえ、value
属性は<ol>
タグ内の<li>
タグでのみ使用されます。