HTMLの「リスト」を自在に操る！`ol`要素の`type`属性とCSSの意外な関係
Webサイトを作っていると、必ずと言っていいほどお世話になるのが「リスト」ですよね。買い物のリストや、手順のステップなど、情報を整理して並べるのに欠かせない存在です。
HTMLには、大きく分けて「箇条書き（`ul`）」と「番号付きリスト（`ol`）」の2種類がありますが、今日はその中でも「番号付きリスト（`ol`）」にフォーカスして、意外と知られていない「マーカーの変身術」を伝授します！
「1, 2, 3…」だけでなく、「a, b, c…」や「I, II, III…」に変えたいとき、どうすればいいのでしょうか？一緒に紐解いていきましょう。
—
1. `ol`のマーカーを変える魔法「type属性」
`ol`（Ordered List：順序付きリスト）は、デフォルトだと「1. 2. 3.」と数字が並びます。でも、例えば「A. B. C.」というアルファベット順にしたいとき、わざわざ手打ちで `A.` と書くのはスマートではありませんよね。
そんなとき、HTMLの`type`属性を使うと、一瞬でマーカーの種類を変更できるんです。
`type`属性で選べる5つのスタイル
`type`属性には、以下の5つの値が用意されています。
- `type=”1″`：数字（1, 2, 3…） ※デフォルト
- `type=”a”`：小文字アルファベット（a, b, c…）
- `type=”A”`：大文字アルファベット（A, B, C…）
- `type=”i”`：小文字ローマ数字（i, ii, iii…）
- `type=”I”`：大文字ローマ数字（I, II, III…）
たとえば、こんな風に書くだけでOKです！
- まずは準備を整える
- 材料を買いに行く
- いざ調理開始！
これだけで、ブラウザが勝手に「A.」「B.」「C.」と振ってくれます。便利ですよね！
—
2. 実はCSSが最強？「list-style-type」との関係
さて、ここで少し深い話をします。「HTMLの属性で指定するのと、CSSの `list-style-type` で指定するの、どっちがいいの？」と迷う方も多いはずです。
結論から言うと、現代のWeb制作では「CSSで指定する」のが主流であり、推奨されています。
なぜなら、HTMLは「文章の構造（ここは番号付きリストである）」を伝える役割に専念させ、見た目のデザインはCSSに任せるのが、今のWeb業界の「お作法（関心の分離）」だからです。
どっちが優先されるの？
ここが一番のつまずきポイントですが、「CSSで指定しているなら、CSSが優先される」と覚えておいてください。
もし、HTMLに `type=”A”` と書いていても、CSSで以下のように書くと、CSSの設定が優先されます。
/ CSSで指定すると、HTMLのtype属性は無視されます /
ol {
list-style-type: lower-roman; / ローマ数字にする /
}
「あれ？HTMLで書いたのに変わらない！」と焦ったら、どこかでCSSの `list-style-type` が指定されていないかチェックしてみてくださいね。
—
3. 現場のリアル：どっちを使うべき？
初心者のうちは、どちらを使っても表示結果は同じなので、「まずは `type` 属性で手軽にやってみる」のも全然アリです！
ただ、中級者を目指すなら、以下のように使い分けるのが「プロの現場」の感覚です。
1. HTMLの `type` 属性：
- そのリストの意味（順序の重要性など）を、マークアップだけで完結させたいときに。
2. CSSの `list-style-type`：
- Webサイト全体でデザインを統一したいときや、レスポンシブデザインに合わせてリストの見た目を細かく調整したいときに。
—
まとめ：失敗しても大丈夫！
最後に一つだけ。リストのマーカー選びは、あくまで「ユーザーにどう情報を伝えるか」という手段の一つです。
「CSSを書いてみたけど、思った通りに動かない…」なんてことは、プロの現場でも日常茶飯事です。そんなときは、落ち着いてブラウザの検証ツールを開き、どのスタイルがどこから適用されているか確認してみてください。
HTMLもCSSも、一つずつ試して「あ！動いた！」という感動を積み重ねるのが一番の近道です。今日のこの小さな知識が、あなたのWeb制作の引き出しを一つ増やせたら嬉しいです。
また分からないことがあれば、いつでも聞きに来てくださいね。あなたの挑戦を応援しています！
コメント