li要素

HTMLでは、順序付き、または順序なしでリストを表示することができます。

本ページでは、li要素について説明します。

li要素とは

li要素は、順序付きリスト(ol)、順序なしリスト(ul)、メニュー(menu)の中で使われます。使う親要素によって、番号や記号などが先頭に付きます。

liの定義は、以下のとおりです。

【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>

これをブラウザで表示すると、以下になります。

ブラウザの画面で、リストは1〜3番の番号付きで表示されています。

属性

グローバル属性と、以下が使えます。

value
ol要素内で使われる場合、先頭で表示する番号を指定します。次に続くli要素でvalue属性が使われていない場合、その続きからの番号になります(valueで3を指定すると、次は4からの番号になります)。

value属性の利用例は、以下のとおりです。

【value属性の利用例】
<ol>
<li>アプリをインストールします。</li>
<li value="3">アプリを起動します。</li>
<li>ログインします。</li>
</ol>

これをブラウザで表示すると、以下になります。

ブラウザの画面で、最初にリストには1、次のリストには3、最後のリストには4の番号が付いています。

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要素(タグ)一覧」に戻る