【HTML/CSS】aタグのクリック範囲を親要素のサイズに合わせる

こんにちは、Ryohei（@ityryohei）です！

aタグのクリック範囲を親要素のサイズに合わせる方法のご紹介です。

リストタグやdivタグの小要素にaタグを持たせると、初期設定ではaタグのクリック範囲はテキストのみに反応するかと思います。

liタグのdivタグ小要素としてaタグを持たせることは多いです。ただ、liタグ等にボタンのようなスタイルを定義しているのに、aタグのテキスト上しかクリックできないのはユーザービリティがよくないですよね。

そこで、今回はaタグのクリック範囲を親要素のサイズに合わせる方法をご紹介したいと思います。

本記事の内容

• aタグの初期のクリック範囲を確認する
• aタグのクリック範囲を親要素のサイズに合わせる

では、解説していきます。

aタグの初期のクリック範囲を確認する

aタグの初期表示を確認してみます。aタグに背景を設定してliタグの小要素としてみます。

スタイルは最小限のもののみを設定します。

aタグの背景色と、liタグの範囲をわかりやすくするためにボーダーを設定します。

HTML

<ul>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">ipsum</a></li>
  <li><a href="#">dolor</a></li>
  <li><a href="#">sit</a></li>
  <li><a href="#">amet</a></li>
</ul>

CSS

ul li {
  width: 100%;
  margin: 0 0 10px 0;
  border: 2px solid #555;  
}

ul li a {
  background: #ccc;
}

はたして、どのような表示になるでしょうか。

(「RunPen」をクリックしていただくと表示結果を確認いただけます。)

DEMO

See the Pen
example li a | HTML CSS by ryoy (@intotheprogram)
on CodePen.

ご想像の通り、aタグのテキストの上のみがリンクのクリック範囲になっているかと思います。

これは、aタグはインライン要素ですので、初期設定では「display: inline」となっているために起こる現象となります。そのためaタグのクリック範囲を親要素のサイズに合わせるためには「display: block」のスタイルを設定してあげる必要があります。

（インライン要素の詳細につきましては、MDNにてすごく丁寧に解説されていますので、詳しくお知りになりたい方はこちらのページをご参照ください。）

aタグのクリック範囲を親要素のサイズに合わせる

では早速、aタグのクリック範囲を親要素のサイズに合わせるために、aタグのスタイルに「display: block」を設定してみます。

HTML

<ul>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">ipsum</a></li>
  <li><a href="#">dolor</a></li>
  <li><a href="#">sit</a></li>
  <li><a href="#">amet</a></li>
</ul>

CSS

ul li {
  width: 100%;
  margin: 0 0 10px 0;
  border: 2px solid #555;  
}

ul li a {
  /* 下記の1行を追加 */
  display: block;
  background: #ccc;
}

上記のように「display: block」をaタグに追加したら、実際に表示を確認してみましょう。

(「RunPen」をクリックしていただくと表示結果を確認いただけます。)

DEMO

See the Pen
example li a 2 | HTML CSS by ryoy (@intotheprogram)
on CodePen.

いかがでしょうか。

無事にaタグのクリック範囲をliタグのサイズに合わせることができたかと思います。

もし、「display: block」を設定したにも関わらず、aタグのクリック範囲が親要素のサイズに合わない場合は、aタグに「width」や「height」で縦横のサイズを設定してみたり、親要素のliタグに「padding」等が設定されていないか確認していただければと思います。親要素に「padding」が設定されている場合は、「padding」内しかクリック範囲のサイズが設定されないため、親要素の「padding」を外してaタグに設定し直すことで解消されるかと思います。

まとめ

最後に、aタグのクリック範囲を親要素のサイズに合わせる方法をまとめます。

• aタグに「display: block」を設定する

以上、aタグのクリック範囲を親要素のサイズに合わせる方法のご紹介でした！