【HTML５・CSS３】 olタグを使って順序付きのリストを作成してみよう

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

1
2
3
4
5
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

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

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

olタグの使い方

リンクをコピーしました

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

olタグの基本

リンクをコピーしました

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

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を追加するだけで適用されます。

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では非推奨ではなくなっています。

1
2
3
4
5
<ol start="10">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

[ ブラウザの表示 ]

10. リスト1
11. リスト2
12. リスト3

reversed属性　＋　start属性

リンクをコピーしました

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

1
2
3
4
5
<ol start="10" reversed>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

[ ブラウザの表示 ]

10. リスト1
11. リスト2
12. リスト3

リストマーカーを変更する

リンクをコピーしました

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

リストマーカーのスタイルの種類

リンクをコピーしました

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

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

type属性の廃止

リンクをコピーしました

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

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

1
2
3
4
5
<ol type="a">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

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

1
2
3
4
5
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

1
2
3
ol {
    list-style-type: lower-alpha;
}

[ ブラウザの表示 ]

リストのデザイン

リンクをコピーしました

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

olタグはどんな時に使うの？

リンクをコピーしました

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

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

ランキングリスト

リンクをコピーしました

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

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

料理手順など

リンクをコピーしました

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

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

▼ HTML初級者におすすめの１冊！HTMLやCSSを全く触れたことがない方でも手を動かしながらWebサイト制作が学べます。

HTML&CSSとWebデザインが 1冊できちんと身につく本

実際に手を動かして作りながらサイト制作のきほんが学べる!

楽天市場

Amazon

olタグの注意点

リンクをコピーしました

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

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

1
2
3
4
5
6
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

1
2
3
4
5
6
<ol>
  <h2>リスト1</h2>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

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

実際にやってみよう！

リンクをコピーしました

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

[ 見本 ]

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;
}

役に立ったらSHARE♪

• twitter
• facebook
• はてブ