今回はCSSのoverflowプロパティとoverflow-x、overflow-yについて確認します。
今回は環境により表示のされ方が一部違う可能性があります。Windows7/10でChrome、FireFoxでの表示のされ方について記載しています。
CSSのoverflowプロパティの概要
ovreflowプロパティは、領域内に収まらない内容をどのように処理するかを指定するものとなります。このプロパティの取る値は以下の4つがあります。
| 値 | 説明 |
|---|---|
| visible | はみ出して表示する。初期値となります。 |
| hidden | はみ出した部分を表示しない。 |
| scroll | スクロールして表示する。 |
| auto | ブラウザに依存します。一般的にスクロールして表示する。 |
各値毎の表示のされ方を確認します。overflow以外は以下の設定のdiv要素に対して、同じ文言を設定しています。
.sampleBox { width:250px; height:100px; background-color:gold; padding:10px; margin-bottom:35px; box-sizing:border-box; }
「visible」の場合
縦方向に、はみ出して表示されます。
指定の領域内に収まらない内容の場合、その収まらない部分がどのようにして表示されるかを確認する。
「hidden」の場合
表示されません。
「scroll」の場合
縦方向にスクロールして表示されます。横方向のスクロールバーは非活性の状態で表示されます。
ちなみにスクロールバーが表示される場合、その分だけ文言などが表示される領域が狭くなることになります。繊細なレイアウトの場合、スクロールバーが表示されることで表示幅が影響しレイアウトが崩れることがあるのでご注意下さい。
指定の領域内に収まらない内容の場合、その収まらない部分がどのようにして表示されるかを確認する。
「auto」の場合
ブラウザに依存します。現在のブラウザでは一般的に縦方向にスクロールして表示されます。横方向のスクロールバーは表示されません。
指定の領域内に収まらない内容の場合、その収まらない部分がどのようにして表示されるかを確認する。
はみ出し方による違い
ここまでの説明でoverflowの設定はイメージはできたと思いますが、実ははみ出し方の違いにより一部見え方が変わってきます。縦方向と横方向にそれぞれはみ出るようなdiv要素を配置した場合どうなるかを確認します。まずは下方向と右方向にはみ出る要素の場合です。
「visible」の場合
表示されます。
「hidden」の場合
表示されません。
「scroll」の場合
縦方向、横方向にスクロールして表示されます。
「auto」の場合
ブラウザ依存ですが「scroll」と同じようにスクロールして表示されるのが多いと思います。
続いては上方向と左方向にはみ出る要素の場合です。
「visible」の場合
表示されます。
「hidden」の場合
表示されません。
「scroll」の場合
縦方向、横方向にスクロールバーは表示されますが、非活性状態でスクロールはできず表示されません。
「auto」の場合
ブラウザ依存ですが「hidden」と同じように表示されないのが多いと思います。
「scroll」については、はみ出した方向が右方向または下方向の場合スクロールして表示することができますが、はみ出した方向が左方向または下方向の場合スクロールして表示することができないことがわかります。
overflow-x、overflow-yを両方指定する場合は要注意
overflowは縦方向と横方向の共通に設定されますが、overflow-x、overflow-yによりそれぞれ別に設定することができます。overflow-xが横方向、overflow-yが縦方向の設定です。設定できる値はoverflowプロパティと同じです。
ここまで書くと、overflowと同じ機能と思いますが、設定の組み合わせにより想定外のことになりますので説明したいと思います。overflow-x、overflow-yが両方とも同じ値のときは、overflowでその値にしたときと同じ状態になりますので、ここでは特に示しません。
使用する状態は以下の2種類になります。
下方向にはみ出す状態
右方向にはみ出す状態
下方向にはみ出す場合
縦方向はoverflow-yの設定が関係するように思えます。overflow-x、overflow-yの組合せ別の設定の見え方は以下のようになります。
overflow-y : scroll
ここまでは想定した通りです。overflow-yに「scroll」または「hidden」とした場合、その設定が有効です。
以下の場合、注意が必要です。
overflow-y : visible
overflow-yに「visible」を設定しているのに、はみ出して表示されません。overflow-yに「visible」を設定していて、overflow-xに「hidden」または「scroll」している状態で下方向にはみ出した要素があると、縦方向にスクロールされて表示されるようになっています。縦方向の表示が、横方向の設定であるoverflow-xの値によって表示が変わってきます。
右方向にはみ出す場合
右方向はoverflow-xの設定が関係するように思えます。overflow-x、overflow-yの組合せ別の設定の見え方は以下のようになります。
overflow-y : visible
ここまでは想定した通りです。overflow-xに「scroll」または「hidden」とした場合、その設定が有効です。
以下の場合、注意が必要です。
overflow-y : scroll
overflow-xに「visible」を設定しているのに、はみ出して表示されません。overflow-xに「visible」を設定していて、overflow-yに「hidden」または「scroll」している状態で右方向にはみ出した要素があると、横方向にスクロールされて表示されるようになっています。横方向の表示が、縦方向の設定であるoverflow-yの値によって表示が変わってきます。
まとめ
今回はCSSのoverflow、overflow-x、overflow-yについて確認しました。 特にoverflow-x、overflow-yについては、「visible」と設定していても想定通りに表示されないことがあるので注意が必要です。我々の場合、この特性を知らずに特定条件で「visible」にしてもうまくいかずにはまりました。
以上
