・hover時にborderが出てくるようにcss指定したらhover要素全体がずれてしまう
・なぜborderを追加/太さ変更でずれてしまうの？
今回は、CSSでよく発生する「hover時のレイアウト崩れ」について解説します。その中でも、borderを追加したり太さを変更した際に要素全体がずれてしまう原因と解決方法を紹介します。
- hover時のborder設定でずれてしまう原因
- hoverしてもずれないような解決策
hover時に起こってしまう問題【border】
Webサイト制作では、要素にhoverした際にborderを追加したり、borderの太さを変更したりするケースがよくあります。
しかし、何も考えずにCSSを指定すると、以下のような状態になってしまいます。
こちらの動画は「border-box」をhoverした際にborderが5pxつくcssを指定しています。
要素全体が下にずれたように見え、見た目が不自然になってしまいます。
では、なぜこの現象が起こるのか見ていきましょう。
hoverで要素全体がずれてしまう原因
原因は非常にシンプルです。
「元の要素サイズにborder分の幅が追加されたため」です。
もともとの要素の外側に5px分のborderが追加されるため、要素全体のサイズが大きくなってしまいます。
デベロッパーツールで確認すると分かりやすいのですが、「border-box」の初期の大きさは縦：100px、横：300pxとなっています。
次に、hover時の要素サイズを確認してみましょう。
縦：310px、横：110pxになっているのが分かると思います。
原因が分かったところで、解決方法を見ていきます。
hover時にborder追加してもずれないようにする方法
解決方法は大きく分けて2つあります。用途によって向いている方法が異なるため、状況に応じて使い分けてください。
box-sizing:border-boxを指定する
1つ目は「box-sizing」の指定を変更する方法です。
cssの初期段階では要素にborderを追加した場合、前の章でも述べたように要素の外側にborder分の幅が追加されます。
そこで「box-sizing:border-box」を指定してあげることで、borderが要素のサイズ内に含まれるようになります。
要素全体のサイズを変えずにborderを追加できますが、要素の中身の範囲はborder分少なくなってしまいます。
内部サイズを変えたくない場合は、次に紹介する方法を試してみてください。
要素全体をborder分ずらす
2つ目はborder分増えてしまった要素全体を逆方向にずらして、結果的にずれをなくす方法です。
borderを追加する要素に加えるcssはこちらになります。
.border-box.border:hover {
border: 5px solid lightgreen;
position: relative;
top: -5px;
left: -5px;
}やっていることはシンプルでborderで大きくなって下に5px,右に5pxずれてしまった要素を
「top: -5px」「left: -5px」で逆方向に移動しています。
1つ目の方法と違う点は要素全体はborder分大きくなりますが、要素の内側の大きさは変わっていません。
制作にあたってどちらがいいかは変わってくると思うので使い分けが大事だと思います。
まとめ
以上、hover時にborderを追加/太さ変更によってずれる問題の解決方法の紹介でした。原因が分からないと結構解決までに時間がかかってしまうので是非理屈を理解して活用してみてください。
コメント