Tweet

Pocket

【こちらの記事は、約4分程でお読みいただけます。】

こんにちは。技術担当の工藤です。

前回でちょっとだけ触れたoverflowプロパティについて解説していきます。
このoverflowプロパティは、clearfixの変わりになったり工夫次第で色々な使い方があります。

overflow

overflowは、領域内に収まりきらない内容を、どう処理するかを指定するプロパティです。

デフォルトは、visibleになります。 scrollは、表示コンテンツをこれ以上広げたくないけど内容が多い時なんかに使えます。
autoは、ブラウザに依存させます。ブラウザによって挙動が変わってくるので、あまり使い道がないかもしれません。

以下、使用例です。 boxの高さと横幅が100pxの時、はみ出したテキストの表示を指定します。boxの背景は灰色で表示させわかりやすくしてます。

visible

	<div class="box">
		<p>テキストです。テキストです。テキストです。テキストです。テキストです。</p>
	</div>
<style>
.box{
	width: 100px;
	height: 100px;
	background: #ccc;
	overflow: visible;
}
</style>

scroll

<div class="box">
	<p>テキストです。テキストです。テキストです。テキストです。テキストです。</p>
</div>
<style>
.box{
	width: 100px;
	height: 100px;
	background: #ccc;
	overflow: scroll;
}
</style>

hidden

<div class="box">
	<p>テキストです。テキストです。テキストです。テキストです。テキストです。</p>
</div>
<style>
.box{
	width: 100px;
	height: 100px;
	background: #ccc;
	overflow: hidden;
}
</style>

いろいろ便利なoverflow:hidden;

よく使うのは、hiddenです。色んな使い道があります。

clearfixみたいに使う

前回で説明したようにclearfixの代わりに使えます。

テキストの回り込み回避に使う

floatが、テキストです。と画像の時、floatを2つ使わなくてもテキストです。の回り込みを操作することが出来ます。

<div class="box">
	<img src="http://placehold.jp/50x50.png">
	<p>テキストです。テキストです。テキストです。テキストです。テキストです。</p>
</div>
<style>
.box{
	width: 150px;
	height: 100px;
	background: #ccc;
	overflow: hidden;
}
img{
	float: left;
}
</style>

テキストです。テキストです。テキストです。テキストです。テキストです。

同じ包容ボックスに、テキストとイメージを置き、イメージを左右にフロートさせるとテキストが回り込みをして下に回ります。

テキストにoverflow:hidden;を記入する

<div class="box">
	<img src="http://placehold.jp/50x50.png">
	<p class="text">テキストです。テキストです。テキストです。テキストです。</p>
</div>
<style>
.box{
	width: 150px;
	height: 100px;
	background: #ccc;
	overflow: hidden;
}
img{
	float: left;
}
.text{
	overflow: hidden;
}
</style>

テキストです。テキストです。テキストです。

テキストにoverflow:hiddenを指定すると、テキストの回り込みを回避出来ます。

floatの解除には、clearfixかoverflow:hidden;かどっちを使えばいいのか？

2つには、それぞれ欠点があります。

clearfixは、after領域を占領してしまうという事。
overflow:hidden;は、はみ出した領域を隠してしまう事。これは、positionなどで包容ボックスからはみ出した要素などに影響してきます。

おわりに

floatのクリアは必須です。しなくても崩れない時もありますが、後々に影響してきたときにデバッグに時間がかかる可能性もありますし、今見ているブラウザで大丈夫でも他のブラウザで崩れていたりする時があったりします。覚えている時に対応したほうがいいでしょう。
『どっちかだけ』を使うではなく、必要に応じて両方使っていくのがいいかと思われます。
例えば、普段はoverflow:hidden;で回り込みを解除しておいて、はみ出した要素がある時などは

<style>
.overflow-hidden{
	overflow:hidden; //floatを解除
}
.clearfix{
	overflow: visible !important;//clearfixでfloatを解除するので、overflow:hidden;は不要なので通常に戻してはみ出す領域を表示するようにする。
}
.clearfix:after{
	content: "";
	clear: both;
	display: block;
}
</style>

なんていう合わせ技も使えて、overflow:hidden;の弱点にも対応出来てよいかもしれません。

※CSSは仕様上後から書いたものを上書きしていきますので、overflow:hidden;を掛けたあとにvisibleを追記しないと上書きされません。
なので、!importantで優先させています。

Tweet

Pocket

Related posts:

フロートを解除して通常フローに戻すクリアプロパティー スタイルの記述と優先順位について CSSだけで作る立体的なボタン before、afterを使ってコーディングの幅を広げよう