ul、liを使って要素を入れ子にし、各リストごとに別の装飾をする方法
ul、liを使ってリストを作る際、要素を入れ子にして階層を複数設ける方法を、具体例を基にしつつご紹介します。
【作りたいレイアウト例】
メインのメニューがあり、その下層に複数のコンテンツがあり、さらにその下層にもコンテンツがある、という構成です。
ulの中にさらにulを入れる
基本的なul,liを用いたリストの構成はこちら。
この中にさらにリストを作成することで階層を増やすことができます。階層を挿入したいliのタグ内にulを追記します。下層にしたいコンテンツをulの新たなリストを作り、それを親となる<li>で囲みます。
htmlだけで構成するとビジュアルはこんな感じ。
ちなみに、ulとは “Unordered List ” の略で、olは “ordered List ”の略です。リストの内容に順番（order）があるかないかの違いです。ulを使用した場合はコンテンツの直前に中黒などのマーカーが付き、olを使用した場合はコンテンツの直前に数字が付きます。これはデフォルトでの設定なので、装飾はcssで調整可能です。
CSS で見た目の調整
作りたいレイアウト例の構成は、第一階層になっているメインのメニューにはアイコンを、その下の第二階層には中黒を、さらにその下の第三階層には何も表示させない、という構成になっています。（第三階層の「-」はcssの装飾ではなくhtml内でのテキスト）
See the Pen
ZEYdjed by nanami (@nanami_po)
on CodePen.
アイコンはbackground-image: で指定してください。下層メニュー１の中黒は border-radius: 50%;で作成。このように、各メニューごとに装飾を変えたい場合は、コンテンツを<div>や<p>なんかで囲んでクラス指定をして調整可能です。
まとめ
今回ご紹介した方法は、リストの数が多いときにまとめて階層ごとで装飾を変えたい場合に便利です。参考にしてみてください。
関連記事
