HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

オーダード・リスト

ol要素

順序リストを表します。順序は上から基本的に上から1、2、3...と上下関係がハッキリしている要素を並べる場合に使用します。Webページ上のパンくずリスト、作業手順&フロー、ランキング一覧などをマークアップする際に活躍する要素です。

サンプルコード

<!-- パンくずリストのサンプルコード -->
<ol>
	<li><a href="/">トップ</a></li>
	<li><a href="/products">サービス一覧</a></li>
	<li><a href="/products/detail.html">サービス詳細</a></li>
</ol>
  • カテゴリー

    フローコンテンツ、パルパブルコンテンツ(または1個以上のli要素を子要素として持つ場合はパルパブルコンテンツ)

  • コンテンツモデル

    0個以上のli要素、スクリプトサポーティング要素

  • 使用ケース

    フローコンテンツが期待される場所

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

reversed

並びを降順にします。最後から最初に向かった並び(3,2,1)としたい場合に指定します。reversed属性は論理属性なので、属性が書かれているだけで機能します。そのため、値の指定は必須ではありません。

start

スタートする番号を指定します。例えば「3」を指定した場合は「3、4、5…」となり、reversed属性が指定されていた場合は「3、2、1」となります。

type

li要素の左側に表示されるマーカーのタイプを指定します。次の中から選択することができます。ブラウザの表示例については「使用例」を参考にしてください。

  • type=”1″

    半角数字1(イチ)。
    「1、2、3…」と数字を使うタイプ

  • type=”a”

    半角英小文字a(エー)。
    「a、b、c」と英小文字を使うタイプ

  • type=”A”

    半角英大文字A(エー)。
    「A、B、C」と英大文字を使うタイプ

  • type=”i”

    半角英小文字i(アイ)。
    「i、ii、iii」と小文字のローマ数字を使うタイプ

  • type=”I”

    半角英大文字I(アイ)。
    「I、II、III」と大文字のローマ数字を使うタイプ

使用例

様々なリストタイプ

type属性に様々な値を設定したサンプルコードです。

<article>

	<!-- 指定しない(初期設定)、またはtype="1"を指定 -->
	<ol>
		<li>一つ目</li>
		<li>二つ目</li>
		<li>三つ目</li>
	</ol>

	<!-- type="a"を指定 -->
	<ol type="a">
		<li>一つ目</li>
		<li>二つ目</li>
		<li>三つ目</li>
	</ol>
	
	<!-- type="A"を指定 -->
	<ol type="A">
		<li>一つ目</li>
		<li>二つ目</li>
		<li>三つ目</li>
	</ol>

	<!-- type="i"を指定 -->
	<ol type="i">
		<li>一つ目</li>
		<li>二つ目</li>
		<li>三つ目</li>
	</ol>

	<!-- type="i"を指定 -->
	<ol type="I">
		<li>一つ目</li>
		<li>二つ目</li>
		<li>三つ目</li>
	</ol>
</article>

ブラウザでの表示例

順序を逆にしたリスト

reversed属性を指定し、並び順を降順にした例です。
2つ目ではstart属性を指定している点にも注目してください。リストタイプが英字でも、start属性は数値で渡す必要があります。

<ol reversed>
	<li>一つ目</li>
	<li>二つ目</li>
	<li>三つ目</li>
</ol>

<ol type="a" start="7" reversed>
	<li>一つ目</li>
	<li>二つ目</li>
	<li>三つ目</li>
</ol>

ブラウザでの表示例