★ウェブ制作小ネタTIPS

CSSのFlexboxでレイアウトを作る

CSSのFlexboxで段組みレイアウトを作ってみましょう。
displayプロパティの値にflexを指定すると、フレックスボックスという柔軟な表示形式になります。

まずは、サンプルをご覧ください。

■使用例１

ul.sample1_menu a, div.sample1_content section {
	border-radius:4px;
}
ul.sample1_menu {
	display:-webkit-flex;
	display:flex;
	width:100%;
	list-style-type:none;
	margin:0; padding:0;
}
ul.sample1_menu li {
	width:25%;
}
ul.sample1_menu a {
	display:block;
	margin:2px; padding:10px; font-size:10px;
	background-color:#66cc99; color:#ffffff;
	text-align:center;
	text-decoration:none;
}

div.sample1_content {
	display:-webkit-flex;
	display:flex;
	width:100%;
}
div.sample1_content section {
	margin:2px; padding:10px; font-size:12px;
	background-color:#CC9999;
}

<ul class="sample1_menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>

<div class="sample1_content">
	<section>
	<p>カラム１です。カラム１です。カラム１です。</p>
	</section>
	<section>
	<p>カラム２です。カラム２です。カラム２です。</p>
	</section>
	<section>
	<p>カラム３です。カラム３です。カラム３です。</p>
	</section>
</div>

ポイントは
display:-webkit-flex; display:flex;
の部分です。
要素の表示をフレックスボックスに指定することで、子要素が自動的に縦割りにされて簡単に段組みレイアウトが実現できました。

次に、コンテンツ部分の各カラムの横幅を追加指定してみましょう。

■使用例２

ul.sample2_menu a, div.sample2_content section {
	border-radius:4px;
}
ul.sample2_menu {
	display:-webkit-flex;
	display:flex;
	width:100%;
	list-style-type:none;
	margin:0; padding:0;
}
ul.sample2_menu li {
	width:25%;
}
ul.sample2_menu a {
	display:block;
	margin:2px; padding:10px; font-size:10px;
	background-color:#66cc99; color:#ffffff;
	text-align:center;
	text-decoration:none;
}

div.sample2_content {
	display:-webkit-flex;
	display:flex;
	width:100%;
}
div.sample2_content section {
	margin:2px; padding:10px; font-size:12px;
	background-color:#CC9999;
}

section.sample2_column1 {width:50%;}
section.sample2_column2 {width:30%;}
section.sample2_column3 {width:20%;}

<ul class="sample2_menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>

<div class="sample2_content">
	<section class="sample2_column1">
	<p>カラム１です。カラム１です。カラム１です。</p>
	</section>
	<section class="sample2_column1">
	<p>カラム２です。カラム２です。カラム２です。</p>
	</section>
	<section class="sample2_column1">
	<p>カラム３です。カラム３です。カラム３です。</p>
	</section>
</div>

カラムの横幅の指定は、以下のように指定しました。

section.sample2_column1 {width:50%;}
section.sample2_column2 {width:30%;}
section.sample2_column3 {width:20%;}

floatプロパティによる段組みレイアウトでは、
子要素の横幅の合計が親要素の横幅を超えるとカラム落ちしてしまうことがありましたが、
フレックスボックスでは、親要素の幅におさまるように比率に応じて自動調整されます。
フレックスレイアウトでは基本的にはカラム落ちは起きません。

最後に、スマホサイトへの対応をしてみましょう。

■使用例３

ul.sample3_menu a, div.sample3_content section {
	border-radius:4px;
}
ul.sample3_menu {
	display:-webkit-flex;
	display:flex;
	width:100%;
	list-style-type:none;
	margin:0; padding:0;
}
ul.sample3_menu li {
	width:25%;
}
ul.sample3_menu a {
	display:block;
	margin:2px; padding:10px; font-size:10px;
	background-color:#66cc99; color:#ffffff;
	text-align:center;
	text-decoration:none;
}

div.sample3_content {
	display:-webkit-flex;
	display:flex;
	width:100%;
}
div.sample3_content section {
	margin:2px; padding:10px; font-size:12px;
	background-color:#CC9999;
}

@media screen and (max-width:800px) {
	div.sample3_content {
		flex-direction:column;
	}
}

<ul class="sample3_menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>

<div class="sample3_content">
	<section class="sample3_column1">
	<p>カラム１です。カラム１です。カラム１です。</p>
	</section>
	<section class="sample3_column1">
	<p>カラム２です。カラム２です。カラム２です。</p>
	</section>
	<section class="sample3_column1">
	<p>カラム３です。カラム３です。カラム３です。</p>
	</section>
</div>

このページをパソコンでご覧になっている方は、ブラウザの横幅を縮めていただくと、上記の使用例３のレイアウトが変化するのが確認できるかと思います。
CSSソースに追加したのは、「横幅が800px以下になったらflex-direction:column; を適用しなさい」という指定です。

flex-directionプロパティを使うと、フレックスボックス内の子要素の配置方向を指定できます。
flex-direction:column; を指定すると、フレックスボックスの子要素が垂直に並びます。

■関連項目