ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

空白部分もクリック可能!クリックできる面積を増やす

通常のリンクでは、クリック可能なのは下線部分だけですね。周囲の説明文字や余白部分などもクリック可能にすると、クリックしやすくなって便利です。スクリプト不使用で手軽にクリック面積を拡大させてみましょう!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

携帯サイトの作り方 第1回
携帯電話などから閲覧できる「ケータイサイト」を作ってみましょう。携帯端末に搭載されているブラウザに関するいくつかの制約を押さえておけば、あとは簡単に作成できます。まずは、携帯サイト作成の基本をご紹介。
▲クリックできるのはタイトル部分だけ

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

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

スクリプト不使用

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

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

スタイルシートを使う

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

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

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

  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます