overflow プロパティ

プロパティ overflow は、ブロックの境界（幅または高さ）からはみ出したコンテンツ（テキスト、画像、他のブロック）をブラウザがどのように処理するかを指定します。ブラウザは、はみ出した部分を隠したり、スクロールバーを追加したり、何もしなかったり（そのままにはみ出した状態にしたり）することができます。

構文

セレクタ {
	overflow: hidden | scroll | auto | visible;
}

値

値	説明
`hidden`	ブロックの境界からはみ出したコンテンツを隠します。
`scroll`	スクロールバーを追加します。何もはみ出していない場合でも常に表示されます（その場合は非アクティブになります）。
`auto`	必要に応じてスクロールバーを追加します：コンテンツが収まらない場合は表示され、全て収まる場合は表示されません。
`visible`	ブロックの境界からはみ出したコンテンツを隠しません。

デフォルト値: visible。

例 . visible 値

この例では、非常に長い単語がコンテナに収まらず、境界からはみ出します。切り取られは起こりません：

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

例 . visible 値

今度は幅だけでなく高さも制限されています（テキストはブロックから高さ方向にもはみ出します）：

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

例 . hidden 値

今回は、コンテナの境界からはみ出した部分がすべて単純に切り取られます（高さ方向も同様）。高さの切り取りは、明示的に高さが指定されている場合にのみ起こることに注意してください。そうでない場合、テキストはコンテナの高さを拡張するため、切り取りは起こりません：

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

例 . scroll 値

scroll 値では、スクロールバーは常に表示されます。何もはみ出していない場合でもです（その場合は非アクティブになります）。現在、テキストは幅も高さもはみ出していませんが、それでもスクロールバーはあります（非アクティブ）：

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

例 . auto 値

auto 値では、スクロールバーはコンテンツがコンテナからはみ出した場合にのみ追加されます。現在はすべて収まっているため、スクロールバーはありません：

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

例 . auto 値

今度は幅を制限すると、水平スクロールバーが現れます：

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

overflow プロパティ

構文

値

例 . visible 値

例 . visible 値

例 . hidden 値

例 . scroll 値

例 . auto 値

例 . auto 値

関連項目