<ol> …… 順序のあるリストを表す
広告
<ol>タグは、順序のあるリストを表す際に使用します。
ol要素のリスト項目には順序があるため、記述順を変えると文書の意味が変わってしまう可能性があります。
順序のないリストには、ul要素を使用します。
ol要素のreversed属性、start属性、type属性
ol要素にreversed属性を指定すると、リストの番号を逆順にします。
start属性は、リストを開始する数値を指定します。
type属性は、リストマーカーの種類を指定します。
いずれの属性も必須ではなく、必要に応じて使用します。
ol要素のtype属性によるリストマーカーの種類の指定は、
リスト項目が番号や文字で参照されるなど、リストマーカーが意味的に重要となる場合です。
リストマーカーの種類はCSSでも指定できます。
単純にスタイリングが目的なら、CSSのlist-style-typeプロパティを使用しても良いでしょう。
■属性
- reversed属性
-
リストの番号を逆順にします。
reversed属性を指定すると、降順リスト(…, 3, 2, 1)になります。
reversed属性を省略すると、昇順リスト(1, 2, 3, …)になります。 - start属性
-
リストを開始する数値を指定します。
start属性を使用する場合には、有効な整数を指定しなくてはなりません。
初期値は 1 です。 - type属性
-
リストマーカーの種類を指定します。
type属性に指定できる値は、”1″、”a”、”A”、”i”、”I” のいずれかです。
一致する値がない場合やtype属性を省略した場合は、10進数となります。
例えば、ゼロ以下の数値を指定しても10進法となります。- 1 を指定すると10進数(1, 2, 3, …)
- a を指定すると小文字のアルファベット(a, b, c, …)
- A を指定すると大文字のアルファベット(A, B, C, …)
- i を指定すると小文字のローマ数字(i, ii, iii, …)
- I を指定すると大文字のローマ数字(I, II, III, …)
■使用例
以下のサンプルは、リスト項目の順序に意味があるのでol要素を使用しています。
HTMLソース
<p>今までに住んだ国を、住んだ順に紹介します:</p>
<ol>
<li>スイス
<li>イギリス
<li>アメリカ
<li>ノルウェー
</ol>
↓↓↓
ブラウザ上の表示
今までに住んだ国を、住んだ順に紹介します:
- スイス
- イギリス
- アメリカ
- ノルウェー
■使用例
以下のサンプルは、リスト項目の順序は重要ではないためul要素を使用しています。
HTMLソース
<p>私は、以下の国に住んだことがあります:</p>
<ul>
<li>ノルウェー
<li>スイス
<li>イギリス
<li>アメリカ
</ul>
↓↓↓
ブラウザ上の表示
私は、以下の国に住んだことがあります:
- ノルウェー
- スイス
- イギリス
- アメリカ
■使用例
以下のサンプルは、ol要素のreversed属性を使用して、映画トップ10を逆順で紹介しています。
HTMLソース
<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>
↓↓↓
ブラウザ上の表示
■関連項目
広告