こんにちは。いっとくです！
エンジニアですがCSSがあまり好きではありません。
なぜならエラーが出ないから！
つい先日、webサイトに新しいページを追加していた時のこと。
横幅はデバイスの横幅マックスにしたかったのでwidthを100vwで指定しました。
フォルクスワーゲンの方ではなく、ビューポートの幅の方のvwです。
％と違って親要素ではなく、画面幅でサイズを決めてくれるので、レスポンシブで作る際は使い勝手がいいなぁと感じていたので割と好んで使っていました。
しかし後に気づくのですが、このビューポートという言葉には盛大なトラップが仕掛けられていたのです…
ビューポートはスクロールバーの幅を含む！
僕は普段の開発ではMacを使っています。
この日もいつものように、新しいページの実装を終えて、テストをしてもらっていた時のことでした。
「あれ、これなんで横のスクロールバーになってるんですか？」
横幅もそこまでなかったし、そもそもそんなものはつけた覚えはないけど、、、と思いながら指摘されたページを見てみると、横のスクロールバーは表示されていない。
しかし、テストをしていた人の画面にはしっかり出ている。
ちなみにその人のPCはWindowsでした
しばらく悩んだのちにようやく気づいたのですが、このvwという単位ではスクロールバーの幅も入ってくるのです。
すると画面が縦長になってたてのスクロールバーが表示されると、100vhの長さが画面の横幅+スクロールバーの横幅になってしまい、横のスクロールバーが現れてしまうと言う仕組みです。
Macの場合はスクロールバーが表示されないので、気づかないのですが、Windowsではゴツめのスクロールバーが右側で全裸待機してますので、その幅の分だけ横にはみ出てしまいます。
ということで、横幅を画面いっぱいに使うレイアウトを実装したいという時は100vwではなく100%で指定しましょう！
以上、いっとくでした！
コメント