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

ol”要素:順序付きのリスト

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

要素について

ul”要素は順序付きのリストを表す要素です。リストを構成する項目はli”要素で表します。

リストの項目の順番が意味を持つ場合に使用することができます。リストの項目の順番を入れ替えても意味合いが変わらないリストはul”要素を使用します。

サンプルコード

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

一般的なブラウザではリストの項目は番号を伴って表示されます。

ol”要素は他の“ol”要素で表される順序付きのリストやul”要素で表される順不同のリストの中に入れ子にすることができます。

<ol>
<li>
第一段
<ol>
<li>春はあけぼの</li>
<li>夏は夜</li>
<li>秋は夕暮れ</li>
<li>冬はつとめて</li>
</ol>
</li>
<li>第二段</li>
<li>第三段</li>
<li>第四段</li>
</ol>
  1. 第一段
    1. 春はあけぼの
    2. 夏は夜
    3. 秋は夕暮れ
    4. 冬はつとめて
  2. 第二段
  3. 第三段
  4. 第四段

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
reversed=""HTML5で追加 逆順のリスト 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でも定義されています。

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

定義あり

定義あり

定義あり

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