なぜかハマる「liタグの中身」の正体。HTMLのルールを優しく紐解こう
こんにちは！フロントエンドの世界へようこそ。
HTMLを書き始めると、必ずと言っていいほどお世話になるのが「リスト（`ul`, `ol`, `li`）」ですよね。箇条書きを作るためのこのタグ、実は「中身に何を書いていいのか」というルールで、多くの初心者が一度は「あれ？これで合ってるのかな？」と迷ってしまうポイントなんです。
今日は、そんな`li`タグの「懐の深さ」と「守るべきルール」について、おしゃべりするように解説していきますね。
—
「li」は、何でも受け止めてくれる大きな箱
まず、`li`タグの正体をイメージしてみましょう。`li`は「リストという名前の、仕切り付き収納ボックス」だと思ってください。
この箱の中には、何を入れたらいいのでしょうか？ 結論から言うと、HTML5以降のルールでは、「基本的に、Webページ上に表示されるほとんどのもの（フローコンテンツ）」を詰め込むことができます。
「えっ、じゃあ何でもいいの？」そうなんです！
例えば、こんなものたちがすっぽり収まります。
- 文字（テキスト）：もちろん基本ですね。
- 段落（pタグ）：文章をひとまとめにする箱。
- 見出し（h1〜h6）：リストの中にちょっとした見出しが欲しい時。
- 画像（imgタグ）：写真やアイコンを並べたい時。
- さらなるリスト（ulの中にul）：階層構造を作りたい時。
昔のHTML（かなり昔の話ですが）では「ブロックレベル要素は入れちゃダメ！」なんて厳しいルールがあったのですが、今のWeb制作では「`li`の中に`p`や`div`を入れても全然OK！」というくらい、とても自由なんです。
—
実例で見てみよう！こんな風に書いてOK
では、実際にコードで見てみましょう。たとえば、「おすすめのレシピ紹介」リストを作るとします。
- 新鮮なトマトを使う
-
オリーブオイルをたっぷりかける
少し塩を振ると甘みが引き立ちます。
-
仕上げのハーブ
乾燥ハーブでも代用可能です。
どうでしょう？ `li`という箱の中に、見出しや段落が自由に入っていますよね。これ、全部HTMLのルールとして正しい書き方なんです。
—
つまずきやすいポイント：入れ子構造に注意！
ひとつだけ、初心者の頃にやりがちな「惜しい！」パターンをお伝えします。
「リストの中に、もう一個リストを入れたい時」です。
もし`li`の中に別の`ul`（あるいは`ol`）を入れたい場合は、必ず`li`の閉じタグ（`
`）の前に入れるようにしてください。
良い例：
- りんご
- みかん
気をつける例：
- りんご
「`li`という箱の中に、子どものリストを入れる」というイメージを持つと、入れ子関係も怖くなくなりますよ！
—
まとめ：ルールは「意味が通じるか」を大切に
`li`タグの中に何を入れるか迷ったときは、こう考えてみてください。
「この内容は、このリスト項目の一部として説明がつくだろうか？」
もし、リスト項目とは関係のない大きなレイアウト用の箱（`div`タグでガチガチに固めた複雑な構造など）を無理やり詰め込もうとしているなら、それは少し立ち止まるサインかもしれません。でも、基本的には「見やすく、伝わりやすく」するための要素なら、どんどん中に入れて大丈夫です！
HTMLは、コードを書く人の気持ちを汲み取ってくれる優しい言語です。まずは難しく考えず、今回紹介した例のように「箱の中にいろんなものを入れてみる」ところから試してみてくださいね。
うまく表示されたら、きっと楽しくなってくるはず。一緒にフロントエンドの世界を楽しみましょう！
コメント