aタグ（リンク）のクリックできる範囲をCSSで親要素まで広げる
- 公開日:
- メンテナンス日:
広告
広告
FAQ
- ナビゲーションの文字以外の場所をクリックしても反応しません。
- それはaタグがインライン要素のままで、コンテンツの幅しか持っていないからです。CSSで display: block を指定するか、Flexboxを使用して aタグ自体のサイズを広げる ことで解決します。
- カード全体をクリックできるようにしたい場合、どうすればいいですか？
- モダンな解決策として、aタグの疑似要素（
::after）に position: absolute をかけ、親要素いっぱいに広げる手法（Stretched Link）がおすすめです。HTML構造を汚さずに クリック範囲を最大化 できます。
- 画像の下に謎の数ピクセルの隙間ができてしまいます。
- 画像（imgタグ）がインライン要素であり、アルファベットの「ベースライン」を基準に配置されているためです。CSSで vertical-align: bottom を指定すれば 隙間をピタリと消す ことができます。
- Flexboxを使っても、aタグ内の文字が上下中央に配置されません。
- aタグ自身に
display: flexをかけ、 align-items: center を指定しているか確認してください。親のliタグではなく aタグ側にプロパティをセットする のが、当たり判定を広げつつ中央寄せにするコツです。
広告
