CSS で float したリンクが小さくなる場合の解決方法

[最新更新] 2022年06月09日
[初回公開] 2021年09月17日

CSS の float を利用すると div タグなど特定の領域やリストタグ（li タグ）を縦並びから横並びにすることができるが、float で指定した a タグのリンクが範囲が小さくなりマウスやタップが反応しない場合の原因と解決方法について紹介する。

１．CSS の float とは

CSS には HTML タグで記載した div タグや li タグなどパーツを横並びにする機能として float が用意されている。
HTML に記載したタグは基本的に画面の上から下への縦方向に並ぶが、float により横に並ぶため div タグをブロックに見立てている場合や、リストタグの内容を横並びにしてメニューとして用いられることが多い。

float を利用する場合は左寄せか右寄せかの値を指定することで、横並びになる順番を変えることができる。
見た目は横並びになるが、ブラウザの挙動してはベースとなる地点から浮かせて疑似的に位置を変えているものである。

２．float でリンクが小さくなる原因

float でリンクが小さくなる原因としては、float で浮かせたもののマウスが反応するエリアも浮いていないため高さがズレて、マウスが反応する領域が認識されなくなっているためである。

例えば、下図のように個々の画像を div タグで囲み、float で横並びになるように行ったとする。

float の指定をしているのは class=”card” で、その中にある画像を a タグで囲っているので本来であれば画像の大きさだけマウスが反応する領域としたいが、float により上図の赤枠のみがリンクとして反応する領域になっている。

上図の HTML と CSS は次の通りである。

<div class=”cardData”>
<div class=”card”><a href=”#”><img src=”./01.png”></a></div>
<div class=”card”><a href=”#”><img src=”./02.png”></a></div>
<div class=”card”><a href=”#”><img src=”./03.png”></a></div>
<div class=”card”><a href=”#”><img src=”./04.png”></a></div>
</div>

.cardData {
float: left;
}
.cardData .card {
float: left;
margin: 3px 3px 3px 3px;
padding: 6px 6px 6px 6px;
border: 2px solid #C4E3EE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.cardData .card a {
}

３．float してもリンクを正常化する方法

float 内のリンク（a タグ）の領域を正常な大きさにするためには、float 内の a タグにも位置指定と高さを指定することで解決する。
前述の CSS に修正を加えたものが下記である。

.cardData {
float: left;
}
.cardData .card {
float: left;
margin: 3px 3px 3px 3px;
padding: 6px 6px 6px 6px;
border: 2px solid #C4E3EE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.cardData .card a {
position: relative;　→　ここを追加
z-index: 2;　　　　　→　ここを追加
}

「position: relative」で直前にある要素の位置を基準に、相対的な位置で配置することを示す。
次いで「z-index: 2」でリンク（a タグ）の領域を全面にすることで、画像がある要素より前になり、それに伴いリンクの大きさも要素と同じになる。

関連記事