スタイルシートを使ってブラウザの縦・横・両方のスクロールバーを消す(隠す)方法

widthで指定した横幅よりブラウザ表示範囲を狭くしたり文字が表示しきれない場合など、自動でブラウザに横のスクロールバーが出現するわけですが、これを表示させなくすることがCSSで簡単に出来ます。

縦・横・又は両方に表示させなくできますので、都合上どうしてもスクロールさせたくない場合などにお使い下さい。

スタイルシートのbodyに指定します（例は外部スタイルシートを使う場合の書き方です）。

横のスクロールバーを消す

body {overflow-x: hidden;}

縦のスクロールバーを消す

body {overflow-y: hidden;}

縦・横とも消す

body {overflow: hidden;}

外部CSSを使わずHTMLに書く場合は以下の通りです。

横のスクロールバーを消す

<body style="overflow-x: hidden;">

縦のスクロールバーを消す

<body style="overflow-y: hidden;">

縦・横とも消す

<body style="overflow: hidden;">