HTMLタグの「ul」と「ol」の違い
それぞれどう使い分ければ良いのかを解説します
今回はコーディングを学んでいる方向けの記事になります。
コーディングを始めた頃、サイトを見ていると箇条書きや番号リスト、チェックマークのリストなどなど、いわゆるリスト形式で表示されているのを見る機会があります。
人によっては気にせず全部<div>でコーディングしたり、<p>と<br>で簡易的にリスト形式に見せる人もいたりするのですが、本来の趣旨とはそれはズレてしまっているため好ましくありません。
本来のHTMLでは、そういったリスト形式にはulタグとolタグを使ってコーディングするよう定められていますが、どういう時にどちらを使えば良いのかというのをよく悩まれる方を見かけます。
今回は、そんなulタグとolタグの基本をおさらいしながら、何が違ってそれぞれどう使い分ければ良いのか、こういうシーンならul、こういうシーンならolというところも見て行ければと思います。
ulとolの基本をおさらい
冒頭でも書いた通り、HTMLではリスト形式を作る際、ulタグとolタグが用意されていて、主な役割/意図としては下記の通りです
- ulタグ：順序無しリスト
- olタグ：順序ありリスト
ULというのは、Unordered Listの略語で、OLというのが、Ordered Listの略語になっているため、どの解説系を見ても、順序があるかないかといった解説がされている事がほとんどかなと思います。
ただ、実際にコーディングを始めた頃というのは、順序なしと順序ありというのがいまいちイメージが付かない、わからないという悩みがよく起こります。
色々なサイトを見ても、ulでコーディングされている箇所もあれば、olでコーディングされているところもあり、あるサイトによっては同じような要素でもulでされていたり、別のサイトならolでコーディングされているなどで、悩ましかったりもします。
見た目はcssで全て自由に設定ができる
また、使い分けを悩ましくさせているのが、デフォルトでは、ulは●マークで、olは1．2．3．といった順番のリストが自動的に付与されますが、これらはcssで自由に変更し設定ができてしまうため、見た目上ではわからなくなってしまうところにもあります。
極論を言えば、cssの設定で、ulを1．2．3という見せ方にする事もできますし、olを●や☑のようなマークにすることもできます。
そのため、ブラウザ上の見た目ではそれがulなのかolなのかというのは正確に判断できないので、コーディングを学んでいる場合はしっかりとソースを見て、どのリストタグを使っているのかを判断する必要があります。
当サイトでは、ulは下記のように
- 順序なしリスト1
- 順序なしリスト2
- 順序なしリスト3
- 順序なしリスト4
- 順序なしリスト5
olは下記のように
- 順序ありリスト1
- 順序ありリスト2
- 順序ありリスト3
- 順序ありリスト4
- 順序ありリスト5
という見せ方の設定をしています。
もちろんcssの設定で、例えばチェックリスト形式として
- チェックリスト1
- チェックリスト2
- チェックリスト3
- チェックリスト4
- チェックリスト5
という見せ方にする事も可能です。
×などのリスト、！などの注意を促すようなリストなども作る事が可能です。
実際にどう使い分ければ良いのか
では、本題の使い分けについてですが、これは非常に簡単に使い分ける方法があり、書かれているリストの順番を入れ替えても問題ないかどうかで判断ができます。
ulというのは順序無しのため、順番に意味がないものになります。
そのため、入れ替えたとしても問題ないリストになります。
一方で、olというのは順序有りということは、それぞれのリストの前後を入れ替えてしまうと問題が起きてしまうものという判断ができます。
例えば、こういうリストなどを例に挙げる時に買い物リストとレシピなどがわかりやすいです。
- 牛肉
- 洗剤
- ヨーグルト
- 牛乳
- キャベツ
といった買い物リストがあったとして、これらは前後どこを入れ替えても意図は変わりません。そのため、こういったリストを入れ替えたとしても問題なければ、ulタグを使ってコーディングします。
一方、例えばレシピのような手順や工程などが関わるものの場合
- お湯を沸かす
- 沸いたお湯を内側の線まで注ぐ
- 指定の時間（多くは3分）待つ
- 液体スープなど後から入れるものがあれば入れる
みたいな、カップラーメンのレシピ的なものの場合、1と2などを入れ替えると意味が成り立たなくなってしまいます。このように順序を入れかえてはいけないものは、olを使ってコーディングします。
まとめ
以外とコーディングを教えたりサポートしていたりすると、ulを使うのかolを使うのかなどで悩まれている方を見かけます。そういう時こそ、入れ替えても大丈夫かどうかというのを基準に考えると非常にわかりやすいと言えます。
ただ個人的にですが、実務などでコーディングをしていく場合、ulを使うケースというのは多々あるのですが、olのタグを使ってコーディングしていくというのはあまり多くはないかなと思いますし、ランキングなどolを使うシーンは、最初から1，2，3といった順序が付いている事の方が多いので、そこまで悩まないかもしれません。
とはいえ、案件次第なところもありますので、olとulの使い分け、どちらをどう使えば良いのかもしっかりと把握して使えるようにしておきましょう！
記事のシェアにご協力お願いします
