HTML <ol>タグ

❮前へ完全なHTMLリファレンス次へ❯

例

2つの異なる順序付きリスト（最初のリストは1から始まり、2番目のリストは50から始まります）：

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

<ol>タグは順序付きリストを定義します。順序付きリストは、数値またはアルファベット順にすることができます。

<li>タグは、各リスト項目を定義するために使用されます。

ヒント： CSSを使用してリストのスタイルを設定します。

ヒント：順序付けされていないリストの場合は、<ul>タグを使用します。

ブラウザのサポート

Element
<ol>	Yes	Yes	Yes	Yes	Yes

属性

Attribute	Value	Description
reversed	reversed	Specifies that the list order should be reversed (9,8,7...)
start	number	Specifies the start value of an ordered list
type	1 A a I i	Specifies the kind of marker to use in the list

グローバル属性

この<ol>タグは、HTMLのグローバル属性もサポートしています。

イベント属性

この<ol>タグは、HTMLのイベント属性もサポートしています。

その他の例

例

さまざまなリストタイプを設定します（CSSを使用）。

<ol style="list-style-type:upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol style="list-style-type:lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

例

CSSで利用可能なすべての異なるリストタイプを表示します。

例

リストの行の高さを（CSSを使用して）縮小および拡大します。

<ol style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

例

順序付けされたリスト内に順序付けされていないリストをネストします。

<ol>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ol>

デフォルトのCSS設定

ほとんどのブラウザは<ol>、次のデフォルト値で要素を表示します。

例

ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}