このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

li”要素:リストの項目

記事Apr. 12th,2015
July 7th,2020
リストの項目を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

カテゴリー なし
利用場所 ol”要素ul”要素menu”要素の子要素として
内容 フロー・コンテンツ
タグの省略 開始タグは省略不可
直後に“li”要素が続く場合、もしくは親要素の中で後に続くコンテンツがない場合は終了タグを省略可能

li”要素は親要素となるol”要素ul”要素menu”要素で表されるリストの項目を表す要素です。

サンプルコード

順序付きのリスト

<ol>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>ドリアン</li>
<li>バンレイシ</li>
</ol>
  1. バナナ
  2. マンゴスチン
  3. ドリアン
  4. バンレイシ

一般的なブラウザでは“li”要素の内容は親要素がol”要素の場合は番号を伴って表示されます。

順不同のリスト

<ul>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>ドリアン</li>
<li>バンレイシ</li>
</ul>
  • バナナ
  • マンゴスチン
  • ドリアン
  • バンレイシ

一般的なブラウザでは“li”要素の内容は親要素がul”要素の場合はリストマーカーを伴って表示されます。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
value="" リストの項目の番号 整数 リストの項目の番号
過去に定義されていた属性
属性
属性 説明 説明
type=""注意 リストマーカーの種類(親要素がul”要素の場合) disc “●”
circle “○”
square “□”
リストの番号の種類(親要素がol”要素の場合) 1 “1”,“2”,“3”,“4”,...
a “a”,“b”,“c”,“d”,...
A “A”,“B”,“C”,“D”,...
i “i”,“ii”,“iii”,“iv”,...
I “I”,“II”,“III”,“IV”,...

仕様書

li”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<li>
定義あり

定義あり

定義あり

定義あり

定義あり
DOMインターフェース
[Exposed=Window]
interface HTMLLIElement : HTMLElement {
[HTMLConstructor] constructor();

[CEReactions] attribute long value;

// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

li {
unicode-bidi: isolate;
display: list-item;
}

/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
li {
unicode-bidi: bidi-override;
}

また、以下のスタイルシートを“表現上のヒント”としてUAスタイルシートに含むことが期待されています。

@namespace url(http://www.w3.org/1999/xhtml);

li[type="1"] { list-style-type: decimal; }
li[type=a s] { list-style-type: lower-alpha; }
li[type=A s] { list-style-type: upper-alpha; }
li[type=i s] { list-style-type: lower-roman; }
li[type=I s] { list-style-type: upper-roman; }
li[type=none i] { list-style-type: none; }
li[type=disc i] { list-style-type: disc; }
li[type=circle i] { list-style-type: circle; }
li[type=square i] { list-style-type: square; }
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク