「親要素からはみ出た要素を隠す方法が知りたい」
「overflowの使い方を詳しく知りたい」
子要素の内容が増えサイズが大きくなると、親要素の領域からはみ出す場合があります。
要素のはみ出しに対処するにはoverflowプロパティの使用が有効です。
ただしoverflowを指定してもうまく効かず、要素がはみ出たままと、悩まれる場合も多いのではないでしょうか？
この記事ではoverflowの使用方法と、うまく効かない場合の対処方法について解説します。
- overflowの使用方法
- overflowを縦横個別に指定する方法
- overflowがうまく効かない場合にチェックすべきポイント
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
overflowとは？
overflowとは親要素からの子要素のはみ出しに対し、処置をするCSSプロパティです。
親要素から子要素がはみ出し状態を、実例で確認していきましょう。
サンプルとして幅300px×高さ150pxのcontainerを用意します。
<div class="container">
<p>1:overflowプロパティを使えば</p>
<p>2:ボックス要素からはみ出た部分を</p>
<p>3:隠してスクロール領域にしたり、非表示にできます</p>
<p>4:overflowプロパティを</p>
<p>5:適切に使いこなして</p>
<p>6:余白部分を処理していきましょう</p>
</div> .container{
width: 300px;
height: 150px;
border: 1px solid black;
} 
オレンジの枠で示した箇所が要素のはみ出しを示しています。
overflowを用いて、はみ出した部分の見え方を指定することが可能です。
overflowの使い方
overflowの使い方について解説します。
overflowで主に使用する４つの値の指定内容を、一覧にまとめました。
| 値 | 指定内容 |
| visible | はみ出した要素をそのまま表示させる |
| scroll | はみ出した要素が非表示になり、スクロール操作で内容を確認できる |
| hidden | はみ出した要素を完全に非表示にし、スクロールによる内容の確認はできない |
| auto | 必要に応じてscrollと同じ処理をする |
各値の使用方法について詳しく解説していきましょう
1.overflow: visible;の使い方
overflowの値にvisibleを指定すると、はみ出した要素はそのまま表示されます。
.container{
/*width、height、border指定省略*/
overflow: visible;/*はみ出た要素を表示させる*/
}
visibleは初期値なので、通常記述する必要はありません。
そのためほとんど指定する機会のない値と言えるでしょう。
2.overflow: scroll;の使い方
overflowの値にscrollを指定すると、はみ出した部分は非表示になり、非表示になった部分はスクロール領域へ隠されます。
スクロールバーがボックスの端に表示され、非表示の部分の内容はスクロール操作で確認可能です。
.container{
/*width、height、border指定省略*/
overflow: scroll;/*はみ出した部分をスクロール領域に隠す*/
} 
上記のようにボックスの端にスクロールバーが表示され、はみ出たテキストはスクロール操作で確認できます。
はみ出た要素を非表示にしつつ、スクロールを可能にしたい場合にはscrollを使用します。
もしスクロールバーを非表示にしたいと考える場合は、こちらの記事を読んでいただくのがおすすめです。
scroll指定において、スクロールバーを非表示にする方法について理解できるようになります。
hiddenを指定すると、はみ出した部分は完全に非表示になります。
scrollと違い、非表示になった箇所をスクロールで確認することはできません。
.container{
/*width、height、border指定省略*/
overflow: hidden;/*はみ出した部分を非表示にする*/
} 
はみ出した部分を完全に隠したい場合にはhiddenを指定しましょう。
4.overflow: auto;の使い方
overflowの値にautoを指定すると、scrollと同じく要素のはみ出しを非表示にしてスクロールを可能にします。
scrollとの違いは要素のはみ出しが生じた時のみ、スクロールバーを表示させる点です。
実例をもとに確認していきましょう。
.container{
/*width、height、border指定省略*/
overflow: auto;/*はみ出した部分をスクロール領域にする（はみ出した部分がある時だけスクロールバーが表示される）*/
} 
scrollとautoは、いずれもはみ出した箇所をスクロール領域に隠す値です。
はみ出しがある時にだけスクロールバーを表示させたい場合は、autoを使用しましょう。
overflowを縦横個別に指定する方法
overflowを縦横個別に指定する場合には、「overflow-x」と「overflow-y」を用います。
「overflowーx」と「overflow-y」の使い方について解説します。
| プロパティ名 | 処理内容 |
| overflow-x | 横方向へのはみ出しに対し処理を指定する |
| overflow-y | 縦方向へのはみ出しに対し処理を指定する |
| overflow | 縦横のはみ出しに対し一括で処理を指定する |
先に紹介していたoverflowは、縦横両方の要素のはみ出しに対し一括で同じ処理を指定するプロパティです。
実例を用いて縦横個別にoverflowを指定する方法を、確認していきましょう。
サンプルとして横方向（overflow-x)にhidden、縦方向（overflow-y）にscrollを指定してみます。
.container{
/*width、height、border指定省略*/
white-space: nowrap;/*テキストを改行をさせないようにする*/
overflow-x: hidden;/*横方向はみ出した部分を非表示にする*/
overflow-y: scroll;/*縦方向はみ出した部分を非表示にする*/
} 
縦方向のはみ出しに対してはスクロール可能、横方向のはみ出しに対しては非表示指定できました。
このように縦横のはみ出しに対して個別の値を指定する場合、overflow-xとoverflow-yを使用します。
ショートハンドを使用しoverflowを縦横個別に指定
overflowを使って、overflow-xとoverflow-yの指定をまとめて行うことが可能です。
overflow:値1（横方向への処理を指定） 値2(縦方向への処理を指定);
このように複数プロパティの指定をまとめて記述する方法をショートハンドと呼びます。
実例を用いて確認していきましょう。
.container{
/*width、height、border指定省略*/
white-space: nowrap;/*テキストを改行をさせないようにする*/
overflow: hidden scroll;/*横方向に「hidden」、縦方向に「scroll」を指定*/
}
上記のように横方向のはみ出しは非表示、縦方向のはみ出しはスクロール領域へと隠れました。
このようにoverflowだけで、overflow-xとoverflow-yの指定をまとめて実行できるのです。
overflowが効かない時の原因と対処法
overflowが効かない時の原因と対処法について解説します。
縦横どちらの方向へのはみ出しに対して、overflowを指定しているかにより対処方法が異なります。
overflow: hidden;を指定したcontainerをサンプルとして確認していきます。
overflow-yが効かない場合の原因と対処法
overflow-yが効かない場合の原因と対処の方法について解説します。
親要素に高さを指定していない
親要素に高さ（height）を指定しない場合overflow-yが効きません。
ボックス要素に高さを指定しない場合、親要素のcontainerのheightは初期値のautoの状態だからです。
heightがautoに指定されていると、親要素の高さは子要素の高さに合わせて可変します。
つまり、子要素のはみ出しが生じないということです。
containerの高さがテキストの高さに応じて可変するので、テキストのはみ出しが生じません。
そのためoverflow-yが効かないのです。
対処法としてcontainerにheightを指定しましょう。
containerの高さが可変しなくなり、テキストのはみ出しに応じてoverflow-yが効くようになります。
overflow-xが効かない場合の原因と対処方法
overflow-xが効かない場合の原因と対処方法について解説します。
親要素に幅を指定していない
親要素に幅(width)を指定しない場合、overflow-xが効かないことがあります。
要素にwidthを指定しない場合、値はautoとなります。
親要素がbodyの場合、containerがブラウザ幅に合わせて可変するので要素のはみ出しは発生しません。
よってcontainer-xが効かないのです。
上記のようにcontainerが親要素のbodyの幅に合わせ可変するため、横方向要素のはみ出しが発生しません。
よってoverflow-yが効かなくなってしまうのです。
対処方法としてcontainerにwidthを指定しましょう。
containerの幅を固定すればoverflowは効くようになります。
子要素のテキストに改行の禁止を指定していない
子要素がテキストの場合に限り、overflow-xが効かない原因はもう一つあります。
テキストに対して改行の禁止（white-space: nowrap;）を指定しなければ、overflow-xが効きません。
white-spaceプロパティの初期値がnormalだからです。
white-space: normal;の場合、テキストが親要素の端まで到達すると自動的に改行します。
そのためテキストのはみ出しが発生しなくなるのです。
テキストに改行の禁止を指定しない場合、自動的にテキストがcontainerの端で改行します。
この状態ではテキストのはみ出しが生じなくなるので、overflow-xが効きません。
対処方法として、テキストの改行禁止を指定するwhite-space: nowrap;をテキスト要素に指定しましょう。
overflow-xが効かない問題を解消できます。
まとめ
overflowを使用すれば、親要素から子要素がはみ出した場合でも適切に処理ができます。
しかしoverflowを指定してもうまく効かないと悩むケースがあるかもしれません。
またoverflowが効かないときの対処法についても詳しく解説しておりますので、この記事で原因を探りながら対応してみてくださいね。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
