overflow

CSSでは、コンテンツがボックスをはみ出す場合の表示方法を指定することができます。

本ページでは、overflowプロパティについて説明します。

overflowプロパティとは

overflowプロパティは、コンテンツの内容がパディングボックスからはみ出す時に、そのままはみ出して表示させたり、表示しなかったり、スクロールさせて表示させたりすることができます。

overflowの説明

overflowの定義は、以下のとおりです。

【overflowの定義】
visible | hidden | scroll | auto | inherit
初期値 visible
適用対象 ブロックコンテナ
継承 しない

適用対象のブロックコンテナとは、内側の表示が四角形となるタイプです。例えば、ブロックボックスインラインブロックなどがあります。span要素などのインラインボックスは、対象外です。

値の説明

以下は、overflowで使える値と説明です。

visible
はみ出して表示します。
hidden
はみ出した部分は、表示しません。
scroll
コンテンツがはみ出す、はみ出さないに関わらず、スクロールバーを表示します。はみ出す場合は、スクロールすることで表示できます。
auto
ブラウザで決定します。通常は、コンテンツがはみ出した場合のみスクロールバーを表示します。はみ出した部分は、スクロールすることで表示できます。

利用例

overflowの利用例は、以下のとおりです。

【overflowの利用例】
.test {
  height: 50px;
  border: solid;
  overflow: visible;
}

上記をdivなどにクラスtestで適用すると、以下のように表示されます。

overflowを利用した時の表示例

枠線(境界線)から、はみ出して表示されています。これが、デフォルトです。

高さに制限がない(heightを指定しないなど)場合は、コンテンツの内容に合わせて高さが変更になるため、はみ出すことはありません。

以下は、各値での表示例です。

hidden(隠す)
hiddenを指定した時の表示例
scroll(スクロールで表示)
scrollを指定した時の表示例
auto(ブラウザで決定)
autoを指定した時の表示例

scrollでは、コンテンツがはみ出さなくても縦横両方にスクロールバーが表示されます。

autoは、縦方向だけスクロールバーが表示されています。また、コンテンツの内容が少なければ、以下のようにスクロールバーは表示されません。

スクロールバーが表示されない例

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
overflow
【スマートフォン】
項目 Sa An Op Ch Fx Sm
overflow
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る