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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

全体のソース

最後に、全体の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つのプロパティを使用しています。それぞれの意味は次の通りです。

display: block; displayプロパティに block を指定すると、当該要素がブロック要素になります。これによって、余白部分も含めてリンクになります。
width:100%; widthプロパティは、横幅のサイズを指定します。ここでは 100% とすることで、ウインドウ幅(もしくは枠の幅)一杯にクリック範囲を広げています。
text-decoration:none; text-decorationプロパティは、文字の装飾を指定します。ここでは none としていますので、一切の装飾をなくします。多くのブラウザでは、リンク部分に下線を引いてしまうので、それを抑制するために使用しています。
color:black; 文字色の指定です。ここでは黒色(black)を指定しています。

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

■後者「a span~」のソース:

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

text-decoration:underline; text-decorationプロパティは、文字の装飾を指定します。ここでは underline としていますので、「下線を引く」という指定になります。
color:blue; 文字色の指定です。ここでは青色(blue)を指定しています。

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

おわりに

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

関連記事

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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