Apr. 12th,2015
＃
要素について
| カテゴリー | フロー・コンテンツ |
| “li”要素を子要素に持つ場合、パルパブル・コンテンツ | |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | 0個以上の“li”要素、任意でスクリプト支援要素 |
| タグの省略 | 不可 |
“ul”要素は順序付きのリストを表す要素です。リストを構成する項目は“li”要素で表します。
リストの項目の順番が意味を持つ場合に使用することができます。リストの項目の順番を入れ替えても意味合いが変わらないリストは“ul”要素を使用します。
サンプルコード
<ol>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>ドリアン</li>
<li>バンレイシ</li>
</ol>
- バナナ
- マンゴスチン
- ドリアン
- バンレイシ
一般的なブラウザではリストの項目は番号を伴って表示されます。
“ol”要素は他の“ol”要素で表される順序付きのリストや“ul”要素で表される順不同のリストの中に入れ子にすることができます。
<ol>
<li>
第一段
<ol>
<li>春はあけぼの</li>
<li>夏は夜</li>
<li>秋は夕暮れ</li>
<li>冬はつとめて</li>
</ol>
</li>
<li>第二段</li>
<li>第三段</li>
<li>第四段</li>
</ol>
-
第一段
- 春はあけぼの
- 夏は夜
- 秋は夕暮れ
- 冬はつとめて
- 第二段
- 第三段
- 第四段
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
reversed="" |
逆順のリスト | reversed | 逆順のリスト |
| start="" | リストの番号の開始値 | 整数 | リストの番号の開始値 |
| type="" | リストの番号の種類 | 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”,... | ||
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
compact="" |
コンパクトに表示 | compact | コンパクトに表示 |
＃
仕様書
“ol”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLOListElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute boolean reversed;
[CEReactions] attribute long start;
[CEReactions] attribute DOMString type;
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
ol {
unicode-bidi: isolate;
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
padding-inline-start: 40px;
counter-reset: list-item;
}
:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
margin-block-start: 0;
margin-block-end: 0;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
ol {
unicode-bidi: bidi-override;
}
また、以下のスタイルシートを“表現上のヒント”としてUAスタイルシートに含むことが期待されています。
@namespace url(http://www.w3.org/1999/xhtml);
ol[type="1"] { list-style-type: decimal; }
ol[type=a s] { list-style-type: lower-alpha; }
ol[type=A s] { list-style-type: upper-alpha; }
ol[type=i s] { list-style-type: lower-roman; }
ol[type=I s] { list-style-type: upper-roman; }
