HTML+CSS

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

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

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

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

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 ME
akane
フリーランスWebデザイナー・ブロガー・ママ。兵庫県在住。 ライフスタイル・シンプルでゆるい暮らしを目指し中。