Categories: HTML&CSS

【CSS3】overflowの使い方

以下のじゅげむの文章を使ってoverflowの使い方を解説します。

例題

じゅげむ じゅげむ ごこうのすりきれ
かいじゃりすいぎょの すいぎょうまつ
うんらいまつ ふうらいまつ
くうねるところに すむところ
やぶらこうじの ぶらこうじ
パイポパイポ
パイポのシューリンガン
シューリンガンのグーリンダイ
グーリンダイのポンポコピーのポンポコナーの
ちょうきゅうめいのちょうすけ

初期値(ハミ出た部分はそのまま表示):visible

overflowの初期値はvisibleです。ハミ出た部分は、そのままハミ出た状態で表示されます。

See the Pen
overflow-visible
by shiakisudev (@shiakisu)
on CodePen.

CSS

.sample {
  width: 100px;
  height: 100px;
  overflow: visible;
  background: green;
}

ハミ出た部分を非表示にする:hidden

hiddenを指定すると、ハミ出た部分を非表示にします。

See the Pen
overflow-hidden
by shiakisudev (@shiakisu)
on CodePen.

CSS

.sample {
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: green;
}

ハミ出た部分を縦スクロールで表示させる:scroll

scrollを指定すると、ハミ出た部分を縦スクロールして表示できるようにします。

解説

縦スクロールバーと横スクロールバーは強制的に表示されます。

See the Pen
zYqoege
by shiakisudev (@shiakisu)
on CodePen.

CSS

.sample {
  width: 200px;
  height: 200px;
  overflow: scroll;
  background: green;
}

不要なスクロールバーを消したい場合

横スクロールバーを消したいときはどうしたら良い?

overflow-y:scrollで縦スクロールバーを表示し、overflow-x:hiddenで横スクロールバーを非表示にします。

See the Pen
overflow-scroll-y
by shiakisudev (@shiakisu)
on CodePen.

CSS

.sample {
  width: 200px;
  height: 200px;
  overflow-y: scroll;/* 縦スクロールバーを表示*/
  overflow-x: hidden;/* 横スクロールバーは非表示に*/
  background: green;
}

ハミ出た部分を横スクロールで表示させる:scroll+nowrap

横スクロールさせたい場合はscroll指定にプラスしてwhite-space:nowrap;を追加します。これを追加することにより、改行せずに1行で表示するようになるため、結果として横スクロールすることになります。

See the Pen
overflow-scroll2
by shiakisudev (@shiakisu)
on CodePen.

CSS

.sample {
  width: 200px;
  height: 200px;
  overflow: scroll;
  white-space:nowrap;
  background: green;
}

不要なスクロールバーを消したい場合

縦スクロールバーを消したいときはどうしたら良い?

overflow-x:scrollで横スクロールバーを表示し、overflow-y:hiddenで縦スクロールバーを非表示にします。

See the Pen
overflow-scroll-x
by shiakisudev (@shiakisu)
on CodePen.

CSS

.sample {
  width: 200px;
  height: 200px;
  overflow-x: scroll;/* 横スクロールバーを表示*/
  overflow-y: hidden;/* 縦スクロールバーは非表示に*/
  white-space:nowrap;
  background: green;
}

ハミ出た部分を天に任せる:auto

解説

スクロール方向に必要なスクロールバーのみ表示されます。

縦スクロールの場合

横スクロールバーは非表示になります。

See the Pen
overflow-auto
by shiakisudev (@shiakisu)
on CodePen.

CSS

.sample {
  width: 200px;
  height: 200px;
  overflow: auto;
  background: green;
}

横スクロールの場合

white-space:nowrap;も一緒に指定することにより横スクロールになります。
この場合、縦スクロールバーは非表示になります。

See the Pen
overflow-auto2
by shiakisudev (@shiakisu)
on CodePen.

CSS

.sample {
  width: 200px;
  height: 200px;
  overflow: auto;
  white-space:nowrap;
  background: green;
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp