100vwで横スクロールバーが出ちゃうの、センスないと思う —コンテナクエリで解決しよう！
ウェブデザインにおいて、横いっぱいに表示するレイアウトはよく行われますが、100vw（ビューポート幅）を使う際に、予期せぬ横スクロールバーが現れることがあります。この問題はデザインの見た目だけでなく、ユーザーエクスペリエンスにも影響を与え、好ましくありません。今回は、100vwによって発生する横スクロールバーの原因と、その解決法として「コンテナクエリ」を使う方法をご紹介します。
横スクロールバーの原因
まず、なぜ100vwで横スクロールバーが表示されるのか、その原因を解説します。vwはビューポートの幅を基準にした単位で、例えば以下のように使われます。
.full-width {
width: 100vw;
}
これは、要素の幅がビューポート（ウェブページを表示するための領域）の幅と同じになるように指示しています。しかし、ブラウザのスクロールバーの幅も100vwに含まれてしまうため、縦スクロールバーが表示されると、コンテンツが横に広がり、結果として横スクロールバーが表示されることがあります。
コンテナクエリでの解決方法
この問題を解決する方法は沢山ありますが、position:fixedを使用しない場合、コンテナクエリを使う方法が非常に簡単です。コンテナクエリは、要素の親コンテナのサイズに基づいてスタイリングを変更する機能で、これによりコンテナのサイズに合わせたレイアウト調整が可能になります。
body要素をインライン・サイズのコンテナ・タイプにすることで、100vwの代わりに100cqwという長さ（この場合はbodyの幅）を使うことができます。
※bodyにcontainer-typeを指定すると、body内部の要素でのposition:fixedが無効化されてしまいます😥position:fixedを使う場合はJavaScriptを使うなど他の手段を選ぶ必要があります。
body {
margin: 0;
container-type: inline-size;
}
.full-width {
width: 100vw; /* 古いブラウザのためのフォールバック */
width: 100cqw;
}
実際の例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>コンテナクエリの例</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
container-type: inline-size;
}
.content {
height: 150svh;
width: 100cqw;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="content">
<p>テスト</p>
</div>
</body>
</html>
まとめ
100vwを使用した際に横スクロールバーが表示される問題は、コンテナクエリを利用することで簡単に解決できます。是非活用してみてください！