a要素を使ってリンクを作ると、デフォルトの装飾では「リンク文字列の存在する範囲内」だけが「クリック可能な領域」になります。画像をリンクにした場合も、やはり「画像の存在する範囲」だけが「クリック可能な領域」になります。しかし、複数個を列挙したリンク群をメニューっぽく構成したい場合など、(高さや横幅いっぱいまで)空白部分も含めて枠内全体をクリック可能にしたいと思うこともあります。

下記のサンプルでは、リンクが縦に3つ並んでいます。点線で大きく囲まれている範囲内は、空白部分(文字のない部分)を含めてクリック可能です。

上記の3つのリンクは、一見すると普通のリンクと変わらないように見えます。でもマウスポインタを載せてみると、横幅いっぱいまでクリック可能になっていることが分かります。
リンク文字列の右側に広がっている空白部分をクリックしても、リンクは正しく機能します。

空白部分も含めてブロック全体をクリック可能にするスタイルシート

リンクを作るa要素は、デフォルトの状態ではインライン要素として表示されます。
先の装飾は、この「a要素」に対してdisplayプロパティを使ってブロック化する(＝ブロックレベル要素のように表示させる)ことで実現できます。

以下のようにCSSソースを記述します。

a {
   display: block; /* ブロック化 */
   padding: 0.3em; /* 内側の余白 */
   border: 1px dotted gray; /* 点線の枠を付ける(任意) */
}
a:hover {
   color: #000080; /* 文字色 */
   background-color: #ccffff; /* 背景色 */
   border: 1px solid blue; /* 実線の枠を付ける(任意) */
}

displayプロパティに値「block」を指定すると、その対象がブロックレベル要素のように表示されます。その結果、リンクの範囲が縦横いっぱいにまで広がり、空白部分もクリック可能になります。

それだけだと詰まって見えるので、paddingプロパティを使って内側に少し余白を設けています。上記のソースでは0.3文字分だけ周囲に余白を加えています。この余白部分も「クリック可能な領域」です。

上記では、さらにborderプロパティを使って枠線を付加しました。これは、範囲を分かりやすくするために加えただけで、必須の装飾ではありません。しかし、メニュー項目のように見えたい場合には、a要素に対して枠線を付加するケースは多々あるように思います。

リンクの下線を消して、角を丸くして、ボタンっぽいメニュー項目にする方法

上記のようにリンクを装飾する場合、リンク文字にデフォルトで付加される下線は消した方が見やすくなるかも知れません。枠線が付いていて、かつ、それがメニュー項目に見えるように並んでいたり、もしくはボタンっぽく装飾されていれば、下線が引かれていなくても「押せる」ということは(慣習として)分かるでしょうから。

その場合には、以下のようなCSSソースを記述します。

a {
   display: block;            /* ブロック化 */
   padding: 0.3em;            /* 内側の余白 */
   border: 1px solid #aaaaff; /* 枠線を引く */
   border-radius: 0.65em;     /* 角を丸くする */
   text-decoration: none;     /* 下線を消す */
}
a:hover {
   color: #000080;            /* 文字色 */
   background-color: #ccffff; /* 背景色 */
   border-color: blue;        /* 枠線の色 */
}

上記のCSSソースの5行目で、border-radiusプロパティを使うことで角を丸くしています。こうすると、リンクになる領域(＝クリック可能な領域)も丸くなります。
6行目で、text-decorationプロパティに値「none」を指定することで、リンクの下線を消しています。

表示すると、以下のように見えます。

ナビゲーション目的のリンク群を掲載する際には、この「a要素にdisplay:block;を指定してブロック化する」装飾は頻繁に使われるように思います。なお、リンク群を横方向に並べたいときには、displayプロパティの値を「block」ではなく「inline-block」にすることもよくあります。

(更新日：2016年02月12日)