CSSリファレンス
実践向けCSSリファレンス

縦方向のはみ出し処理を設定する

CSS - overflow-y

概要

CSSプロパティ「overflow-y」は、overflow プロパティと同様、ボックス領域からテキストなどがはみ出した場合に、その部分をどう制御するかを指定することができます。ただし、overflow プロパティと違うところはこちらは垂直(y軸)方向の制御になります。

<div class="hidden">コンテンツの高さが80pxを超えた場合縦スクロールバーが表示されます。コンテンツの高さが80pxを超えた場合縦スクロールバーが表示されます。</div>
<style>
div {
  width: 200px;
  height: 80px;
  background-color: #def;
  margin-bottom: 10px;
}
.hidden {
 overflow-y: scroll;
}
</style>

取りうる値

説明
visible初期値
hidden領域からはみ出た部分は非表示になる
scroll領域からはみ出る部分があるときはスクロールバーが表示される
auto閲覧する環境に依存

使用例

基本的な各値の例です。ボックスには 200px × 50px の「領域」が指定されています。このボックスからはみ出た部分がどのような振る舞いをするか確認してみてください。

<div class="auto">幅と高さを指定したボックス領域からテキストがはみだした場合、閲覧するブラウザに依存する振る舞いをします</div>
<div class="hidden">幅と高さを指定したボックス領域からはみだしたテキストは表示されません</div>
<div class="scroll">幅と高さを指定したボックス領域からテキストがはみだすとスクロールバーが表示されます</div>
<div class="visible">幅と高さを指定したボックス領域からテキストがはみだしても、そのまま表示されます</div>
<style>
div {
  width: 200px;
  height: 50px;
  background-color: #def;
  margin-bottom: 10px;
}
.auto {
 overflow-y: auto;    
}
.hidden {
 overflow-y: hidden;    
}
.scroll {
 overflow-y: scroll;    
}
.visible {
 overflow-y: visible;    
}
</style>

仕様書

関連CSSプロパティ

閉じる