【HTML5・CSS3】olタグを使って順序付きのリストを作成してみよう!

HTML5・CSS3

olタグとは、ウェブサイト上で順序のあるリストを作成する時に使用するタグのことです。

HTML | olタグの使い方
1
2
3
4
5
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

ブラウザで確認すると、以下のようにリストを作成することが出来ています。

olタグをブラウザで確認する

この様に、olタグを使うことでランキングリストの様な順序に意味のあるリストを作成することが出来たり、順序に沿って内容を伝えたい時に分かりやすくまとめてくれます。

olタグの使い方

この章ではolタグの使い方について1つ1つ丁寧に解説します。

olタグの基本
リンクをコピーしました

olタグは、リスト項目を表すliタグとセットで以下の様に記述します。

HTML | 順序のあるリストを作成する
1
2
3
4
5
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

リストに順番をつけない場合は、olタグの部分をulタグに変える事で簡単に変更することが出来ます。

順序を変更する
リンクをコピーしました

olタグに属性を指定する事で、リストマーカーの順序を変更や開始番号を指定することが出来ます。リストマーカーとは、先頭記号のことです。

reversed属性
リンクをコピーしました

olタグにHTML5から追加されたreversed属性を指定すると、項目の順番を降順(大きい数から小さい数)にします。
reversed属性は、値の指定が必要のない論理属性なので、下記のコードの様にolタグにreversedを追加するだけで適用されます。

HTML | 項目の番号を降順にする
1
2
3
4
5
<ol reversed>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

[ ブラウザの表示 ]

  1. リスト1
  2. リスト2
  3. リスト3

start属性
リンクをコピーしました

olタグにstart属性を指定すると、開始番号を決めることが出来ます。デフォルトでは、指定した番号から昇順(小さい数から大きい数)に順番がつけられます。
HTML4.01では、start属性は非推奨でしたが、HTML5では非推奨ではなくなっています。

HTML | 昇順で開始番号を指定する
1
2
3
4
5
<ol start="10">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

[ ブラウザの表示 ]

  1. リスト1
  2. リスト2
  3. リスト3

reversed属性 + start属性
リンクをコピーしました

olタグにreversed属性とstart属性を組み合わせて指定すると、リストの順序を昇順から降順に変更して、開始番号を決めることが出来ます。

HTML | 降順で開始番号を指定する
1
2
3
4
5
<ol start="10" reversed>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

[ ブラウザの表示 ]

  1. リスト1
  2. リスト2
  3. リスト3

リストマーカーを変更する
リンクをコピーしました

デフォルトのリストマーカーは算用数字(decimal)ですが、値を変更することでリストマーカーのスタイルも変更することが出来ます。

リストマーカーのスタイルの種類
リンクをコピーしました

リストマーカーのスタイルの種類は、30種類以上あります。
その中でも代表的なものをリストアップしました。(※デフォルトの算用数字は、decimalです。)

また、リストマーカーの変更方法は次の章で詳しく説明しますが、CSSでolタグにlist-style-typeに値(リストタイプ)を指定する事で変更する事が出来ます。

リストタイプ 説明
none リストを表示しない
decimal-leading-zero 二桁の数字(01, 02,03)
lower-roman 小文字のローマ数字(i, ii, iii)
upper-roman 大文字のローマ数字(I,II,III)
cjk-ideographic 漢数字(一, 二, 三)
lower-alpha 小文字アルファベット(a, b, c)

type属性の廃止
リンクをコピーしました

HTML4.01では、type属性を指定することでolタグのリストマーカーを「算用数字、アルファベット小文字、アルファベット大文字、ローマ数字大文字、ローマ数字小文字」に変更することが出来ましたが、HTML5においてtype属性は廃止されています。代わりに、CSSでolタグにlist-style-typeを指定する事で、リストマーカーを変更出来ます。

HTML4.01までのリストマーカーの変更方法は、以下の通りです。

HTML | type属性でリストマーカーをアルファベット小文字に変更
1
2
3
4
5
<ol type="a">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

HTML5のリストマーカーの変更方法は、以下の通りです。

HTML | リストマーカー変更にtype属性は使わない
1
2
3
4
5
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>
CSS | olタグにスタイルを当てる
1
2
3
ol {
    list-style-type: lower-alpha;
}

[ ブラウザの表示 ]
olタグを使用したリストの例

リストのデザイン
リンクをコピーしました

CSSと組み合わせる事で、下記の様におしゃれなリストを作ることも出来ます!

olタグを使ったリストのデザイン

olタグはどんな時に使うの?
リンクをコピーしました

olタグは、ulタグより活用される頻度は少ないですが、Webサイト上で何か手順などを説明する際に、検索エンジンが「このまとまりは何かの手順を解説している」と理解してくれるメリットがあります。Webサイト上でolタグが活用されている具体例をピックアップしいきます。

  • ランキングリスト
  • 料理手順

ランキングリスト
リンクをコピーしました

Webサイト上でolタグが活用されている代表例として、ランキングリストが挙げられます。記事内で商品か何かのランキングを紹介したり、サイドバーに記事アクセスランキングなど設置する際に活用します。

Webサイト上にランキングリストを設置することで、サイトに訪れたユーザーが他の記事に興味を持ってくれるなど、次のアクションに繋がるメリットがあります。

olタグで作成するランキングリストの例

料理手順など
リンクをコピーしました

Webサイト上で何かの手順を1から順番に説明する際、olタグは不可欠です。
例えば、料理の手順を文だけで説明するより、下記の画像の様に、順序あるリストで説明されている方が圧倒的に分かりやすくなります。

また検索エンジンにも手順を説明していることが伝わるので
手順に沿って説明する際はolタグを使っていきましょう。

olタグで作成する料理手順の例

olタグの注意点
リンクをコピーしました

olタグの注意点ですが、olタグの直下の子要素には、特定のタグしか入れてはいけません。

olタグの直下に他のタグを入れてしまうと、検索エンジンに正確にリスト構造が伝わらなくなってしまうからです。

HTML | 正しい構造
1
2
3
4
5
6
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

HTML | 間違った構造
1
2
3
4
5
6
<ol>
  <h2>リスト1</h2>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

他にもリストタグには、ulタグ(順序なしリスト)やdlタグ(定義リスト)があるので、使用する際リストタグ直下には特定のタグが入る事に注意しましょう。

実際にやってみよう!
リンクをコピーしました

下記の見本の様に「二桁の数字で開始番号が5の降順リスト」を作成してみましょう。

[ 見本 ]

olタグを使ったコードの見本

See the Pen EzYmmm by miyajima yuya (@pikawaka) on CodePen.


答え
1
2
3
4
5
6
7
8
9
10
11
<!--HTML-->
<ol reversed start="5">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

/* CSS */
ol {
  list-style-type: decimal-leading-zero;
}
まとめ

olタグは、 順序に意味のあるリストを作成することができる便利なタグです。 olタグをマスターすれば、ランキングリストをサイトに追加出来たり、何かの手順を説明する時にリストを活用出来たりと、色々な場面で活躍するので是非使ってみてください!