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