<ol> …… 順序のあるリストを表す

<ol>タグは、順序のあるリストを表す際に使用します。

ol要素のリスト項目には順序があるため、記述順を変えると文書の意味が変わってしまう可能性があります。

順序のないリストには、ul要素を使用します。

ol要素のreversed属性、start属性、type属性

ol要素にreversed属性を指定すると、リストの番号を逆順にします。 start属性は、リストを開始する数値を指定します。 type属性は、リストマーカーの種類を指定します。 いずれの属性も必須ではなく、必要に応じて使用します。

ol要素のtype属性によるリストマーカーの種類の指定は、 リスト項目が番号や文字で参照されるなど、リストマーカーが意味的に重要となる場合です。 リストマーカーの種類はCSSでも指定できます。 単純にスタイリングが目的なら、CSSのlist-style-typeプロパティを使用しても良いでしょう。

■属性

■使用例

以下のサンプルは、リスト項目の順序に意味があるのでol要素を使用しています。

<p>今までに住んだ国を、住んだ順に紹介します：</p>
<ol>
 <li>スイス
 <li>イギリス
 <li>アメリカ
 <li>ノルウェー
</ol>

■使用例

以下のサンプルは、リスト項目の順序は重要ではないためul要素を使用しています。

<p>私は、以下の国に住んだことがあります：</p>
<ul>
 <li>ノルウェー
 <li>スイス
 <li>イギリス
 <li>アメリカ
</ul>

■使用例

以下のサンプルは、ol要素のreversed属性を使用して、映画トップ10を逆順で紹介しています。

<figure>
 <figcaption>好きな映画トップ10</figcaption>
 <ol reversed>
  <li><cite>プッシーキャッツ</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор（黒猫・白猫）</cite>, 1998</li>
  <li><cite>バグズ・ライフ</cite>, 1998</li>
  <li><cite>トイ・ストーリー</cite>, 1995</li>
  <li><cite>モンスターズ・インク</cite>, 2001</li>
  <li><cite>カーズ</cite>, 2006</li>
  <li><cite>トイ・ストーリー2</cite>, 1999</li>
  <li><cite>ファインディング・ニモ</cite>, 2003</li>
  <li><cite>Mr.インクレディブル</cite>, 2004</li>
  <li><cite>レミーのおいしいレストラン</cite>, 2007</li>
 </ol>
</figure>

■関連項目

Sponsors