HTML要素 ・ リスト・テーブル
<li>
リストの項目
ul や ol の中に書く、リストの1項目です。ul の中では行頭記号が、ol の中では番号が付きます。
01
サンプルコード
HTML
1<ul>
2 <li>コーヒー
3 <ul>
4 <li>ブレンド</li>
5 <li>カフェラテ</li>
6 </ul>
7 </li>
8 <li>紅茶</li>
9</ul>
02
実行結果
ブラウザでの表示
03
解説
li は "list item" の略で、リストの中の1つ1つの項目を表します。必ず ul か ol の中に書きます。
li の中には文章だけでなく、画像・リンク・別のリストなどを入れられます。リストを入れ子にすると、階層のあるリストになります。
入れ子のリストは、親の li の中に書くのが正しい形です。
04
応用例・注意点
主な属性・CSS
| 名前 | 説明 |
|---|---|
value 属性 | ol の中で、その項目の番号を指定 |
list-style-type | 行頭記号・番号の種類 |
list-style: none | 行頭記号を消す |
::marker | 行頭記号・番号だけを装飾する |
行頭記号の色を変える
::marker 疑似要素を使うと、記号だけに色を付けられます。
HTML
1<ul>
2 <li>ブレンド</li>
3 <li>カフェラテ</li>
4</ul>
CSS
1li::marker {
2 color: #b68235;
3}
注意点
- 01ul や ol を使わずに li だけを書かないでください。
- 02入れ子のリストを li の外（ul の直下）に書くのは誤りです。