「ul」と「ol」の違いって？HTMLリストの使い分けをサクッと解説

「このリスト、<ul>で書くべき？それとも<ol>？」——WebデザインやHTMLにちょっと慣れてくると、ふと悩む瞬間、ありますよね。見た目は似ているけれど、ちゃんと意味があるこの2つ。今回は、そんな<ul>と<ol>の違いと使い分けについて、やさしく解説していきます♪

<ul>と<ol>の違いを一言でいうと？

つまり、リストの順番に意味があるかどうかが選ぶポイントです。

<ul>とは？

<ul>は「unordered list（順序なしリスト）」の略。アイテムの順番に意味がないときに使います。例えば、買い物リストや特徴の箇条書きなどにピッタリです。

使い方の例：

<ul>
  <li>卵</li>
  <li>牛乳</li>
  <li>パン</li>
</ul>

このように表示されます：

• 卵
• 牛乳
• パン

<ol>とは？

<ol>は「ordered list（順序ありリスト）」の略。順番が重要な手順やランキングなどに使います。例えば、料理レシピややることリストなどが該当します。

使い方の例：

<ol>
  <li>フライパンを熱する</li>
  <li>卵を割り入れる</li>
  <li>火を止める</li>
</ol>

このように表示されます：

1. フライパンを熱する
2. 卵を割り入れる
3. 火を止める

応用・関連情報

ちょっとした応用テクニックとして、CSSでリストのマーカー（黒丸や数字）をカスタマイズすることもできます。たとえば、数字をローマ数字に変えたり、黒丸を星マークに変えるなど、デザイン面での工夫が可能です♪

補足豆知識：

• <ul>のマーカー：デフォルトは「黒丸（●）」
• <ol>のマーカー：デフォルトは「数字（1. 2. 3.）」
• CSSのlist-style-typeで「disc」「circle」「decimal」「lower-roman」など指定可能

そしてついでにもうひとつ！
「リスト全体を中央寄せにしたい！」って思ったこと、ありませんか？ そんなときは、以下のようなCSSを使えばOKです♪

リスト自体を中央寄せする例：

<ul class="center-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<style>
  .center-list {
    list-style-position: inside;
    text-align: center;
    padding-left: 0;
  }
</style>

これで、リストの中身がきれいに中央に揃います♡ ブログの見栄えをちょっと良くしたいときにも便利ですよ〜！

まとめ

今回は、<ul>と<ol>の違いと使い分けについて解説しました。ポイントは以下の通り：

• 順番が関係ないリスト → <ul>
• 順番が重要なリスト → <ol>

HTMLを書くとき、リストの「意味」でタグを選ぶことで、アクセシビリティやSEOの面でも好影響なんです◎

あなたはどっちのリストをよく使ってる？次にコードを書くときは、ぜひ「順番の意味」を意識してみてくださいね♪