メニューリストのリンク部をブロック化
通常、リンク部分はアンカーテキスト上でマウスをクリックしないとリンク先にジャンプしませんが、aタグをブロック要素として表示させれば、余白部分でクリックしてもジャンプすることができるようになります。
リンク部分のフォントサイズや1行の高さが小さい場合、テキストがクリックしづらくなってしまいますが、aタグをブロック化することで、テキストから多少ずれた位置でクリックしてもリンク先に行けるようになり、ユーザビリティーが向上します。また、デザイン面でも、各リストを横幅ピッタリに表示させることができ、緻密に整理された印象を与えることができます。
HTMLの書き方
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>
この状態だと、アンカーテキストにマウスカーソルが載らないと、フォントカラーが変わりませんし、クリックしてもリンク先へジャンプできません。
CSSの書き方
第1段階 - リストマークを非表示にする
まずは、自動的に付けられるリストマークを、list-styleプロパティで非表示（none）にします。なお、ここではリスト表示部の横幅が180pxである場合を想定しています。
[CSSの記述]
.sideMenu , .sideMenu ul { margin:0; padding:0; }
.sideMenu a { text-decoration:none; }
.sideMenu li {
list-style:none;
font-size:12px;
line-height:20px;
}
[ブラウザ上の表示]
こちらもメニューリストのリストマークを画像にのサンプルと同様に、親カテゴリと子カテゴリがリストマークなしで一列に並びます。
同時に、フォントサイズを12px、1行の高さを20pxに、加えて、text-decorationプロパティで.sideMenu内のaタグの下線を非表示にします。
第2段階 - 親カテゴリをブロック化
ここからがブロック化についての説明です。まず、親カテゴリをブロック化します。
[CSSの記述]
.sideMenu , .sideMenu ul { margin:0; padding:0; }
.sideMenu a { text-decoration:none; }
.sideMenu li {
list-style:none;
font-size:12px;
line-height:20px;
}
.sideMenu li a {
display:block;
padding:0 5px;
background:#060;
color:#fff;
line-height:20px;
border-bottom:solid 1px #030;
}
.sideMenu li a:hover { background:#393; }
[ブラウザ上の表示]
displayプロパティで、インライン要素であるaタグをブロック要素として表示するよう指定します。同時に、背景色やフォントカラー、罫線などを指定し体裁を整えます。また、「.sideMenu li a:hover」でマウスカーソルがリンク部分に乗った際の背景色を指定します。
この時点で、テキスト上ではない右側の余白部分にカーソルを乗せてもリンク先へジャンプできるようになります。
最終段階 - 子カテゴリの背景色、フォント色を変更
このままですと、どれが子カテゴリなのか分からないので、子カテゴリの背景色とフォントカラーを変更します。
[CSSの記述]
.sideMenu , .sideMenu ul { margin:0; padding:0; }
.sideMenu a { text-decoration:none; }
.sideMenu li {
list-style:none;
font-size:12px;
line-height:20px;
}
.sideMenu li a {
display:block;
padding:0 5px;
background:#060;
color:#fff;
line-height:20px;
border-bottom:solid 1px #030;
}
.sideMenu li a:hover { background:#393; }
.sideMenu li ul li a {
background:#9f9;
color:#030;
border-bottom:solid 1px #6c6;
}
.sideMenu li ul li a:hover { background:#6f6; }
[ブラウザ上の表示]
これで、親カテゴリと子カテゴリを見分けやすくなりました。
この方法によるメニューリストは、キレイに見える反面、鬱陶しく感じられたりもしますので、場所や背景色を選んで使うようにしましょう。（背景色は、濃い色ばかりが並ぶとしつこく感じます。濃い色は親カテゴリ、子カテゴリは薄い色を使うなど、メリハリを考えて色を選択しましょう。）
- 前の記事：メニューリストのリストマークを画像に
- 次の記事：サイト作りに役立つCSSの使い方