「#朝までマークアップ 2（CSS編）」登壇レポート｜vw/vhを活用したレイアウト設計

こんにちは、FLATエンジニアの浅井です。
この度、2025年1月31日に開催された「#朝までマークアップ 2（CSS編）」に登壇しました。

🧑‍💻イベント公式ページ
https://cssnite.doorkeeper.jp/events/179874

登壇について

私が担当したセッションは【D2-10】「現場で役立つ失敗しないレイアウト作り！vw/vhの実践テクニック」です。

このセッションでは、CSSレイアウトでよく使われるvw（ビューポートの幅）やvh（ビューポートの高さ）の便利さと、その落とし穴について解説しました。Windows環境で100vwを指定すると横スクロールバーが発生してしまう問題や、スマホのアドレスバーによるvhのズレについては、多くのエンジニアが一度は悩んだことがあるのではないでしょうか。

今回の登壇内容を決めた背景には、私自身が日頃から「どんな環境でも表示崩れが起きにくいWebサイト制作」を心がけていることがあります。Webサイトはユーザーのデバイスや環境によって表示が大きく変わるため、どの環境でも快適に閲覧・操作できるよう設計することが重要です。FLATでも、この考え方を大切にし、レスポンシブデザインやアクセシビリティを考慮したコーディングを徹底しています。

セッション内容

セッションでは、vw/vhによるレイアウト崩れの解決策として、以下の方法を紹介しました。

• 100vwを使わないレイアウト設計
  そもそも100vwを使わず、適切な親要素を設定することで横スクロールバーの発生を防ぐ
• CSS変数とJSを活用した柔軟な対応
  clientWidth や clientHeight を使用し、スクロールバーを考慮した正確な値をCSS変数として設定する
• コンテナクエリの活用
  cqw（Container Query Width）などの新しい単位を使い、親コンテナに基づいた適切なレイアウト調整する
• 新しいvh単位（lvh, svh, dvh）の活用
  それぞれの単位の挙動を知り、スマホのアドレスバーによるvhのズレを防いで適切な高さを確保する

Webサイト制作の現場では、どんなにシンプルなレイアウトでも環境依存の問題が発生することがあります。FLATでは、こうした問題を未然に防ぐための設計を重視し、柔軟かつ再利用可能なコーディングを心がけています。

登壇を終えて

私は今回が初めての登壇でしたが、緊張しながらも楽しく発表することができました。オフラインイベントと違い、視聴者の反応はリアルタイムでは見えませんが、YouTube配信のコメントやSNSで温かいメッセージをいただき、最終的にはとても充実した時間となりました！

また、すでに知っていると思っていた領域でも、改めて調べ直すことで新たな発見がありました。日々の業務で使っている技術でも、深掘りすることでより正確な理解が得られることを実感しました。このイベントを通じて、少しでも多くの開発者の方々に「崩れにくいレイアウト作り」のヒントを提供できていたら嬉しいです🎉