ulタグを使った多階層メニューってどうやって作るの？
メニューの下層にさらにメニューを入れたい時はよくあると思います。
簡単に作れますがちょっと間違えるかも知れないので、ここでしっかり確認しておきましょう。
効率よくコーディングしたい人はこちら
HTMLの多階層メニューで使うのはulタグとliタグだけ
多階層メニューを作るのは通常のメニューを作るときと同じでulタグとliタグを使います。
まずは通常のメニューを見てみます。
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
<li>メニュー6</li>
</ul>
横並びや矢印はcssを使っています。
そして多階層にする場合は次のようになります。
<ul>
<li>メニュー1</li>
<li>
メニュー2
<ul>
<li>下層メニュー1</li>
<li>下層メニュー2</li>
<li>下層メニュー3</li>
</ul>
</li>
<li>メニュー3</li>
<li>
メニュー4
<ul>
<li>下層メニュー1</li>
<li>下層メニュー2</li>
<li>下層メニュー3</li>
</ul>
</li>
<li>メニュー5</li>
<li>メニュー6</li>
</ul>
下層メニューを入れたいliタグの中にulタグを入れ子にする形となります。
よくあるかも知れない間違い
とても似ているのですが、次のように書くのは間違いです。
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<ul>
<li>下層メニュー1</li>
<li>下層メニュー2</li>
<li>下層メニュー3</li>
</ul>
<li>メニュー3</li>
<li>メニュー4</li>
<ul>
<li>下層メニュー1</li>
<li>下層メニュー2</li>
<li>下層メニュー3</li>
</ul>
<li>メニュー5</li>
<li>メニュー6</li>
</ul>下層のulタグはliタグの中に入れる必要があります。
というのもulタグの直下に入れられるのは基本的にliタグだけで、上記のようにulタグの直下にulタグがあってはいけません。
liタグの中にはulタグを書いてもOKです。
ちなみにこのコードだと次のようになります。
ぱっと見た感じでは間違いの方がコードの見た目的に合っているように見えるかもしれないので、間違えないようにしましょう。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
