【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がオススメ！同僚に差をつけよう！

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選