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

空白部分もクリック可能!クリックできる面積を増やす(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

クリックできる面積を増やす方法は

通常のリンクを作成する場合、次のように記述しますね。

<a href="hoge.html">リンク先</a>

このHTMLを表示すると、次のように見えます。

今回ご紹介するテクニックでも基本は一緒です。上記と同じように a要素(<a>~</a>)を使用してリンクを作ります。ただ異なるのは、クリック可能にしたい範囲全体を a要素にしてしまう(<a>~</a>で囲む)点です。

例えば、次のような感じで記述します。

<a href="hoge.html">
   <small>携帯サイトの作り方 第1回</small><br>
   携帯端末用サイトを作る!<作成方法の基礎><br>
   <small>携帯電話などから閲覧できる「ケータイサイト」を作ってみましょう。携帯端末に搭載されているブラウザに関するいくつかの制約を押さえておけば、あとは簡単に作成できます。まずは、携帯サイト作成の基本をご紹介。</small><br>
</a>

すると、このHTMLは次のように表示されます。

全部の文字が a要素に含まれている(<a>~</a>で囲まれている)わけですから、全体がリンクになっています。しかし、これでは見た目がよろしくありませんし、何より余白部分はリンクになっていません。

そこで、次のように記述を加えます。

続きは、次のページで!→

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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