【入門編】li要素（リスト項目）の役割と制約 – HTML実践ガイド

こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。

HTMLを学び始めると、避けては通れないのが「リスト」のタグたち。`

`、`
`、そしてその中身である`
1. `。教科書通りに書けば動くけれど、「なぜわざわざ`
2. `で囲まなきゃいけないの？」「これ単体で使っちゃダメなの？」といった疑問、一度は浮かびますよね。

   今日は、そんなリストの「絶対ルール」を、身近な例えを交えて紐解いていきましょう。大丈夫、仕組みさえわかれば怖くありませんよ！

   —

   1. そもそも ` ` は「お弁当の仕切り」のようなもの

   `

3. `（List Item）は、その名の通り「リストの項目」です。
   想像してみてください。お弁当箱を。お弁当箱という大きな枠（`
   `や`
   `）の中に、おかずを詰めるための「カップ（仕切り）」がありますよね。

   もし、カップを使わずに直接お弁当箱におかずを放り込んだらどうなるでしょう？ おかず同士が混ざり合って、見た目も悪く、食べる時に不便ですよね。

   HTMLの世界でも同じです。

   • `
     `（unordered list）： 「順不同リスト」。ポテトチップスの味のラインナップのように、順番に意味がないリスト。
     • `
       `（ordered list）： 「順序付きリスト」。レシピの手順のように、1番、2番と順番が大事なリスト。

     このリストという「お弁当箱」の中には、必ず「カップ」である`

   • `を入れてあげないといけない。これがHTMLの鉄則なんです。
     

     2. なぜ ` ` を単独で使ってはいけないの？

     時々、「`

   • ` だけでもブラウザで見たらちゃんと表示されるよ？」というお声を聞きます。確かに、ブラウザは優秀なので、多少書き方が崩れていてもそれっぽく表示してくれます。

     でも、それは「中身が入っていないお弁当箱」を無理やり並べているようなもの。

     Webサイトを読み取るのは人間だけではありません。検索エンジンのロボットや、視覚障がいのある方が使う「スクリーンリーダー（画面読み上げソフト）」も読み取ります。

     「`

   • `だけがポツンとある状態」だと、彼らは「これはリストの一部なの？ それともただの文字の羅列なの？」と混乱してしまいます。お弁当箱のカップが外に飛び出していたら、中身がこぼれてしまいますよね。それと同じで、「親（`
     `や`
     `）」という守り神がいない`
     1. `は、構造として成立しないのです。
        

        3. 実践！正しいリストの書き方

        では、実際にコードを見てみましょう。迷った時は、この形を思い出してください。

     2. りんご
     3. みかん

     • りんご
     • みかん
     • バナナ

     ちょっとした豆知識：` ` の中には何が入る？

     `

     4. `の中には、文字だけでなく、画像やリンク（``タグ）、さらには別のリストを入れることもできます。

        「リストの中にリストを作る」というのは、階層構造（お弁当の中に小分けのタッパーを入れるイメージ）を作りたい時に非常に便利です。

        • 果物
          • りんご
          • ぶどう
        • 野菜

        4. つまずきポイント：CSSで「・」を消したい時は？

        初心者の方が一番悩むのが、「リストの頭にある『・』がデザイン的に邪魔！」という場面。
        つい、`

     5. `を使わずに`
        `などで代用したくなる気持ち、よーく分かります。

        でも、リスト構造はそのままに、CSSで見た目だけ変えるのがプロの流儀です。`list-style: none;` という魔法の言葉を使えば、構造は守りつつ、見た目はスッキリさせることができますよ。

        ul {
        / これで「・」が消えて、お好みのデザインにできます！ /
        list-style: none;
        / 余白もリセットしておくと綺麗です /
        padding: 0;
        margin: 0;
        }

        —

        最後に：HTMLは「意味」を伝えるためのもの

        HTMLを書くことは、ただ画面に文字を出すことではありません。「ここはリストですよ」「ここは大事な見出しですよ」という『意味』をコンピューターに伝える作業です。

        `

     6. `を正しく使うことは、あなたのWebサイトを、誰にとっても、どんな機械にとっても「分かりやすい場所」にするための第一歩。

        最初はルールが多くて大変に感じるかもしれませんが、書いているうちに「あ、これはリストだな」「これはただの段落だな」と、自然と手が動くようになります。一つずつ、ゆっくり慣れていきましょうね。

        もし分からないことがあっても大丈夫。何度でもコードを書き直して、納得いくまで試してみてください。それが一番の上達の近道です！

        それでは、また次回の記事でお会いしましょう！