CSS で float したパーツのリンクが小さい事象を解決する方法

CSS で div タグ内に記載した内容やリストタグの内容を横並びにするために float を利用することがあるが、float を指定したパーツを a タグによるリンクを行ってもマウスが反応する範囲が小さい場合の原因と解決方法について紹介する。

CSS で float したパーツのリンクが小さい事象を解決する方法




1.CSS の float とは


CSS には float の記述により HTML に記載したパーツを横並びにする機能がある。
HTML に記載したタグは基本的に縦方向に並ぶが、float により横に並ぶため div タグをブロックに見立てている場合や、リストタグの内容に対して用いられることが多い。



2.float でリンクが小さくなる原因


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

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 したパーツ内の a タグの領域が小さくなっている原因は float で浮かせたもののマウスが反応するエリアも浮いていないため高さがズレて画像全体がマウスの反応領域として認識されなくなっているためである。



3.float してもリンクを正常化する方法


float 内の a タグの領域を正常化するためには、float 内の a タグにも位置指定と高さを指定することで解決する。

.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;     → ここを追加
}


関連記事