Apr. 12th,2015
＃
要素について
| カテゴリー | なし |
| 利用場所 | “ol”要素、“ul”要素、“menu”要素の子要素として |
| 内容 | フロー・コンテンツ |
| タグの省略 | 開始タグは省略不可 |
| 直後に“li”要素が続く場合、もしくは親要素の中で後に続くコンテンツがない場合は終了タグを省略可能 |
“li”要素は親要素となる“ol”要素、“ul”要素、“menu”要素で表されるリストの項目を表す要素です。
サンプルコード
順序付きのリスト
<ol>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>ドリアン</li>
<li>バンレイシ</li>
</ol>
- バナナ
- マンゴスチン
- ドリアン
- バンレイシ
一般的なブラウザでは“li”要素の内容は親要素が“ol”要素の場合は番号を伴って表示されます。
順不同のリスト
<ul>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>ドリアン</li>
<li>バンレイシ</li>
</ul>
- バナナ
- マンゴスチン
- ドリアン
- バンレイシ
一般的なブラウザでは“li”要素の内容は親要素が“ul”要素の場合はリストマーカーを伴って表示されます。
＃
＃
仕様書
“li”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
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; }
