olタグ 順序ありリスト

catnose catnose · に最終更新

HTMLの<ol>オーエルタグは、順序が重要なリスト（箇条書き）を作るために使います。言い換えると、項目の順番が入れ替わると、意味が変わってしまうようなリストに使います。

<h2>好きな果物ランキング</h2>
<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li>もも</li>
</ol>

👆リストの各項目には<li>タグを使います。

✍️名前の意味

olは「Ordered List」（オーダード・リスト）の略です。「ordered」は「順序づけられた」という意味を持ちます。liは「List Item」（リスト・アイテム）の略です。

目次
このページの目次

olタグの使い方

各項目にはliタグを使う

<ol>だけではリストは成り立ちません。<ol>は、リスト全体を表し、各項目には<li>タグを使います。

<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li>もも</li>
</ol>

👆<ol>で全体を囲み、項目の数だけ<li>を入れます。

olの直下にはliタグだけ

<ol>内のタグの使い方には決まりがあります。それは「<ol>の直下には<li>タグしか使えない」ということです。

🚫間違ったHTML
<ol>
  <h1>果物ランキング</h1><!-- 🙅 -->
  <p>好きな果物に順位をつけました。</p><!-- 🙅 -->
  <li>りんご</li>
  <li>みかん</li>
</ol>

👆このように、<ol>のすぐ下に見出しタグや段落タグを置くことはできません。

😊正しいHTML
<h1>果物ランキング</h1>
<p>好きな果物に順位をつけました。</p>
<ol>
  <li>りんご</li>
  <li>みかん</li>
</ol>

👆<ol>のすぐ下には、リストの項目である<li>だけを使うことができます。見出しや段落はリストの外に出しましょう。

😊正しいHTML
<ol>
  <li><a href="https://○○">りんご</a></li>
  <li><img src="https://○○" alt="りんごの画像"></li>
</ol>

👆<li>の中には、アンカータグや画像タグなどを自由に入れることができます。「<ol>の直下はダメだけど、<li>の中ならOK」ということですね。

順序を逆にする（reversed）

<h2>好きな果物ランキング</h2>
<ol reversed>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ol>

👆「1、2、3...」という並び順を逆にしたいときは<ol>タグにreversed属性を指定します。これにより「3、2、1...」という降順で並ぶようになります。

開始番号を変える（start）

<h2>果物ランキング4位〜</h2>
<ol start="4">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ol>

👆箇条書きの番号を「1」からではなく、途中の番号から開始したい場合には<ol>にstart="数字"という形の属性を追加します。たとえば「4」から始めたいときには、<ol start="4">とします。

数字を途中で変更する

<ol>
  <li>りんご</li>
  <li value="5">みかん</li>
  <li>ぶどう</li>
  <li>もも</li>
</ol>

👆<li>タグに対してvalue="数字"を指定すると、リストの途中でも数字を自由に変えることができます。たとえば、<li value="5">の数字は「5.」になり、それ以降は「6、7、8...」と続きます。数字をスキップできるわけですね。

<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li value="1">ぶどう</li>
  <li>もも</li>
</ol>

👆value="1"とすれば、振り出しに戻ります。

リストを入れ子にする

リストの中には、別のリストを入れることができます（「リストをネストする」や「入れ子にする」と言います）。

<h2>好きな食べ物</h2>
<ol>
  <li>焼き肉</li>
  <li>ラーメン</li>
  <li>
    スイーツ
    <ol>
      <li>プリン</li>
      <li>マカロン</li>
    </ol>
  </li>
</ol>

👆ある項目についてより細かいリストアップが必要なときに、リストを入れ子にします。この例だと「スイーツの中でさらに順位があるから入れ子にする」というイメージですね。

<h2>好きな食べ物</h2>
<ol>
  <li>焼き肉</li>
  <li>ラーメン</li>
  <li>
    スイーツ
    <ul>
      <li>プリン</li>
      <li>マカロン</li>
    </ul>
  </li>
</ol>

👆<ol>の中に<ul>を入れたり、<ul>の中に<ol>を入れたりすることもできます。

liの中のulを入れる

