リンクのクリック範囲を広げたい #CSS #CSS

やりたいこと

　スマホサイズでもクリックしやすいように、リンクのクリック範囲をもう少し広げたい。
　例えば下の例だと、そのまま記述した場合 aタグ の「詳細はこちら」の文字の範囲のみ、リンクに飛べるようになっている。これを、親要素である divタグ 全体までクリック範囲を広げ、 h1タグ や imgタグ でもリンクに飛べるようにしたい。

sample.html

<div class="div">
  <img src="img.png">
  <h1>タイトル</h1>
  <a href="#">詳細はこちら</a> <!-- 普通はリンクに飛べるのはこの箇所だけ -->
</div>

解決方法

CSSの、positionプロパティで解決する。
positionプロパティを忘れた時はこちら、をいつか追加します。きっと。

基本的な考え方

aタグ の範囲を、divタグ の左上を基準とし(①〜④)、そこから幅100%(⑤)、高さ100%(⑥)とすることで、 divタグ 全体までクリック範囲を広げる。

こうすることで、aタグの範囲 = divタグの範囲となる。
イメージとしては、divタグ の上に、 aタグ がぴったり重なっている感じ。

sample.css

.div {
  position: relative; /* ① */
}

.parent a{
  position: absolute; /* ② */
  top: 0; /* ③ */
  left: 0; /* ④ */
  width: 100%; /* ⑤ */
  height: 100%; /* ⑥ */
}

あれ、でも思うてたのとちょっと違う

　確かに h1 タグや img タグもクリックできるようになってるけど、aタグ の「詳細はこちら」という文字が画像の上に表示されてる！なんで？？

イメージとしては、divタグ の範囲の上に、 aタグ の範囲がぴったり重なっている感じ。

　そう、「詳細はこちら」というテキストを”含む” aタグ が、divタグ の上に重なっているから。
　解決するには、まず「詳細はこちら」という文字列を削除しちゃう。そのあとで、aタグ以外のタグで文字列を書く。aタグっぽくしたいなら、CSSでcolorやtext-decolationなどのstyleを追加すると○。

sample_2.html

<div class="div">
  <img src="img.png">
  <h1>タイトル</h1>
  <span>詳細はこちら</span> <!-- 適当なタグを追加する -->
  <a href="#"></a> <!-- この中の文字列を削除 -->
</div>

補足（見ても見なくてもどっちでもいいもの）

今回は親要素がdivタグだったが、ulやliなどでもできる！
ただしブロック要素。Float要素の場合は重なり順で注意が必要。
広げたリンク範囲の中にさらに別のリンクを追加したい場合も基本は一緒！
別のリンクに飛ぶaタグをクラス名をつけて追加し <a href="#2" class="inline">、そのpositionをrelativeにすればOK!　.div a.inilnk{position:relative; z-index:3}