floatプロパティでボックスを横に並べる

古いブラウザでも対応した伝統的な方法

floatプロパティを使って、ブロックレベルで要素を横並びにすることができます。

最近はHTML5&CSS3が普及して多くのブラウザがサポートしているため、「display:flex;」を使って横に並べる方法が一般的になっています。
しかし新しいプロパティに対応していないブラウザも含めてサポートする必要がある場合については、今回のfloatプロパティでボックスを横に並べる手法が使われています。

HTMLのコード例

<section>
	<article>
		<header>
			<p class="text_post_date"><time datetime="2018-08-01">2018.08.01</time></p>
			<h2>タイトル1</h2>
		</header>
		<p class="text_excerpt">コンテンツの説明文</p>
		<div class="btn_area">
			<a href="#">開く</a>
		</div>
	</article>
	<article>
		<header>
			<p class="text_post_date"><time datetime="2018-07-30">2018.07.30</time></p>
			<h2>タイトル2</h2>
		</header>
		<p class="text_excerpt">コンテンツの説明文</p>
		<div class="btn_area">
			<a href="#">開く</a>
		</div>
	</article>
	<article class="right_content">
		<header>
			<p class="text_post_date"><time datetime="2018-07-28">2018.07.28</time></p>
			<h2>タイトル3</h2>
		</header>
		<p class="text_excerpt">コンテンツの説明文</p>
		<div class="btn_area">
			<a href="#">開く</a>
		</div>
	</article>

--- 途中省略 ---

	<article class="right_content">
		<header>
			<p class="text_post_date"><time datetime="2018-07-16">2018.07.16</time></p>
			<h2>タイトル9</h2>
		</header>
		<p class="text_excerpt">コンテンツの説明文</p>
		<div class="btn_area">
			<a href="#">開く</a>
		</div>
	</article>
</section>

CSSのコード例

article {
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
	border: none;
	border-radius: 3px;
	width: 32%;
	box-shadow: 0 0 5px #999;
}
.right_content {
	margin-right: 0;
}

--- article要素内のスタイルは省略 ---

基本的な仕組みはsection要素で囲った9つのarticle要素を、「float: left;」で配置して横に並べています。

横に並べる時に肝となるのは、article要素の「横幅」と「要素同士の余白」。
これらの合計が親要素の幅に対して100%にならないと、綺麗に並んだレイアウトになりません。

例えば今回は横に3つ並べるレイアウトなので、article要素の1つあたりの横幅は32%、さらにmargin-rightプロパティを使って右側に余白を2%空けています。
一番右側の要素は右側の余白が不要なため、クラス「.right_content」を使ってmargin-rightプロパティを0に指定しました。

以上で、「(32% × 3) + (2% × 2) = 100%」となり、親要素の幅にピッタリ収まる計算です。

横に2つ並べるレイアウトに変更する

先ほどの横3つのレイアウトを、article要素の幅と余白を調整して2つ並べるレイアウトに変更していきます。

HTMLのコード例

<section>
	<article>
		<header>
			<p class="text_post_date"><time datetime="2018-08-01">2018.08.01</time></p>
			<h2>タイトル1</h2>
		</header>
		<p class="text_excerpt">コンテンツの説明文</p>
		<div class="btn_area">
			<a href="#">開く</a>
		</div>
	</article>
	<article class="right_content">
		<header>
			<p class="text_post_date"><time datetime="2018-07-30">2018.07.30</time></p>
			<h2>タイトル2</h2>
		</header>
		<p class="text_excerpt">コンテンツの説明文</p>
		<div class="btn_area">
			<a href="#">開く</a>
		</div>
	</article>
	<article>
		<header>
			<p class="text_post_date"><time datetime="2018-07-28">2018.07.28</time></p>
			<h2>タイトル3</h2>
		</header>
		<p class="text_excerpt">コンテンツの説明文</p>
		<div class="btn_area">
			<a href="#">開く</a>
		</div>
	</article>
	<article class="right_content">
		<header>
			<p class="text_post_date"><time datetime="2018-07-26">2018.07.26</time></p>
			<h2>タイトル4</h2>
		</header>
		<p class="text_excerpt">コンテンツの説明文</p>
		<div class="btn_area">
			<a href="#">開く</a>
		</div>
	</article>
</section>

CSSのコード例

article {
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
	border: none;
	border-radius: 3px;
	width: 49%;
	box-shadow: 0 0 5px #999;
}
.right_content {
	margin-right: 0;
}

--- article要素内のスタイルは省略 ---

横2列のレイアウトになるため、右端にくる2つ目と4つ目のarticle要素にクラス「right_content」を指定します。

article要素の横幅は49%に変更し、余白は2%のままで「(49 × 2) + 2 = 100%」という計算です。

高さの異なるボックスを横に並べる

ボックスの中のテキストなどが同じ長さになるとは限らないため、横に並ぶarticle要素の高さは異なることがあり、floatプロパティを使うと高さの違いで引っかかったような表示になることがあります。

そこで、左端のボックスに対してclearプロパティを設定します。

HTMLのコード例

<section>
	<article>
		--- 途中省略 ---
	</article>
	<article>
		--- 途中省略 ---
	</article>
	<article class="right_content">
		--- 途中省略 ---
	</article>
	<article class="left_content">
		--- 途中省略 ---
	</article>
	<article>
		--- 途中省略 ---
	</article>
	<article class="right_content">
		--- 途中省略 ---
	</article>
	<article class="left_content">
		--- 途中省略 ---
	</article>
	<article>
		--- 途中省略 ---
	</article>
	<article class="right_content">
		--- 途中省略 ---
	</article>
</section>

CSSのコード例

article {
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
	border: none;
	border-radius: 3px;
	width: 32%;
	box-shadow: 0 0 5px #999;
}
.left_content {
	clear: both;
}
.right_content {
	margin-right: 0;
}

--- article要素内のスタイルは省略 ---

クラス「left_content」に「clear: both;」を指定します。
この指定があることで、行が変わったタイミングで一旦floatプロパティによる回り込みが解除され、ボックスの高さの違いによる段差に引っかからずに表示されるようになります。