【HTML】内容がはみ出た部分の表示方法を指定する「overflow」プロパティ

overflowプロパティは指定された領域内に収まりきらない内容がはみ出した時に、どのように処理するかを指定するプロパティです。

また要素にスクロールバーを付けたり、レイアウトが崩れないように、はみ出した部分を非表示にすることもできます。

はみ出した内容の表示方法を指定する

overflowプロパティの値

セレクタ{ overflow : 値; }
visible	通常通りに領域からはみ出して表示する（初期値）
hidden	はみ出た部分を表示しない
scroll	常にはみ出た内容をスクロールで表示して見えるようにする。
auto	一般的に、はみ出た内容は自動的にスクロールで表示させる。はみ出さないときはスクロールバーは付かない。

まず以下のサンプルのように、親要素<div>の横幅が「660px」に対して、子要素<img>画像の横幅は「900px」になっています。

通常画像は親要素の表示領域からはみ出てしまいます。そうなるとレイアウトが崩れてしまう可能性があります。

そんなことを防ぐために、表示領域を超えてしまうサイズは表示させないよう「overflow:hidden;」値で設定すれは、親要素の表示領域「660px」以内でしか表示されません。

overflow:hidden;

 <style>
　div.over-flow{
　　	width:660px;
　　	overflow:hidden;
　　	}
 </style>
 
<body>
　<div class="over-flow">
　<img src="windows10main.jpg" width="900px">
 </div>
</body>

以下のサンプルのように、「overflow:auto;」値で設定すれは、親要素<div>の横幅が「660px」に対して、子要素<img>画像の横幅は「900px」は親要素の表示領域からはみ出てしまいます。

スクロールバーが自動表示され表示領域を超えてしまったサイズもスクロールバーを動かして見ることができます。「overflow:scroll;」値と同様の機能をします。

子要素のサイズが親要素の表示領域を超えない場合は、スクロールバーは非表示になります。

overflow:auto;

 <style>
　div.over-flow{
　　	width:660px;
　　	overflow:auto;
　　	}
 </style>
 
<body>
　<div class="over-flow">
　<img src="windows10main.jpg" width="900px">
 </div>
</body>