li要素
HTMLでは、順序付き、または順序なしでリストを表示することができます。
本ページでは、li要素について説明します。
li要素とは
li要素は、順序付きリスト(ol)、順序なしリスト(ul)、メニュー(menu)の中で使われます。使う親要素によって、番号や記号などが先頭に付きます。
liの定義は、以下のとおりです。
コンテンツカテゴリ | なし |
---|---|
可能な親要素 | ol、ul、menu |
可能なコンテンツ | フローコンテンツ |
タグの省略 | 開始タグは必須。 終了タグは、直後にliが続く場合、または親要素にこれ以降コンテンツがない場合に省略可能。 |
DOMインターフェース | HTMLLIElement |
利用例
以下は、ulを使ったHTMLの例です。
【ulの利用例】
<ul> <li>りんご</li> <li>みかん</li> <li>バナナ</li> </ul>
これをブラウザで表示すると、以下になります。
以下は、olを使ったHTMLの例です。
【olの利用例】
<ol> <li>アプリをインストールします。</li> <li>アプリを起動します。</li> <li>ログインします。</li> </ol>
これをブラウザで表示すると、以下になります。
属性
グローバル属性と、以下が使えます。
- value
- ol要素内で使われる場合、先頭で表示する番号を指定します。次に続くli要素でvalue属性が使われていない場合、その続きからの番号になります(valueで3を指定すると、次は4からの番号になります)。
value属性の利用例は、以下のとおりです。
【value属性の利用例】
<ol> <li>アプリをインストールします。</li> <li value="3">アプリを起動します。</li> <li>ログインします。</li> </ol>
これをブラウザで表示すると、以下になります。
2番目のリスト項目が番号3になって、次が番号4になっています。
すべてのli要素にvalue属性を使って、番号を指定することもできます。
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | IE | Ed | Fx | Ch | Sa | Op |
---|---|---|---|---|---|---|
li | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
value | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
項目 | Sa | An | Op | Ch | Fx | Sm |
---|---|---|---|---|---|---|
li | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
value | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- 〇
- サポート
- △
- 制限あり
- ×
- 未サポート
- ?
- 不明
- IE
- Internet Explorer
- Ed
- Edge
- Fx
- Firefox
- Ch
- Chrome
- Sa
- Safari
- Op
- Opera
- An
- Android Browser
- Sm
- Samsung Internet
※スマートフォンのFirefoxとChromeは、Android版です。
ホームページ作成「HTMLへのリスト項目挿入と装飾」
「HTML要素(タグ)一覧」に戻る