LINEで現役エンジニアに直接質問してみよう!登録無料

CSS overflowでhiddenやscrollで、はみ出た部分の整え方と効かない時の対処法

overflowは要素からはみ出た部分の取り扱いを設定します

はみ出た部分をどのように取り扱うかは3種類あります。

  1. はみ出た部分はそのまま表示する
  2. はみ出た部分は表示しない
  3. はみ出た部分はスクロールすれば見れるようにする

また、特定の方向のみ設定する方法も紹介します。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

overflowとは?

HTMLの要素がはみ出た時、そのはみ出た部分をどのように扱うのかを設定することが出来ます。

どのように取り扱うかは3種類です。

  1. はみ出た部分はそのまま表示する
  2. はみ出た部分は表示しない
  3. はみ出た部分はスクロールすれば見れるようにする

デフォルトは、「はみ出た部分はそのまま表示する」になっています。

はみ出た部分は表示しないように設定した場合、このようになります。

文字であろうが、要素であろうがはみ出たものはすべて表示しなくなります。

overflowの書き方・使い方

では、overflowの使い方を解説します。

overflowで設定出来る値は4つあります。

  1. visible(デフォルト) – はみ出た部分の処理はしません
  2. hidden – はみ出た部分は表示しません
  3. scroll – はみ出た部分はスクロールすれば見れるようにします
  4. auto – はみ出た部分の処理はブラウザに任せます
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。