CSSのoverflowで内容がはみ出した際の表示方法を制御する方法をわかりやすく解説

2024.09.14
スポンサーリンク

overflowプロパティは、要素のコンテンツがボックスのサイズを超えた場合の表示方法を制御します。スクロールバーの表示や、要素の切り捨てなどを設定することができます。

スポンサーリンク

overflowプロパティの値とその効果の一覧

  • visible – コンテンツが溢れた場合でも、隠さずそのまま表示します。
  • hidden – 溢れたコンテンツを隠しますが、スクロールバーは表示されません。
  • scroll – 常にスクロールバーを表示し、溢れたコンテンツをスクロールで表示します。
  • auto – 必要に応じてスクロールバーを表示します。

注意点や関連情報

overflowプロパティはブロック要素に対して適用され、子要素が親要素を超えて描画される際にどのように処理するかを決定します。overflowをhiddenに設定することで、スクロールバーを非表示にしつつ、溢れたコンテンツを切り捨てることができます。なお、overflow-xやoverflow-yを用いて、横方向や縦方向のみを制御することも可能です。

overflowが効かない時の原因と対策

要素に明示的な高さや幅が設定されていない

overflowは、要素の内容が指定された高さや幅を超えた場合に効果を発揮しますが、要素に明示的なheightやwidthが設定されていないと、overflowが期待通りに機能しません。

対策: 要素に明示的なheightやwidthを設定し、overflowの効果が発揮されるようにします。例えば、height: 200px;のように要素のサイズを指定します。

インライン要素に適用されている

overflowはブロックレベルの要素に対して有効ですが、インライン要素（<span>や<a>など）には効果がありません。

対策: overflowを適用する要素をブロックレベルの要素（<div>や<section>など）にするか、インライン要素に対してdisplay: inline-blockやdisplay: blockを指定します。

子要素がposition: absoluteやfloatで配置されている

overflowは、通常のフローの中で要素が親要素の領域を超えたときに機能しますが、子要素がposition: absoluteやfloatで配置されている場合、overflowが適切に機能しないことがあります。

対策: position: absoluteやfloatを使用している要素の配置を見直すか、親要素にposition: relativeを指定して、子要素とのレイアウトの関係を調整します。

共通するCSSコード

.css-sample-container {
      width: 300px;
      margin: 20px 0;
      padding: 10px;
      border: 2px solid #000;
      background-color: #f0f0f0;
    }

    .css-sample-box {
      width: 200%;
      height: 150px;
      background-color: #d3e0ea;
      text-align: center;
      line-height: 150px;
      font-size: 16px;
      color: #333;
    }

    /* overflow: visible 用のスタイル */
    .css-sample-overflow-visible {
      overflow: visible;
    }

    /* overflow: hidden 用のスタイル */
    .css-sample-overflow-hidden {
      overflow: hidden;
    }

    /* overflow: scroll 用のスタイル */
    .css-sample-overflow-scroll {
      overflow: scroll;
    }

    /* overflow: auto 用のスタイル */
    .css-sample-overflow-auto {
      overflow: auto;
    }

overflow: visible;

コンテンツが要素を超えてもそのまま表示されます。

HTMLコード

<div class="css-sample-container css-sample-overflow-visible">
      <div class="css-sample-box">
        overflow: visible
      </div>
    </div>

CSSコード

.css-sample-overflow-visible {
overflow: visible;
}

表示結果

overflow: visible

overflow: hidden;

コンテンツが要素を超えた場合、超えた部分が隠れます。

HTMLコード

<div class="css-sample-container css-sample-overflow-hidden">
      <div class="css-sample-box">
        overflow: hidden
      </div>
    </div>

CSSコード

.css-sample-pointer-events-none {
      pointer-events: none;
    }

CSSコード

.css-sample-overflow-hidden {
overflow: hidden;
}

表示結果

overflow: hidden

overflow: scroll;

常にスクロールバーが表示され、コンテンツをスクロールできます。

HTMLコード

<div class="css-sample-container css-sample-overflow-scroll">
      <div class="css-sample-box">
        overflow: scroll
      </div>
    </div>

CSSコード

.css-sample-overflow-scroll {
overflow: scroll;
}

表示結果

overflow: scroll

overflow: auto;

コンテンツが要素を超えた場合にのみ、スクロールバーが表示されます。

HTMLコード

<div class="css-sample-container css-sample-overflow-auto">
      <div class="css-sample-box">
        overflow: auto
      </div>
    </div>

CSSコード

.css-sample-overflow-auto {
overflow: auto;
}
★★★

表示結果

overflow: auto

まとめ

  • overflow: visibleはコンテンツがボックスを超えても隠されずに表示されます。
  • overflow: hiddenはコンテンツがボックスを超えた部分を隠します。
  • overflow: scrollは常にスクロールバーを表示し、コンテンツをスクロールで閲覧可能にします。
  • overflow: autoはコンテンツがボックスを超えた場合にのみスクロールバーを表示します。
スポンサーリンク