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

2012年2月15日

2026年2月19日

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;">

コメント (1)

赤工作久良 2013年2月14日

インラインフレームの左側のスクロールバーが邪魔だと思っていました。
消し方が分かって大変嬉しいです。
ありがとうございました。