別のリストを持つ<li>の部分を詳しく見てみます。この<li>の中には「テキスト」と「子リスト」の2つが入っているわけですね。

入れ子の数には制限はないので、好きなだけ入れ子にすることができます。

番号の種類を変える

デフォルトでは番号は「1、2、3...」というように「数字」で表示されます。<ol>タグにtype属性を指定すれば、数字を他の表記に変えることができます。

✍️CSSを使うべき？
type属性を使わなくても、CSSのlist-style-typeプロパティにより番号の種類を変えることができます。むしろ見た目の都合であれば、CSSを使うべきです（のちほど解説します）。

ABC順

<ol type="A">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ol>

type="A"とすると「A、B、C...」という表示になります。type="a"とすると「a、b、c...」というように小文字のアルファベットになります。

ローマ数字

<ol type="I">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ol>

type="I"とすると「Ⅰ、Ⅱ、Ⅲ...」と番号がローマ数字になります。type="i"とすると「ⅰ、ⅱ、ⅲ...」というように小文字のローマ数字になります。

通常の数字

<ol type="1">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ol>

👆type="1"にすると数字順で表示されます。デフォルトはこの表示なのでほとんど指定しないと思います（何らかの理由でリセットが必要になったときに使うかもしれません）。

CSSで番号の表示を変える

種類を変える

CSSのlist-style-typeプロパティで、番号の種類を変えることもできます。たくさんの種類があるので、ここでは一部を紹介します。

数字

ol {
  list-style-type: decimal;
}

👆list-style-type: decimalで「1、2、3...」という表示になります。デフォルト（CSSで何も指定しなかった場合）はこの値です。

2ケタ数字

ol {
  list-style-type: decimal-leading-zero;
}

👆decimal-leading-zeroとすると「01、02、03...」のように2ケタの数字で表示されます。

アルファベット

ol {
  list-style-type: upper-latin;
}

upper-latinで大文字のアルファベット順、lower-latinで小文字のアルファベット順で表示されます。

ローマ数字

ol {
  list-style-type: upper-roman;
}

upper-romanで大文字のローマ数字、lower-romanで小文字のローマ数字で表示されます。

他にも「一、二、三…」や「ア、イ、ウ…」のような表示にすることもできます。詳しくは「list-style-typeの値」をチェックしてみてください。

番号を消す

ol {
  list-style-type: none;
  padding: 0; /* 左にできる隙間を消す */
}

👆番号を消したい場合は、list-style-type: noneを指定します。そのぶん左側がぽっかりと空くので、paddingプロパティで隙間を消しておくのが良いでしょう。

特定のリストのスタイルだけを変える

ここまで紹介してきたCSSサンプルではol { ~ }と書いています。注意したいのは、このように書くと、そのCSSが読み込まれるページ内すべての<ol>に適用されるということです。

😿「一部のリストだけ番号を消したかったのに、全てのリストの番号が消えてしまった…」なんてことに

.my-list {
  list-style-type: none;
}

下のリストだけ番号を消した例

👆一部のリストだけ見た目を変えたいときは、このようにしましょう。

  • HTMLで<ol>タグに何らかのクラス名を指定しておく（ここでは<ol class="my-list">）
  • CSSでそのクラスに対してスタイルを指定する（.my-list { ~ }）

このように、クラス名を使って一部のリストだけスタイルを変えることが可能です。

入れ子のリストの見た目を変える

リストが入れ子になっている場合、子リストの方だけスタイルを変えたいことがあります。

ol ol {
  list-style-type: upper-latin; /* A、B、Cに */
  padding-left: 20px; /* 左側の余白を調整 */
  color: gray; /* テキストをグレーに */
}

子リストだけ違う見た目に

👆その場合、ol ol { ~ }のような書き方をすれば、子リストにだけスタイルを適用できます。

✍️ol ol { ~ }は「olの中のolに対して…」という意味になります。

  • 孫リストのスタイルを変えたいときはol ol ol { ~ }と指定します。
  • 子リストが<ul>のときはol ul { ~ }というように指定します。
HTMLの記事をもっと見る