CSS プロパティ overflow-y

CSS overflow-y プロパティ詳解：要素の垂直方向コンテンツオーバーフローを制御する

このページでは、CSSの `overflow-y` プロパティについて詳しく解説します。要素の垂直方向にコンテンツが溢れた場合の表示方法を制御する方法を学び、非表示、スクロールバーの表示、自動処理などを含め、その詳細を見ていきましょう。

overflow-y プロパティとは？

`overflow-y` プロパティは、要素の内容が垂直方向の境界線を越えた場合にどのように表示するかを定義します。これは、`overflow` プロパティの簡略形であり、垂直方向のオーバーフロー制御に特化しています。

overflow-y プロパティの値

`overflow-y` プロパティには、以下の値を設定できます。

値 説明
visible コンテンツはクリッピングされず、要素ボックスの外にはみ出す可能性があります。(デフォルト値)
hidden コンテンツはクリッピングされ、要素ボックスの外にはみ出した部分は見えなくなります。
scroll コンテンツはクリッピングされますが、ブラウザにはスクロールバーが表示され、残りのコンテンツを表示できます。
auto コンテンツがクリッピングされる場合、ブラウザにはスクロールバーが表示され、残りのコンテンツを表示できます。
inherit 親要素から overflow-y プロパティの値を継承します。

コード例

それぞれのプロパティ値の効果を示すために、固定された高さ幅のdiv要素を作成し、そこに溢れるほどのコンテンツを追加してみましょう。


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

.overflow-visible {
  overflow-y: visible;
}

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

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

.overflow-auto {
  overflow-y: auto;
}
</style>
</head>
<body>

<h2>overflow-y: visible</h2>
<div class="container overflow-visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
</div>

<h2>overflow-y: hidden</h2>
<div class="container overflow-hidden">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
</div>

<h2>overflow-y: scroll</h2>
<div class="container overflow-scroll">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
</div>

<h2>overflow-y: auto</h2>
<div class="container overflow-auto">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
</div>

</body>
</html>

overflow-y プロパティの適用シーン

以下は、`overflow-y` プロパティの一般的な適用シーンです。

  • 垂直スクロールバー付きコンテナの作成

    限られたスペースに大量のコンテンツを表示する必要がある場合は、`overflow-y: scroll` を使用して垂直スクロールバー付きのコンテナを作成できます。

  • オーバーフローコンテンツの非表示

    要素ボックスからはみ出したコンテンツを非表示にする必要がある場合は、`overflow-y: hidden` を使用できます。

  • 他のプロパティとの併用

    `overflow-y` プロパティは、`text-overflow` や `white-space` などの他の CSS プロパティと組み合わせて使用​​して、より細かいテキストオーバーフロー制御を実現できます。

コード例

overflow-y と他のプロパティ (例: text-overflow) を組み合わせて使用​​した効果を示します。


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
</head>
<body>

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
</div>

</body>
</html>

ブラウザの互換性

`overflow-y` プロパティは、すべての主要なブラウザでサポートされています。

まとめ

`overflow-y` プロパティは、要素の垂直方向のコンテンツオーバーフローの表示方法を制御するためのシンプルかつ強力な方法を提供します。さまざまなプロパティ値とその適用シーンを理解することで、開発者はよりユーザーフレンドリーで使いやすいWebページレイアウトを作成できます。

参考資料

よくある質問

  • Q: `overflow-y` と `overflow-x` の違いは何ですか？

    A: `overflow-y` は要素の垂直方向のオーバーフローを制御し、`overflow-x` は水平方向のオーバーフローを制御します。

  • Q: `overflow` プロパティの短縮形を使うことはできますか？

    A: はい、`overflow` プロパティに1つの値を設定すると、それは `overflow-x` と `overflow-y` の両方に適用されます。2つの値を設定する場合は、最初の値が `overflow-x` に、2番目の値が `overflow-y` に適用されます。

  • Q: `overflow-y: hidden` を設定しても、要素内のコンテンツがはみ出てしまう場合はどうすればよいですか？

    A: 要素に `position: relative` を設定し、はみ出したコンテンツに `position: absolute` を設定することで、はみ出したコンテンツを要素内に収めることができます。