⏳

overflowに関してまとめてみた。

2023/11/02に公開

CSS

HTML

tech

overflowとは

CSSプロパティの一種です。コンテナ内の内容が多すぎてはいりきらないときに、どのように処理するかを決めます。overflow-x、overflow-yと指定することで、x軸方向・y軸方向に指定することもできます。使用可能な値としては以下のようなものがあります。

visible：初期値。コンテナからはみ出た内容も表示します。
hidden：コンテナからはみ出た内容を非表示にします。
scroll：コンテナからはみ出た内容をスクロールバーでスクロールして表示できるようにします。
auto：内容がコンテナからはみ出た時にだけスクロールバーでスクロールして表示できるようにします。

使用例

実際にコードで書いてみてどのように違うのか見てみたいと思います。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="flex-container">
    <div class="container visible">
        <div class="content">
          Overflow: Visible
          <p>この設定では、内容がコンテナを超えても、その超えた部分が表示されます。通常の動作として、何も制限されずにコンテンツが表示されます。</p>
        </div>
    </div>
    <div class="container hidden">
        <div class="content">
          Overflow: Hidden
          <p>この設定では、コンテナのサイズを超える内容は非表示になります。これにより、コンテナを超える部分のコンテンツが切り取られることになります。</p>
        </div>
    </div>
    <div class="container scroll">
      <div class="content">
        Overflow: scroll
        <p>この設定を使うと、コンテナにスクロールバーが常に表示されます。もし内容がコンテナを超えていない場合でも、スクロールバーは表示されますが動作しません。</p>
      </div>
  </div>
  <div class="container auto">
    <div class="content">
      Overflow: auto
      <p>この設定は、コンテンツがコンテナを超える場合のみスクロールバーが表示されます。内容がコンテナ内に収まっている場合は、スクロールバーは表示されません。</p>
    </div>
  </div>
</div>
    <script src="script.js"></script>
</body>
</html>

styles.css

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.container {
  width: 150px;
  height: 150px;
  border: 2px solid black;
  margin: 60px 20px;
  position: relative;
  font-size: 15px;
}

.content {
  width: 150px;
  height: 150px;
}

.visible {
  overflow: visible;
}

.hidden {
  overflow: hidden;
}

.scroll {
  overflow-y: scroll;
  overflow-x: hidden;
}

.auto {
  overflow-y: auto;
  overflow-x: hidden;
}

コードの説明

visible

<div class="container visible">
        <div class="content">
          Overflow: Visible
          <p>この設定では、内容がコンテナを超えても、その超えた部分が表示されます。通常の動作として、何も制限されずにコンテンツが表示されます。</p>
        </div>
    </div>

.visible {
  overflow: visible;
}

overflowプロパティのvisible値を使用しているものです。コンテナからのはみ出し部分も表示されます。

hidden

<div class="container hidden">
        <div class="content">
          Overflow: Hidden
          <p>この設定では、コンテナのサイズを超える内容は非表示になります。これにより、コンテナを超える部分のコンテンツが切り取られることになります。</p>
        </div>
    </div>

.hidden {
  overflow: hidden;
}

overflowプロパティのhidden値を使用しているものです。コンテナからのはみ出し部分は表示されません。

scroll

<div class="container scroll">
      <div class="content">
        Overflow: scroll
        <p>この設定を使うと、コンテナにスクロールバーが常に表示されます。もし内容がコンテナを超えていない場合でも、スクロールバーは表示されますが動作しません。</p>
      </div>
  </div>

.scroll {
  overflow: scroll;
}

overflowプロパティのscroll値を使用しているものです。スクロールバーを使ってはみ出し部分をスクロールすることができます。はみ出し部分がない時にはスクロールは無効化されます。

auto

<div class="container auto">
    <div class="content">
      Overflow: auto
      <p>この設定は、コンテンツがコンテナを超える場合のみスクロールバーが表示されます。内容がコンテナ内に収まっている場合は、スクロールバーは表示されません。</p>
    </div>
  </div>

.auto {
  overflow: auto;
}

overflowプロパティのauto値を使用しているものです。スクロールバーを使ってはみ出し部分をスクロールすることができます。はみ出し部分がない時にはスクロールバーは表示されません。

すると下記の画像のようになります。

autoとscrollの違い

最後にはみ出し部分がない時のscrollとautoの違いについて見てみましょう。index.htmlのscrollとautoの部分を以下のように編集します。

index.html

 <div class="container scroll">
      <div class="content">
        Overflow: scroll
      </div>
  </div>
  <div class="container auto">
    <div class="content">
      Overflow: auto
    </div>
  </div>

すると下記の画像のようになります。

少し見えにくいかもしれませんが、scrollの方ではスクロールバーの部分が表示されて、autoの方ではスクロールバーが非表示になっていますね。

おわりに

今回はCSSプロパティのoverflowに関してまとめました。実際に試してみると理解が深まるのでいいですね。他にも疑問に思って調べたことを記事にしていこうと思います。最後まで読んでいただきありがとうございました。

overflowに関してまとめてみた。

overflowとは

使用例

コードの説明

autoとscrollの違い

おわりに

参考文献

Discussion