2019年02月01日

【実例あり】FlexboxやFloatの実践的な使い方

CSS3になってから追加されたFlexboxはご存知でしょうか？

Flexboxはレイアウトを整えるために便利なプロパティです。

ブロック要素を横並びにするためには、今までの場合はFloatなどを使用するのが主流でした。

しかし、Floatは初心者には難易度が高く習得しにくいのが難点です。

また、Floatはレイアウトを崩す可能性もあるのがデメリットになります。

Flexboxは、そのような問題点を解決させるプロパティになり、今では広く一般的に使用されるようになりました。　

本記事ではFloatとFlexboxのそれぞれの使い方やFlexboxを用いたWEB制作の方法などを紹介します。

Floatの使い方

Floatの使い方を説明するために、まずはコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.clearfix::after {
			content: "";
			display: block;
			clear: both;
		}
		.container{
			width: 500px;
			margin: 0 auto;
		}
		.boxA{
			width: 300px;
			height: 300px;
			background: tomato;
			color: #fff;
			text-align: center;
			float: left;
		}
		.boxB{
			width: 200px;
			height: 300px;
			background: skyblue;
			color: #fff;
			text-align: center;
			float: right;
		}
		.footer{
			width: 500px;
			height: 100px;
			margin: 0 auto;
			color: #fff;
			text-align: center;
			background: green;
		}
	</style>
	<div class="container clearfix">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
	</div>
	<footer class="footer">フッター</footer>
</body>
</html>

上記のようにコードを記述すると、このように表示されます。

Floatでレイアウトを横並びにさせるためには、boxAに「float: left;」を記述して、boxBに「float: right;」を記述して適用します。

Floatは、必ず左横にさせたい要素に「float: left;」、右横にさせたい要素に「float: right;」を記述しなければなりません。

「float: left;」を記述しない場合は、このように横並びになりません。

「float: right;」を記述しない場合も、このように横並びにならず段落ちしてしまいます。

このようにならないためにも横並びに「float: left;」や「float: right;」を記述しましょう。

また、Floatを使う場合は「overflow; hidden;」や「clear: both;」などを記述して、指定要素以外の回り込みを解除しなければなりません。

指定要素以外の回り込みを解除する方法は、様々ですが一般的によく使用されている方法は、親要素にclearfixを指定する方法です。

コードではこのようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.clearfix::after {
			content: "";
			display: block;
			clear: both;
		}
		.container{
			width: 500px;
			margin: 0 auto;
		}
	</style>
	<div class="container clearfix">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
	</div>
	<footer class="footer">フッター</footer>


</body>
</html>

「clearfix」を設定しない場合、高さを保つことができず、クラス名が「footer」の要素が「BOX　A」と「BOX　B」に重なって見えなくなります。

Floatとは基本的に以上の記述をマスターすれば使用可能です。

基本的にはFloatでもFlexboxでもできることはだいたい同じですが、Floatにしかできないレイアウトもあります。

次はFloatでしかできないレイアウトを紹介します。

まずは、コードから見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
			.photo{
			width: 300px;
			height: 200px;
			background: #eee;
			margin: auto 0;
			float: left;
		}
	</style>
	<div class="photo"></div>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</body>
</html>

上記のコードでこのように表示されます。

上の画像のレイアウトは雑誌やニュースの記事で見かけたことのあるレイアウトではないでしょうか。

このようなレイアウトは、FlexboxではできずFloatしかできません。

コードは、とてもシンプルで左横にさせたい要素に「float: left;」を適用するだけでOKです。

デザインによっては、このように表示されたい場合もあると思います。

その場合は、floatを使って実装するのがおすすめです。

Flexboxの使い方

次はFlexboxの使い方について説明しましょう。

Flexboxは、Floatと比べるとレイアウトが崩れにくいのが特徴です。

また、プロパティも豊富に用意されているため様々なレイアウトを簡単に実装できるのがメリットです。

まずは一番シンプルなサンプルコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.container{
			display: flex;
			width: 700px;
			background: #eee;
		}
		.boxA{
			width: 200px;
			height: 100px;
			color: #fff;
			background: tomato;
			text-align: center;
		}
		.boxB{
			width: 200px;
			height: 100px;
			color: #fff;
			background: skyblue;
			text-align: center;
		}
	</style>
	<div class="container">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
	</div>
</body>
</html>

上記のコードを表示させると、このようになります。

Flexboxを使って横並びにレイアウトを変更させたい場合はとても簡単です。

親要素に「display: flex;」を記述するだけで子要素が横並びになります。

水平方向の指定は「justify-content」プロパティを使用します。

