【HTML+CSS】横スクロールバーを消したい!


 この記事のタイトルとURLをコピーする

横スクロールバーが邪魔で消したい!

横スクロールバーがいらない所で出てきたりしますよね。
(特にスマホ)

横にはみ出した時の為にあえて横スクロールバーを出しておく人もいるのですが、操作上不便なので消す方法です。

overflow-xをhiddenにする

CSSは簡単。

[css] .body{
overflow-x: hidden;
}
[/css]

overflow-xは、横にオーバーしたものをどうするかの指示をします。
(overflow-yは縦にオーバーしたものをどうするか指示します。)

スポンサーリンク

overflow: scroll; /*スクロールバーを出す*/

overflow: hidden; /*隠す(スクロールバーを非表示)*/

overflow: auto; /*自動(スクロールバーが表示される)*/

設定したのにまだ横スクロールバーが出る?!

設定もちゃんとしてるのにまだ横スクロールバーが出る場合は、
html要素に記述してみましょう。

[css] .html{
overflow-x: hidden;
}
[/css]

\この記事をシェア/

ABOUTこの記事をかいた人

フリーランスクリエイター。 愛媛出身→岡山→大阪→横浜→兵庫(現在) 主にWebデザインやWeb担当業務、作品販売、プロジェクトの裏方などの仕事をしています。 情報集めや新しいものが大好き! 「楽しく生きる」をモットーに、便利ツール紹介やコラムなどを書いています。