バナー画像

HTMLにはFloatというプロパティが用意されています。

Webサイトでカラム型のサイトを見かけない日はないと思いますが、このカラム型を作成するにはFloatプロパティを使用します。

Web制作では非常によく使うプロパティですので、ぜひこの記事で理解しておきましょう。

Floatとは

Floatプロパティは、指定した要素を回り込ませるためのプロパティです。

文章で説明するとちょっとわかりにくいかもしれませんので、図で説明します。

まず以下の図を見てください。

これは回り込みをしていない状態です。

通常、CSSなどでプロパティを指定せずにコーディングするとこのように全て縦に並んでいきます。

では次の図を見てみましょう。

これがテキストを回り込ませた状態です。

Floatプロパティを使うと、このように図やテキストを回り込ませて横並びのレイアウトが作れるようになります。

Floatプロパティの使い方

それでは早速このFloatプロパティの使い方について見ていきましょう。

まずFloatはCSS設定値になっているため、通常は<head>タグの中や外部CSSファイルに記述します。

ここではわかりやすくするために外部CSSは使わず、<head>タグ内に記述する方法で説明します。

基本的には回り込ませたい要素を指定し、設定していきます。

<head>
<style>
	セレクタ {
		float: 値(left or right);
	}
</style>
</head>

Floatプロパティはこのように指定します。

値にはleft , rightの2つのうちどちらかが入り、leftなら指定した要素が左側に、rightなら指定した要素が右側に寄せられ、その逆側に別の要素が回り込みます。

これも文章では解り難いと思いますので、図を使って説明していきます。

では実際に以下のコードを基に図を見てみましょう。

<head>
<style>
	div {
		width: 200px;			/* 幅の指定 */
		height: 200px;			/* 高さの指定 */
		margin: 10px;			/* 要素の余白 */
	}
	
	.floating_box {
		background-color: red;	/* 背景色 */
	}
	
	.box {
		background-color: skyblue;	/* 背景色 */
	}
</style>
</head>
<body>
	<div class="floating_box"></div>
	<div class="box"></div>
</body>

このコードをブラウザで表示させると次の図の様に表示されます。


ではこのコードにFloatプロパティを設定してみましょう。

<head>
<style>
	div {
		width: 200px;			/* 幅の指定 */
		height: 200px;			/* 高さの指定 */
		margin: 10px;			/* 要素の余白 */
		float: left;			/* Floatプロパティ */
	}
	
	.floating_box {
		background-color: red;	/* 背景色 */
	}
	
	.box {
		background-color: skyblue;	/* 背景色 */
	}
</style>
</head>
<body>
	<div class="floating_box"></div>
	<div class="box"></div>
</body>

divに”Float: left”を指定した場合には以下の図のように表示されます。

またdivに”float: right”を指定した場合には次のように表示されます。

レイアウトが崩れてしまう原因

ここまではFloatプロパティの基本的な部分について解説してきました。

しかし、Floatではよく「Floatを使ったらレイアウトがグチャグチャになった」という悩みを耳にします。

そうならないためにももう少しFloatについて勉強しておきましょう。

まずレイアウトが崩れる原因はFloatの解除を忘れていることにあります。

図を使って説明すると非常に簡単に理解してもらえると思いますので、図を見てください。

Floatプロパティを使うと、その要素は浮いている状態と同一になります。

そうすることで回り込みが可能になるのですが、この状態のままだとFloatプロパティを指定している要素の親要素は該当要素の高さを認識できなくなります。

親要素の中にFloatされている要素しかない場合には、高さがゼロとなり、次のdivが親要素の始点まで上がってくるため、レイアウトがずれてしまうのです。

レイアウト崩れを防ぐ方法

それではFloatはどのように使うべきかという部分について解説していきます。

まずFloatを解除する方法にはいくつかありますが、制作現場で最もよく使われている方法を紹介します。

これはClearfixと呼ばれる方法で、イメージ的には「Floatで浮いた要素の周りにバリアを作る」と思っていただければ良いでしょう。

CSSに以下の指定をすることで、Floatを簡単に解除でき回り込みを防ぐことが出来ます。

ClearfixでFloatを解除する

まず<style>タグに以下のようにCSSを指定します。

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

準備はこれだけです。

次にFloatプロパティを指定している要素の親要素にこの”.clearfix”クラスを持たせればそれだけでFloatが解除され回り込みを防ぐことが出来ます。

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

<style>
	div > div {
		width: 200px;			/* 幅の指定 */
		height: 200px;			/* 高さの指定 */
		margin: 10px;			/* 要素の余白 */
	}
	
	.floating_box,
	.box {
		float: left;
	}
	
	.floating_box {
		background-color: red;		/* 背景色 */
	}
	
	.box {
		background-color: skyblue;	/* 背景色 */
	}
	
	.test_box {
		width: 420px;
		background-color: darkgreen;	/* 背景色 */
	}
</style>

<body>
	<div>
		<div class="floating_box"></div>
		<div class="box"></div>
	</div>
	<div>
		<div class="test_box"></div>
	</div>
</body>

表示結果

Floatをクリアしないまま次のdivを記述するとこのようにレイアウトが崩れて表示されてしまいます。

では次のコードを見てください。

<style>
	div > div {
		width: 200px;			/* 幅の指定 */
		height: 200px;			/* 高さの指定 */
		margin: 10px;			/* 要素の余白 */
	}
	
	.floating_box,
	.box {
		float: left;
	}
	
	.floating_box {
		background-color: red;		/* 背景色 */
	}
	
	.box {
		background-color: skyblue;	/* 背景色 */
	}
	
	.test_box {
		width: 420px;
		background-color: darkgreen;	/* 背景色 */
	}

	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}
</style>

<body>
	<div class="clearfix">
		<div class="floating_box"></div>
		<div class="box"></div>
	</div>
	<div>
		<div class="test_box"></div>
	</div>
</body>

表示結果

今度は<style>タグ内に”.clearfix”を追加記述し、先頭の親要素にこのセレクタを追加してみました。

Webブラウザで確認するとレイアウトが崩れることなく意図した表示になっています。

まとめ

いかがでしたか?

今回はFloatについて解説してみました。

Floatは非常によく使うプロパティですが、レイアウトが崩れる一番の原因となるプロパティでもあります。

もしコーディングでレイアウトが崩れてしまったなら、まずはFloatから見直してみると直ることが多いです。

またFloatに対して知識が浅い方に多く見られる悩みでもありますので、この記事をしっかり読んでFloatの知識を完璧にしてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。