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

ul”要素:順不同のリスト

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

要素について

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でも定義されています。

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

定義あり

定義あり

定義あり

定義あり
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; }
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク