サイドバー用メニューリストのHTML構造

リストメニューのHTML構造と、CSSの宣言のしかたについて。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

サイドバー用メニューリストのHTML構造

ブログなどでは、サイドバーにカテゴリや月別アーカイブなどへのリンクをリストで掲載することがよくありますが、このサイドバー用のメニューのデザインをCSSで整えるためには、まず、メニューリストのHTML構造を理解しなければなりません。

基本的なリストメニュー

例えば、ブログのカテゴリをリストメニューで表示させる際、サブカテゴリのないシンプルな形の場合は次のようなHTMLで表示します。

[HTMLコード]サイドバー用メニュー(サブカテゴリ無)

<ul class="sideMenu">
	<li><a href="/cat1/">パソコン関係</a></li>
	<li><a href="/cat2/">家電製品関係</a></li>
	<li><a href="/cat3/">雑貨/キッチン用品関係</a></li>
	<li><a href="/cat4/">食事・お取り寄せ関係</a></li>
	<li><a href="/cat5/">その他諸々</a></li>
</ul>

[ブラウザ上の表示]

階層のあるリストメニュー

ブログのカテゴリが1階層しかない場合は上記サンプルで間に合うのですが、サブカテゴリを設けると、HTMLは次のようになります。

[HTMLコード]サイドバー用メニュー(サブカテゴリ有)

<ul class="sideMenu">
	<li><a href="/cat1/">パソコン関係</a>
		<ul>
			<li><a href="/cat1/cat11/">パソコン本体</a></li>
			<li><a href="/cat1/cat12/">パソコン周辺機器</a></li>
			<li><a href="/cat1/cat13/">パソコンソフト</a></li>
		</ul>
	</li>
	<li><a href="/cat2/">家電製品関係</a>
		<ul>
			<li><a href="/cat2/cat21/">デジタルカメラ</a></li>
			<li><a href="/cat2/cat22/">電気シェーバー</a></li>
		</ul>
	</li>
</ul>

[ブラウザ上の表示]

親カテゴリのliタグ内にulタグを入れることで、リストを階層化させることができます。なお、カテゴリを大・中・小の3階層に分ける場合は、2階層目(中カテゴリ)のliタグ内にulタグを入れることで、3階層目をつくることができます。

CSSの書き方

[CSSコード]サイドバー用メニュー(サブカテゴリ無)

.sideMenu { margin:10px 0; }
.sideMenu li { margin-left:16px; }

階層のないシンプルなリストメニューの場合、上記例のようにリストメニューに当てるセレクタと、それに内包されるliタグに対して宣言を指定すればいいのですが、階層を持たせる場合、次のようにCSSも階層化して指定してあげる必要があります。

[CSSコード]サイドバー用メニュー(サブカテゴリ有)

.sideMenu { margin:10px 0; }
.sideMenu li {font-weight:bold;  margin-left:16px; }
.sideMenu li ul li { font-weight:normal; }

[ブラウザ上の表示]

上2つの指定はサブカテゴリ無しの場合と同様ですが、サブカテゴリ部分の親カテゴリのliタグ内に入れたulタグ内のliタグに対しては、「.sideMenu li ul li」といった指定を加えることになります。

上記の例では、「.sideMenu li ul li」のfont-weight値を「normal(通常)」に指定しています。この指定を行わないと、親ボックス「.sideMenu li」で指定した「font-weight:bold;」という宣言が、子ボックス(サブカテゴリ)のliタグにも適用され、サブカテゴリ内のアンカーテキストも太字で表示されてしまうためです。

階層化したリストメニューのデザインをCSSで指定する際は、「親ボックスで指定した宣言は、子ボックスにも引き継がれる」ということを覚えておきましょう。