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

クリックできる面積を増やそう

まずは、下記のリンクサンプルをご覧下さい。
普通のリンクですね。クリック可能なのは、タイトル部分だけです。

それでは、次のリンクサンプルをご覧下さい。
見た目は上記のサンプルと変わりありませんが、実際にクリック可能な範囲が増えています。マウスポインタを乗せてみると分かりますが、枠内のどこでもクリックできるようになっています。

前者のサンプルと後者のサンプルとでは、クリックできる面積が格段に異なります。 後者の方が広いので、クリックしやすいですね。
狭い範囲のリンク部分（多くのブラウザでは下線が引かれている部分）にマウスポインタを合わせる必要はなく、その周辺（文字のない場所でも可）をクリックするだけで構わないわけですから。

スクリプト不使用

このクリック範囲を広める方法は、JavaScriptなどのスクリプトは一切使用していません。HTMLでの記述内容も、従来のリンクとほとんど変わりません。とても手軽に実現可能です。

もちろん、画像でもありません。枠外からドラッグしてみると、ちゃんとテキストが範囲選択できることがお分かり頂けると思います。また、ブラウザの表示文字サイズを変更すれば、ちゃんとリンク内の文字の大きさも変化します。

スタイルシートを使う

このテクニックにはスタイルシートを利用しています。
しかし、スタイルシートを解釈できないブラウザや、スタイルシートをOFFにしている環境でも問題はありません。その場合は、余白部分をクリックすることはできなくなりますが、文字の上をクリックすることで通常のリンクとして機能します。

それでは、実際にこのクリック範囲を広めるリンクの作成方法をご紹介致しましょう。

それでは、次のページへ！→