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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

<a href="..." class="blocklink">
   <small>携帯サイトの作り方 第1回</small><br>
   <span>携帯端末用サイトを作る</span><br>
   <small>携帯電話などから閲覧できる...</small><br>
</a>

まず、aタグ内に「class="blocklink"」を加えます。
それから、メインのリンク文字(ここではリンク先ページのタイトル)をspan要素(<span>~</span>)で囲みました。

こう記述しただけでは、まだ何も変化しません。
次に、HTMLファイルの head要素内(<head>~</head>内)に、次のようなスタイルシートの記述を加えます。

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

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

見た目は普通のリンクですが、すべての文字や周囲の余白部分もクリック可能になっています。 マウスを乗せるとよく分かると思います。
必要に応じて枠で囲むなどして下さい。

これで完成です!

全体のソースとスタイルシート部分の解説

さて、段階を追ってご紹介してきましたので、「結局どう書けばよいのか?」いまいちお分かりにならなかった方々もいらっしゃるかも知れませんね。
最後に、全体のHTMLソースをまとめてご紹介致します。
また、上記ではソースの紹介だけだったスタイルシート部分に関しての解説も記しておきます。

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

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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