【HTML】aタグで作ったリンクのクリック範囲を親要素のサイズに広げる方法【CSS】

HTML&CSS

この記事では、「aタグで作ったリンクのクリック範囲を、親要素と同じサイズに広げたい」とお困りの方に、解決方法を紹介しています。

スポンサーリンク

デフォルトではどのように表示されるか?

例えばliタグとaタグを使ってリンクのリストを作った場合、標準だと次のようになります。

See the Pen aタグの範囲が親要素全体に広がっていない by aiiro (@aiiro29) on CodePen.

背景色が緑になっている部分がリンクの範囲です。

このままだとリンクのクリック範囲がバラバラのため、操作性がよくありません。

リンクのクリック範囲を統一するために、親要素であるliタグと同じサイズまでクリック範囲には、どうすればよいでしょうか?

解決方法

解決方法は、CSSでaタグに“display: block”を設定することです。そうすることで、親要素と同じ範囲までaタグを広げることができます。

aタグは元々「インライン要素」として定義されています。

そのため、aタグで囲んだ部分しかリンクの範囲にはなりません。ですが、”display: block”を指定することで、ブロックボックスとして描画するよう、ブラウザに指示できます。

インライン要素
インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものです。

See the Pen aタグの範囲を親要素全体に広げる by aiiro (@aiiro29) on CodePen.

先ほどとは違い、背景色がliタグと同じ範囲まで広がるようになりました。

まとめ

liタグとaタグを使ってナビゲーションメニューを作るとき等、リンクの範囲を親要素と同じにしたいケースは、たびたび発生します。

そんなときに、今回紹介した方法が役立てば幸いです。