「リスト」って何のためにあるの？HTMLの ` ` タグで情報を整理しよう
Webサイトを作っていると、必ずと言っていいほど出会うのが「リスト（箇条書き）」です。
「メニュー項目」「商品の特徴」「ニュースの最新情報」など、情報を並べて見せたい場面はたくさんありますよね。
HTMLには、そんな「並べる」ためのタグがいくつか用意されていますが、今回はその中でも一番の基本であり、主役級の存在である `
- `（アンオーダード・リスト）タグ について解説します。
- 牛乳
- 卵
- パン
- バナナ
- `（List Item：リストアイテム）タグと一緒に使います。
「`
- ` という大きなカゴの中に、`
- ` という商品を一つずつ入れる」とイメージしてみてください。
- 牛乳
- 卵
- パン
- バナナ
これだけで、ブラウザは「これは一つのリストグループですね！」と理解してくれます。
—
ブラウザのデフォルトスタイルにびっくりしないために
コードを書いてブラウザで表示してみると、「あれ？何も設定していないのに、左側に余白があるし、項目の前に黒い点（・）がついている！」と驚くかもしれません。
実はこれ、ブラウザが気を利かせて「これはリストですよ」と見やすくするための「初期設定（デフォルトスタイル）」なんです。
- 左側の余白： `padding-left` という設定で、少し内側にインデント（字下げ）されます。
- 黒い点： `list-style-type` と呼ばれる設定で、自動的に付与されます。
「デザインを自分好みに変えたい！」というときは、CSSを使ってこの設定を消したり、別のアイコンに変えたりすることができます。まずは「ブラウザが自動的に整えてくれているんだな」と安心してくださいね。
—
まとめ：今日からできるステップアップ
`
- ` タグは、Webページの情報を整理整頓するための「整理棚」のようなものです。
- ` で包む
1. グループを `
- ` で囲む
2. 項目一つひとつを `これだけで、あなたの書くHTMLはぐっと「構造的」で、誰にとっても読みやすいものになります。
最初は複雑に見えるコードも、こうやって「身の回りの整理」に例えてみると少し親近感が湧きませんか？もし書いていて迷ったら、「この項目は順番を入れ替えても困らないかな？」と自分に問いかけてみてください。それが `
- ` を使うべきかどうかの唯一の判断基準です。
次はぜひ、CSSを使ってこのリストをおしゃれにカスタマイズすることにも挑戦してみてくださいね。あなたのWeb制作の旅を、これからも応援しています！
- ` という商品を一つずつ入れる」とイメージしてみてください。
「タグなんていっぱいあって覚えるのが大変！」と思っているあなたも大丈夫。身近な例え話と一緒に、少しずつ紐解いていきましょう。
—
そもそも、なぜリストにする必要があるの？
例えば、あなたがスーパーで買い物をする時の「買い物メモ」を想像してみてください。
これ、もしメモが「牛乳卵パンバナナ」と一行に詰まっていたら、すごく読みづらいですよね？
Webの世界でも同じです。人間がパッと見て「これは別々の項目なんだな」と理解できるように、また、Googleの検索エンジンなどの機械が「ここからここまでは一つのグループだな」と正しく認識できるように、HTMLではリスト用のタグを使って構造化してあげる必要があるんです。
—
` ` は「順序が大事じゃない」リスト
`
- ` は、Unordered List（アンオーダード・リスト：順序なしリスト） の略です。
「順序なし」とはどういうことかと言うと、「順番を入れ替えても意味が変わらないもの」に使います。先ほどの買い物メモのように、「卵を先に買うか、牛乳を先に買うか」は結果としてどちらでもいいですよね。そんな時はこの `
- ` を使います。
逆に、「料理の作り方（1. 切る、2. 煮る…）」のように、順番が大事な場合は別のタグ（`
- `）を使います。まずは「順番がどうでもいいグループ」を作るときは `
- ` だと覚えておけばOKです！
—
基本の書き方：` ` と ` ` のコンビ
`
- ` タグは、それ単体ではあまり意味をなしません。必ず、中身である `
コメント