【HTML】ulタグとolタグの違いは?使い分けについて解説!

Webサイトを閲覧していると、箇条書きや、左に番号が振られたリストを見ることがありますよね。

これらはulolというタグを使用して実装されています。

ulタグの見た目
  • 順序なしリスト
  • 順序なしリスト
  • 順序なしリスト
olタグの見た目
  1. 順序付きリスト
  2. 順序付きリスト
  3. 順序付きリスト

しかし、「どっちを使うべきかわからない」「どの場面でul・olを使うべきかわからない」という方もいるかと思います。

そこで今回の記事では、ulタグとolタグの使い分けや正しい使い方について解説していきます!

使用例なども合わせて紹介しますので、参考になれば幸いです。

目次

ulタグ・olタグの基本的な情報

まず最初に、ulタグ、olタグとは何なのかを簡単に説明していきます。

ulタグは順序なしリスト

ulUnordered Listの略で、順序なしリストと呼ばれています。

主に順序を変更しても意味が変わらないリストを作成するときに使用します。箇条書きなどによく使われていますね。

<ul>
  <li>順序なしリスト</li>
  <li>順序なしリスト</li>
  <li>順序なしリスト</li>
</ul>

構文は上記のとおりで、ulの直下にはli(list item)タグのみを配置することができます。

ブラウザ上では、ulタグでリストを作成すると、以下のような見た目になります。

ulタグの見た目
  • 順序なしリスト
  • 順序なしリスト
  • 順序なしリスト

各項目の左側に「・」がついていますね。

これは、ブラウザが持つデフォルトのCSSに、以下のコードが用意されているからです。

ul {
  list-style-type: disc; /* リストに円をつける */
}

olタグは順序付きリスト

olOrdered Listの略で、順序付きリストと呼ばれています。

こちらは順序が意味を持つリストを作成するときに使用します。

例えば、手順や道順を説明する場合、順番自体に意味がありますよね。olタグはそういった場面で使用します。

<ol>
  <li>順序なしリスト</li>
  <li>順序なしリスト</li>
  <li>順序なしリスト</li>
</ol>

構文はulと同じで、直下にはliタグを配置することができます。

olタグで作成したリストを、ブラウザ上で確認してみましょう。

olタグの見た目
  1. 順序付きリスト
  2. 順序付きリスト
  3. 順序付きリスト

各項目の左側には、番号が振られていますね。

olタグはブラウザの標準のCSS内で、数字を表示する指定がされています。

ul {
  list-style-type: decimal; /* リストに数値をつける */
}

olタグ・ulタグの使い分け

ここからは、実際にどんな場面でulタグ・olタグを使うべきかを解説していきます。

まずどのように使い分けるかについてですが、もう一度ulolの特徴を見てみましょう。

  • ul…順番に意味を持たないリスト
    →順番を入れ替えても問題なし
  • ol…順番に意味があるリスト
    →順番を入れ替えると意味が変わる

これら2つの違いは、順番に意味があるかどうかですよね。

ulはどんな順番でも意味は変わりませんが、olは順番を入れ替えると意味が変わってしまいます。

なので、ulかolで迷ったときは、まずは中身の項目の順番を入れ替えてみてください。

もし入れ替えても問題ない場合はulタグ、入れ替えると意味が変わる場合はolタグを使用しましょう。

以下で具体例を出しつつ説明していきます。

ulタグ・olタグの使い分けの具体例

ここでは以下の3つの例を用いて、ulタグ・olタグの使い分けを見ていきましょう。

  • 買い物リストを作る場合
  • ランキング表を作る場合
  • 手順を説明する場合

買い物リストを作る場合はulタグ

以下のような買い物リストがあったとします。

買い物リスト
  • パン
  • 牛乳
  • りんご

この場合、項目をただ箇条書きにして並べているだけで、並び順に意味はないですよね。

項目の位置を入れ替えても、特に何も変わりません。

このように、並び替えても意味が全く変わらない場合はulを使用しましょう。

ランキング表を作る場合はolタグ

以下のような人気料理ランキングを例にして見ていきます。

ランキング表
  1. 焼き肉
  2. 寿司
  3. カレー

この場合は、人気がある項目順に並んでいるので、並び順自体に意味があります

同レベルの項目をただ並べているのではなく、1位は一番人気、2位は二番目に人気、というふうに数字に明確な意味があります。

1位と3位の項目を入れ替えると、意味が全く異なりますよね。

このように、並び順に特別な意味がある場合はolを使用しましょう。

手順を説明する場合はolタグ

続いて手順を説明する場合を見ていきましょう。

ここではWebサイト制作の手順を例にしています。

手順の説明
  1. サイト設計
  2. デザイン制作
  3. コーディング
  4. サイトを公開

手順を説明する場合は、1が終わったら2、2が終わったら3…というように、並び順に意味がありますね。

1から順番に進める必要があるため、項目を入れ替えることはできません。

この場合も並び順にある特定の意味があるため、olを使用します。

【まとめ】並び順に意味がないならulタグ、特別な意味があるならolタグ

ulタグとolタグをまとめると、以下のとおりです。

  • ul…順序なしリスト(Unordered List)
    →順番に意味はなく、入れ替えてもOK
  • ol…順序付きリスト(Ordered List)
    →順番に特別な意味があるため、入れ替えられない

ulは箇条書きにして項目を並べるときによく使用します。

olはランキング表や手順の説明など、順番がある特定の意味をもつ場合に使用します。

ulolかで迷ったときは、

  1. 中身の項目を入れ替えてみる
  2. 意味が変わらないならul、変わる場合はol

というふうにして判別してみてください!

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる