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

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ

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;">
LINEで送る
Pocket

関連記事

コメントを書き込む

コメントは承認後に公開されます。メールアドレスは公開されません。
*」は必須項目です。