HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

オーバーフロー

overflowプロパティ

ブロックコンテナ要素内にあるコンテンツの表示方法を指定するためのプロパティです。

  • 初期値

    visible

  • 継承

    不可

  • 適用できる要素

    ブロックコンテナ要素

次のような値を設定することができます。

  • visible – 親要素内に表示が収まらない場合、外にはみ出しても表示を行います。初期値です。
  • hidden – 親要素の範囲でのみ表示を行います。もし収まらない要素があった場合は途中で切れ取られます。
  • scroll – 親要素の範囲で表示が収まらない場合、要素内をスクロールできるようにして、全てを閲覧できる状態にします。
  • auto – 親要素内に表示が収まらない場合、ブラウザによって自動的に表示方法を選択するための値です。多くの場合は「scroll」と同じ挙動となりますが、ブラウザによって異なる可能性があります。

パターン1

値に「visible」を指定した例です。

CSSコード例

<style type="text/css">
.box1 {
	overflow: visible;
	width: 200px;
	height: 50px;
}
.box1 p {
	width: 250px;
	height: 100px;
}
</style>
<div class="box1">
	<p>This text is sample for overflow property.</p>
</div>

表示例:

値の設定例1

パターン2

値に「hidden」を指定した例です。

CSSコード例

<style type="text/css">
.box2 {
	overflow: hidden;
	width: 200px;
	height: 50px;
}
.box2 p {
	width: 250px;
	height: 100px;
}
</style>
<div class="box2">
	<p>This text is sample for overflow property.</p>
</div>

表示例:

値の設定例2

パターン3

値に「scroll」を指定した例です。なお、値に「auto」を指定した場合も多くのブラウザでは「scroll」と同じ表示になります。

CSSコード例

<style type="text/css">
.box3 {
	overflow: scroll;
	width: 200px;
	height: 50px;
}
.box3 p {
	width: 250px;
	height: 100px;
}
</style>
<div class="box3">
	<p>This text is sample for overflow property.</p>
</div>

表示例:

値の設定例3

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。