・flex-start・・・左揃え(初期値)
・flex-end・・・右揃え
・center・・・中央揃え
・space-between・・・最初の子要素を左端に配置、最後の子要素を右端に配置、他の要素は均等に配置
・space-around・・・全ての要素を均等に配置

例えば、親要素の右端に子要素を配置する場合は、親要素に「justify-content: flex-end;」を追記します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.container{
			display: flex;
			width: 700px;
			justify-content: flex-end;
			background: #eee;
		}
		.boxA{
			width: 200px;
			height: 100px;
			color: #fff;
			background: tomato;
			text-align: center;
		}
		.boxB{
			width: 200px;
			height: 100px;
			color: #fff;
			background: skyblue;
			text-align: center;
		}
	</style>
	<div class="container">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
	</div>
</body>
</html>

中央揃えにする場合は、親要素に「justify-content: center;」を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.container{
			display: flex;
			width: 700px;
			justify-content: center;
			background: #eee;
		}
		.boxA{
			width: 200px;
			height: 100px;
			color: #fff;
			background: tomato;
			text-align: center;
		}
		.boxB{
			width: 200px;
			height: 100px;
			color: #fff;
			background: skyblue;
			text-align: center;
		}
	</style>
	<div class="container">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
	</div>
</body>
</html>

最初と最後の要素を両端に配置して、残りの要素を均等に配置する場合、親要素に「justify-content: space-between;」を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.container{
			display: flex;
			width: 700px;
			justify-content: space-between;
			background: #eee;
		}
		.boxA{
			width: 200px;
			height: 100px;
			color: #fff;
			background: tomato;
			text-align: center;
		}
		.boxB{
			width: 200px;
			height: 100px;
			color: #fff;
			background: skyblue;
			text-align: center;
		}
	</style>
	<div class="container">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
	</div>
</body>
</html>

以上がFlexboxの水平方向に関するプロパティの紹介です。

次は垂直方向に関するプロパティを紹介します。

垂直方向を設定するためのプロパティは親要素に「align-items」を記述します。

例えば、親要素に「align-items: flex-end;」を記述した場合、子要素が親要素の一番下に表示されるのが特徴です。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.container{
			display: flex;
			width: 700px;
			height: 300px;
			align-items: flex-end;
			background: #eee;
		}
		.boxA{
			width: 200px;
			height: 100px;
			color: #fff;
			background: tomato;
			text-align: center;
		}
		.boxB{
			width: 200px;
			height: 100px;
			color: #fff;
			background: skyblue;
			text-align: center;
		}
	</style>
	<div class="container">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
	</div>
</body>
</html>

上の画像のように、親要素に「align-items: flex-end;」を記述すると親要素の一番下に子要素が表示されるようになります。

親要素の中央に配置したい場合は、「align-items: center;」と記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.container{
			display: flex;
			width: 700px;
			height: 300px;
			align-items: center;
			background: #eee;
		}
		.boxA{
			width: 200px;
			height: 100px;
			color: #fff;
			background: tomato;
			text-align: center;
		}
		.boxB{
			width: 200px;
			height: 100px;
			color: #fff;
			background: skyblue;
			text-align: center;
		}
	</style>
	<div class="container">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
	</div>
</body>
</html>

また、子要素の順番を変えることもできます。

子要素の順番を変えるときは、子要素に「order」を記述すると順番を変えることが可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.container{
			display: flex;
			width: 700px;
			align-items: center;
			background: #eee;
		}
		.boxA{
			width: 100px;
			height: 100px;
			color: #fff;
			background: tomato;
			text-align: center;
		}
		.boxB{
			width: 100px;
			height: 100px;
			color: #fff;
			background: skyblue;
			text-align: center;
		}
		.boxC{
			width: 100px;
			height: 100px;
			color: #fff;
			background: green;
			text-align: center;
		}
		.boxD{
			width: 100px;
			height: 100px;
			color: #fff;
			background: yellow;
			text-align: center;
		}
		.boxE{
			width: 100px;
			height: 100px;
			color: #fff;
			background: pink;
			text-align: center;
		}
		.boxF{
			width: 100px;
			height: 100px;
			color: #fff;
			background: gray;
			text-align: center;
		}
		.boxG{
			width: 100px;
			height: 100px;
			color: #fff;
			background: orange;
			text-align: center;
		}
	</style>
	<div class="container">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
		<div class="boxC">BOX C</div>
		<div class="boxD">BOX D</div>
		<div class="boxE">BOX E</div>
		<div class="boxF">BOX F</div>
		<div class="boxG">BOX G</div>
	</div>
</body>
</html>

