目次 | overflowとは |
はみ出して表示(visible) / 超える分は表示しない(hidden) | |
スクロールで表示(scroll) / ブラウザによる(auto) | |
overflow-xとoverflow-yとは |
overflowとは
1.overflowは、表示領域を超えた部分の表示を操作します。
2.floatした子要素に対して親要素にoverflow:hiddenを使用すると親要素から子要素の高さを認識できるようになります。
floatを解除: https://itsakura.com/css-float-clear#s3
書き方 | overflow : 値 |
値 | visible・・・表示領域を超えた分は、はみ出して表示します。 日本語は改行されます。 |
hidden・・・表示領域を超えた分は、表示しません。 日本語は改行されます。 |
|
scroll・・・表示領域を超えた分は、スクロールで表示します。 日本語は改行されます。 |
|
auto・・・ブラウザによって変わります。スクロールが一般的です。 | |
初期値 | visible |
継承 | なし |
参考(MDN) | https://developer.mozilla.org/ja/docs/Web/CSS/overflow |
はみ出して表示 (visible)
<style>
.p1,.p2 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
overflow: visible;
}
</style>
<p class="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p class="p2">表示領域を超える場合の表示方法</p>
visibleは、表示領域を超えた分ははみ出して表示します。日本語は改行されます。
超える分は表示しない (hidden)
<style>
.p1,.p2 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
overflow: hidden;
}
</style>
<p class="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p class="p2">表示領域を超える場合の表示方法</p>
hiddenは、表示領域を超えた分は表示しません。日本語は改行されます。
スクロールで表示 (scroll)
表示領域を超える場合の表示方法表示領域を超える場合の表示方法表示方法表示領域を超える場合の表示方法
<style>
.p12 {
width: 100px;
height: 150px;
overflow: scroll;
background: LightCyan;
}
</style>
<p class="p12">
表示領域を超える場合の表示方法表示領域を超える場合の表示方法表示方法表示領域を超える場合の表示方法
</p>
scrollは、表示領域を超えた分はスクロールで表示します。
ブラウザによる (auto)
<style>
.p1,.p2 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
overflow: auto;
}
</style>
<p class="p1">hyoujiryouikiwokoerubaai(overflow)</p>
<p class="p2">表示領域を超える場合の表示方法</p>
autoは、ブラウザによって変わります。スクロールが一般的です。
overflow-xとoverflow-yとは
overflow-xは、左右ではみ出した場合の指定です。
overflow-yは、上下ではみ出した場合の指定です。
指定する値はoverflowと同じです。
関連の記事