見出し画像

ゼロから創るWEBサイト#010 謎の0.02px。指定した幅より小さく表示される現象が現る…

指定した幅より小さく表示される現象に気付きました。
本来なら今日ナビゲーションに動きを付けようと思ってたのに、先に進めずえらいこっちゃです。

この中途半端な数字が気持ち悪い

幅がどれもこれも0.02px小さくなるのです。謎です。
昨日はデベロッパーツール立ち上げながったから気付きませんでした。

outline設定してるけど、これは要素に影響しないはずだし、影響したとしても1pxで設定しているからサイズが違うし。

何もしないのに変わるはずはないだろうから、きっと要らぬ設定をしてしまったのだと思われます。

box-sizingの設定忘れてたので、とりあえず全体をbox-sizing:border-box;にしました。
これも関係ない模様・・・

ナビを25%に分割しているので%ではなく400pxと数値指定に変えてみる。
これも特に問題なし。

もしかして、HTMLに問題が?!

うん-ん。ちゃんとタグは対になっているし問題なさそうです。

念の為、他も同じように小さくなるのか検証してみると
下記の様に、600pxで問題ないようです。

ということは、ナビゲーションの所だけに問題があるようです。
いや違う。セクションも小さくなっていました。

うーん。
何が原因でしょう。
もう少し調べてみることにします。

この記事が気に入ったらサポートをしてみませんか?