トップページ  > ウェブ制作小ネタTIPS  > CSSのFlexboxでレイアウトを作る

★ウェブ制作小ネタTIPS

CSSのFlexboxでレイアウトを作る
Google Chrome Safari Firefox Opera
広告

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

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

■使用例1

CSSソース

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;
}

HTMLソース

<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>カラム1です。カラム1です。カラム1です。</p>
	</section>
	<section>
	<p>カラム2です。カラム2です。カラム2です。</p>
	</section>
	<section>
	<p>カラム3です。カラム3です。カラム3です。</p>
	</section>
</div>
↓↓↓

ブラウザ上の表示

カラム1です。カラム1です。カラム1です。

カラム2です。カラム2です。カラム2です。

カラム3です。カラム3です。カラム3です。

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

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

■使用例2

CSSソース

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%;}

HTMLソース

<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>カラム1です。カラム1です。カラム1です。</p>
	</section>
	<section class="sample2_column1">
	<p>カラム2です。カラム2です。カラム2です。</p>
	</section>
	<section class="sample2_column1">
	<p>カラム3です。カラム3です。カラム3です。</p>
	</section>
</div>
↓↓↓

ブラウザ上の表示

カラム1です。カラム1です。カラム1です。

カラム2です。カラム2です。カラム2です。

カラム3です。カラム3です。カラム3です。

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

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

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

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

■使用例3

CSSソース

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;
	}
}

HTMLソース

<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>カラム1です。カラム1です。カラム1です。</p>
	</section>
	<section class="sample3_column1">
	<p>カラム2です。カラム2です。カラム2です。</p>
	</section>
	<section class="sample3_column1">
	<p>カラム3です。カラム3です。カラム3です。</p>
	</section>
</div>
↓↓↓

ブラウザ上の表示

カラム1です。カラム1です。カラム1です。

カラム2です。カラム2です。カラム2です。

カラム3です。カラム3です。カラム3です。

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

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

■関連項目

flex-direction …… フレックスコンテナ内のアイテムの配置方向を指定する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