【CSS3】画面横幅を100%にしたいときに有効な手段

html5でフロントを作っていて、画面横幅にスクロールバーが出て気持ち悪かったので、対処した方法を自分用にメモ

現象

• 手がけている画面の端にマージンが表示されているが、画面幅を収めたい
• 横スクロールバーが表示されている

対策

• ルート要素にCSS要素 overflow-x: hiddenを追加する

対処コード

front.html

html {
    overflow-x: hidden;
}

結果

画面幅を100%にすることができ、余計なスクロールバーが出なくなった。

備考

上記のリファレンスに

hidden
この値は、コンテンツが切り抜かれ、スクロールなしのユーザーインターフェースが切り抜く要素の外側でコンテンツを閲覧するために提供されるべきであることを指示する。

なので、今回の件ではルート要素に指定してあげることで、要素の外側を切り取って表示してくれるという解釈。