リンクをブロック構造にする

ヘッダーメニューなどによく活用するテクニックですが、本来インラインのリンクをブロック構造にすることで、リンクのテキスト部分だけでなく周りまでリンクの領域が広がるので、様々なレイアウトをすることが可能になります。

例えば、メニュー部分のリンクをブロック構造にすると、メニューバーを画像なしに作成できます。

その際、ブロック要素にするa要素に｢display:block;｣とともに、幅を指定しておくことが必要です。

(X)HTMLコード

<ul class="menu">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>

CSSコード

li.menu a{
   display:block;
   width:200px;
}