この記事では、「aタグで作ったリンクのクリック範囲を、親要素と同じサイズに広げる方法」を紹介します。
デフォルトではどのように表示されるか？
たとえば、liタグとaタグを使ってリンクのリストを作った場合、標準だと次のようになります。
See the Pen aタグの範囲が親要素全体に広がっていない by aiiro (@aiiro29) on CodePen.
背景色が緑になっている部分がリンクの範囲です。
このままだとリンクのクリック範囲がバラバラのため、操作性がよくありません。
リンクのクリック範囲を統一するために、親要素であるliタグと同じサイズまでクリック範囲には、どうすればよいでしょうか？
解決方法
解決方法は、CSSでaタグに“display: block”を設定することです。そうすることで、親要素と同じ範囲までaタグを広げることができます。
aタグは元々「インライン要素」として定義されています。
そのため、aタグで囲んだ部分しかリンクの範囲にはなりません。ですが、”display: block”を指定することで、ブロックボックスとして描画するよう、ブラウザに指示できます。
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements#Elements
developer.mozilla.org
See the Pen aタグの範囲を親要素全体に広げる by aiiro (@aiiro29) on CodePen.
先ほどとは違い、背景色がliタグと同じ範囲まで広がるようになりました。
おわり
以上が、liタグとaタグを使ってナビゲーションメニューを作るとき等、リンクの範囲を親要素と同じにする方法です。
