レシピ

ブロックレベル要素内でコンテンツを完結させる

  • このエントリーをはてなブックマークに追加

floatプロパティによる要素の配置を、親要素の外側に影響しないように設定する方法を解説します。

この記事のポイント

  • overflowプロパティを使ってfloatプロパティの配置を制御する
  • floatプロパティを使っても要素の高さを取得する

目次

配置の影響範囲をコントロールする

要素を横並びにするときにfloatプロパティは活躍しますが、適用範囲を意識しないと続く他の要素にも影響が及んでしまうことがあります。
今回はoverflowプロパティを使って親要素の中でコンテンツを完結させ、親要素の外側にfloatプロパティの影響が出ないように設定を行います。

コンテンツの表示例
コンテンツの表示例

この例ではテキストと画像をfloatプロパティを使って横並びにしています。

コード例

<style>
section {
	overflow: hidden;
	margin: 0 auto 40px;
	width: 900px;
}

section .text_content {
	float:left;
	width: 48%;
}

p {
	font-size: 86%;
	line-height: 1.6em;
}

section figure {
	float: right;
	width: 48%;
}

section figure img {
	width: 100%;
	max-width: 100%;
}

.banner_area {
	text-align: center;
}
</style>
<section>
	<div class="text_content">
		<p>要素内で使うfloat要素の効果を外側に影響しないようにするにはoverflowプロパティで「hidden」を指定します。<br>このプロパティを設定すると、指定した要素が親要素となり、子孫要素は親要素の範囲外には表示されなくなります。<br>もし親要素に縦横のサイズが指定されていた場合は、表示オーバーした分は非表示になります。</p>
	</div>
	<figure><img src="./images/pic_sample.jpg" alt="メインビジュアル"></figure>
</section>
<section class="banner_area"><a href="#"><img src="./images/banner.png" alt="基礎から応用まで! HTML&CSS"></a></section>

赤い箇所section要素が親要素となり、今回はその要素にoverflowプロパティで「hidden」を指定しています。

overflowプロパティがない場合

親要素にoverflowプロパティが指定されていない場合は、次の表示となります。

overflowプロパティがない場合のコンテンツの表示例
overflowプロパティがない場合のコンテンツの表示例

下部のピンク色のバナーが上にずれて表示されました。

この現象は、バナーの上にあるテキストと画像にfloatプロパティが適用されており、この2つを囲ってるsection要素が内側のコンテンツのサイズを取得できないために起こります。

言葉だと感覚的に分かりづらいため、section要素に背景色を敷いて確認してみます。
まずはoveflowプロパティがない場合です。
(HTML部分は上記コードと同じなので省略します。)

コード例

section {
	margin: 0 auto 40px;
	width: 900px;
	background: #ccc;
}

section .text_content {
	float:left;
	width: 48%;
}

p {
	font-size: 86%;
	line-height: 1.6em;
}

section figure {
	float: right;
	width: 48%;
}

section figure img {
	width: 100%;
	max-width: 100%;
}

.banner_area {
	text-align: center;
}
overflowプロパティなしの表示例
overflowプロパティなしの表示例

ちょっと範囲がよく分からない(意図しない)形になっていることが分かります。
続いて、oveflowプロパティを指定した場合の表示を確認してみます。

コード例

section {
	overflow: hidden;
	margin: 0 auto 40px;
	width: 900px;
	background: #ccc;
}

section .text_content {
	float:left;
	width: 48%;
}

p {
	font-size: 86%;
	line-height: 1.6em;
}

section figure {
	float: right;
	width: 48%;
}

section figure img {
	width: 100%;
	max-width: 100%;
}

.banner_area {
	text-align: center;
}
overflowプロパティありの表示例
overflowプロパティありの表示例

上下それぞれのsection要素ではっきりと背景色が表示されました。
今回は上のsection要素overflowプロパティによって内側の要素(テキストと画像)のサイズを取得できたため、意図した通りの表示になっています。
また、floatプロパティが下部のコンテンツ(ピンク色のバナーエリア)に影響していないことも分かります。

overflowプロパティを区切る親要素で活用すると、clearfixのようなテクニックを使わずに表示をコントロールできるようになります。

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