子要素の順番を入れ替える場合、「order」を記述して入れ替えると以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.container{
			display: flex;
			width: 700px;
			align-items: center;
			background: #eee;
		}
		.boxA{
			width: 100px;
			height: 100px;
			color: #fff;
			background: tomato;
			text-align: center;
			order: 3;
		}
		.boxB{
			width: 100px;
			height: 100px;
			color: #fff;
			background: skyblue;
			text-align: center;
			order: 1;
		}
		.boxC{
			width: 100px;
			height: 100px;
			color: #fff;
			background: green;
			text-align: center;
			order: 7;
		}
		.boxD{
			width: 100px;
			height: 100px;
			color: #fff;
			background: yellow;
			text-align: center;
			order: 2;
		}
		.boxE{
			width: 100px;
			height: 100px;
			color: #fff;
			background: pink;
			text-align: center;
			order: 4;
		}
		.boxF{
			width: 100px;
			height: 100px;
			color: #fff;
			background: gray;
			text-align: center;
			order: 6;
		}
		.boxG{
			width: 100px;
			height: 100px;
			color: #fff;
			background: orange;
			text-align: center;
			order: 5;
		}
	</style>
	<div class="container">
		<div class="boxA">BOX A</div>
		<div class="boxB">BOX B</div>
		<div class="boxC">BOX C</div>
		<div class="boxD">BOX D</div>
		<div class="boxE">BOX E</div>
		<div class="boxF">BOX F</div>
		<div class="boxG">BOX G</div>
	</div>
</body>
</html>

WEBサイトでよく見かける横並びの要素などは、Flexboxを使用することで実装できます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
	<style>
		.service{
			margin: 0 auto;
			width: 500px;
		}
		.sectionTtl p{
			text-align: center;
			font-size: 24px;
			margin-bottom: 20px;
		}
		.serviceContentWrapper{
			display: flex;
			justify-content: space-between;
			width: 500px;
			margin: 0 auto;
		}
		.serviceContent{
			width: 100px;
			height: 100px;
			background: #eee;
			border-radius: 50%;
		}
		@media screen and (min-width: 320px) and (max-width: 480px){
			.sectionTtl p{
				margin-bottom: 40px;
			}
			.serviceContentWrapper{
				display: block;
				text-align: center;
			}
			.serviceContent{
				margin: 0 auto;
				margin-bottom: 30px;
			}
		}
	</style>
	<section class="service">
		<div class="sectionTtl"><p>サービス</p></div>
		<div class="serviceContentWrapper">
			<div class="serviceContent"></div>
			<div class="serviceContent"></div>
			<div class="serviceContent"></div>
		</div>
	</section>
</body>
</html>

上記のコードを表示されると、このようになります。

Flexboxで制作したWEBサイトをレスポンシブ化するためには、メディアクエリで「display: flex;」にしていたところを「display: block;」にすることで縦並びに変化します。

また、グローバルナビを制作するときにもFlexboxが便利です。

実際にコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
	<style>
		.header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 660px;
			margin: 0 auto;
		}
		.gNav{
			display: flex;
			justify-content: space-between;
			width: 500px;
		}
		li{
			list-style: none;
		}
		@media screen and (max-width: 500px){
			.header{
				display: block;
				text-align: center;

			}
		}
	</style>
	<header class="header">
		<h1 class="logo">ロゴ</h1>
		<nav class="hearderNav">
			<ul class="gNav">
				<li><a href="">ホーム</a></li>
				<li><a href="">ブログ</a></li>
				<li><a href="">実績</a></li>
				<li><a href="">情報</a></li>
				<li><a href="">お問い合わせ</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>

このようにヘッダーやグローバルナビを制作するときにもFlexboxが便利です。

また、スマホやタブレットのときはロゴを上に表示させてグローバルナビをしたに表示することでレスポンシブ対応することも可能です。

この表示方法も簡単でメディアクエリで「display: block;」と「text-align: center;」を記述するだけで実装できます。

@media screen and (max-width: 500px){
	.header{
		display: block;
		text-align: center;
	}
}

このような記述だけでOKです。

まとめ

いかがでしたか？

Flexboxを使うと簡単に横並びのレイアウトを実装することができ、レスポンシブサイトも簡単に制作できます。

また、Floatにしかできないレイアウトもあるので、使用する状況によって使い分けましょう。

【実例あり】FlexboxやFloatの実践的な使い方

Floatの使い方

Flexboxの使い方

まとめ

コーディングの指示書の書き方と指示出しに使いやすいツールご紹介

WordPress構築時のコーディング指示書＜ディレクトリマップの作り方＞

WEBサイトを守るレンタルサーバー、価格以外の比較の仕方5つ

WordPressの有料テーマを購入する時に気を付けること

WordPress構築時のコーディング指示書＜サイト基本情報編＞