【フロントエンド初心者向け】なんでこんなところにリンク領域が?aタグの『見えないクリック領域』を暴け!

こんにちは、ユアサです。
今回は、誰でも一度は見落としてしまったことがあるかもしれないaタグの『見えないクリック領域』について、例と解決策を交えながら考えていきます。

何もないはずのところにクリック領域がある

テキストや画像、あるいはhtmlタグ内といった様々な要素にリンク先を指定できるaタグですが、コーディング後の動作チェック時に要素が何も表示されていない筈の箇所でなぜかカーソルがクリッカブル状態になったことがある(あるいは今なっている)方は少なくないのではと思います。そしてその見えないクリック領域をクリックしてみると、なぜか別の要素で指定していたリンク先にページ遷移する・・・一体どういうことなのでしょうか?

そもそもどのような現象のことを言っているのか分からない方もいるかと思うので、例を挙げてみます。

See the Pen aTag_linkSpace by felly (@felly00505) on CodePen.

上記のコードは、通常のaタグとulタグでリスト化されているliタグ内のaタグが用意されています。クラス名が「links」と付いているdivタグが二つありますが、特に何も指定していない縦並びの状態と、リンク群を横並びのデザインにするためにdisplay: flex;をかけた状態の二種類となっています。

aタグはインライン要素なのでaタグで囲っているテキストのみがクリック領域になるはずですが、横並びにしたクラス名「links」のdivタグ直下のaタグに注目すると、「直下のリンク」のテキスト下部にもクリック領域が広がってしまっているのが分かります。(今回は可視化するためにクリック領域をオレンジ色にしています)

これはdisplay: flex;をかけた際に起こる仕様で、display: flex;がかかっている要素内の子要素たちが、一番広い高さを持つ子要素に合わせて自動的に高さが調整されます。今回「直下のリンク」のクリック領域が望まない高さにまで広がってしまっていたのも、同階層に配置されている子要素であるulタグの高さに合わせて調整されてしまったという経緯があります。
ではこれはどのようにすれば解決できるのでしょうか?

孫要素にしてdisplay: flex;の影響を受けないようにする

See the Pen Untitled by felly (@felly00505) on CodePen.

上記コードを見ると分かりますが、-flexのクラス名が付与されているdivタグにalign-items: flex-start;が追加されています。クリック領域がオレンジ色で表示されていますが、今回は望んでいる通りテキスト部分にのみクリック領域が確保されています。『見えないクリック領域』の問題が解決されていますね!
align-itemsプロパティを使用すると、大きさを不揃いにしたまま左揃えや中央揃えができます。

おまけ:flex-direction: column;が付与されてdisplay: flex;の要素が縦並びになっている時

flex-direction: column;は、display: flex;で横並びになっている要素を縦並びにすることができるプロパティです。display: flex;がかかっていますが縦並びになっている場合はクリック領域はどうなるのでしょうか。

See the Pen Untitled by felly (@felly00505) on CodePen.

今度は横に伸びてしまっています。flex-direction: column;が付与されている場合、単純にdisplay: flex;がかかっている要素を縦並びにするものなので今度は横幅が調整されてしまうようになります。
並び順が違うだけで仕様は変わらないので、同じように-flexのクラス名が付与されているdivタグにalign-items: flex-start;を追加します。

See the Pen Untitled by felly (@felly00505) on CodePen.

まとめ

aタグで発生してしまう『見えないクリック領域』について、発生してしまう例とその解決法を紹介しました。背景色がないとどうにも見逃しやすいので、コーディング後の動作テストではaタグが配置されている周辺にも念の為カーソルをホバーして確認するようにしたいですね。
最後まで読んでいただきありがとうございました(^人^)