MENU
  1. ホーム
  2. CSS
  3. overflow

overflow

CSS
2023.12.30

overflowプロパティは、要素のコンテンツがそのボックスに収まりきらない場合に、どのように処理するかを指定します。

overflowの説明図
overflowプロパティ
記法

.クラス名　{
　overflow : 表示方法;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>overflowプロパティ</title>
  </head>

  <body>
    <p>overflow：auto</p>
    <p>ブラウザーに依存する(通常はスクロールバーが表示される)</p>
    <p class="box overflow-auto">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae
      blanditiis, eaque officiis dolorem.
    </p>
    <hr />
    <p>overflow：hidden</p>
    <p>ボックスに収まらなかった部分は非表示</p>
    <p class="box overflow-hidden">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae
      blanditiis, eaque officiis dolorem.
    </p>
    <hr />
    <p>overflow：scroll</p>
    <p>ボックスに収まらなかった部分はスクロールバーが表示</p>
    <p class="box overflow-scroll">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae
      blanditiis, eaque officiis dolorem.
    </p>
    <hr />
    <p>overflow：clip</p>
    <p>プログラム的なスクロールを含め、全てのスクロールバーを禁止する</p>
    <p class="box overflow-clip">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae
      blanditiis, eaque officiis dolorem.
    </p>
    <hr />
    <p>overflow：visible</p>
    <p>ボックスからはみ出して表示される</p>
    <p class="box overflow-visible">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae
      blanditiis, eaque officiis dolorem.
    </p>
  </body>
</html>
.box {
  width: 300px;
  height: 50px;
  border: solid 1px black;
}
.overflow-auto {
  overflow: auto;
}
.overflow-visible {
  overflow: visible;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-clip {
  overflow: clip;
}
出力結果

overflow：auto

ブラウザーに依存する(通常はスクロールバーが表示される)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae blanditiis, eaque officiis dolorem.

overflow：hidden

ボックスに収まらなかった部分は非表示

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae blanditiis, eaque officiis dolorem.

overflow：scroll

ボックスに収まらなかった部分はスクロールバーが表示

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae blanditiis, eaque officiis dolorem.

overflow：clip

プログラム的なスクロールを含め、全てのスクロールバーを禁止する

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae blanditiis, eaque officiis dolorem.

overflow：visible

ボックスからはみ出して表示される

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quasi quae blanditiis, eaque officiis dolorem.

CSS