【ホームページ作成】空白部分もクリック可能！クリックできる面積を増やす

全体のソース

最後に、全体のHTMLソースをまとめてご紹介致しましょう。
下記のソースをコピー＆ペーストして、適当なHTMLファイルに貼り付ければ、今回ご紹介したリンクサンプルを実現できます。
あとは、そこからリンク先や文字などを書き換えてご使用下さい。

<style type="text/css"><!--
a.blocklink {
   display: block;
   width: 100%;
   padding: 0px;
   text-decoration: none;
   color: black;
}
a span {
   text-decoration: underline;
   color: blue;
}
a:hover {
   background-color: #ffffcc;
}
--></style>
<table border="0" cellspacing="0" cellpadding="0"><tr><td bgcolor="skyblue">
<table border="0" cellspacing="1" cellpadding="3" width="100%"><tr><td bgcolor="#f0ffff">
   <a href="http://allabout.co.jp/gm/gc/23812/" class="blocklink">
      <font size="-1">周辺のどこをクリックしても移動可能に</font><br>
      <span>クリックできる面積を増やそう！</span><br>
      <font size="-2">
         通常のリンクでは、クリック可能なのは下線部分だけですね。周囲の説明文字や余白部分などもクリック可能にすると、クリックしやすくなって便利です。そこで、クリックできる面積を拡大させてみましょう！ スクリプトは不使用で、実現はとっても簡単です。<br>
      </font>
   </a>
</td></tr></table>
</td></tr></table>

スタイルシート部分の解説

さて、スタイルシート部分について、少しご説明致します。
スタイルシート部分のソースは次の通りでした。

<style type="text/css">
a.blocklink {
   display:block;
   width:100%;
   text-decoration:none;
   color:black;
}
a span {
   text-decoration:underline;
   color:blue;
}
</style>

これは、「 a.blocklink { ～ } 」と「 a span { ～ } 」の2つに分けられます。（＝2つのスタイルの指定があります。）

■前者「a.blocklink～」のソース：

これは、a要素のblocklinkクラス（<a ... class="blocklink">）に対してスタイルを指定しています。ここでは、次の4つのプロパティを使用しています。それぞれの意味は次の通りです。

上記の指定によって、クリック範囲を拡大すると共に、リンク範囲すべての文字に下線が引かれてしまうのを防ぎ、さらにすべての文字がリンク文字の色になってしまうのを防いでいます。

■後者「a span～」のソース：

これは、a要素内にあるspan要素（<a ...><span>～</span></a>）に対してスタイルを指定しています。ここでは、次の2つのプロパティを使用しています。それぞれの意味は次の通りです。

上記の指定がなければ、先のa.blocklinkの指定によって、すべての文字に下線が引かれないままになる上、すべての文字が黒色で表示されてしまいます。 それでは、その範囲がリンクであることが分かりにくくなってしまいます。 そこで、上記の指定で、一部の文字にだけ（リンクであることを示す）下線を引き、青色で表示させているわけです。

おわりに

今回は、リンクのクリック可能面積を増やす方法をご紹介致しました。
ぜひ、ご活用下さい。

関連記事

• 余白も含めて行全体をリンクに！
• 周囲の余白や文字も含めてリンクをデザイン
• チェックを付けたい箇所に　蛍光ペン効果を付けるには？
• どのリンクが選択中なのかを際立たせる装飾
• 箱形のページ移動リンクを作る
• リンク文字の直後にアイコンを加える
• 画像の下に謎の隙間ができるのを防ぐには