CSS floatとは？～要素を横並びにする方法～

css float とは

Floatプロパティの図解

css　floatとはコンテンツを横並びにする指定するCSSのプロパティです。floatを使う事によってコンテンツの位置を細く指定することができます。

左寄せ横並びにしたい場合、Content1~3に対してそれぞれfloat-leftを指定すればContent1~3が左寄せに横並びになります。

右寄せ横並びにしたい場合、Content1~3に対してそれぞれfloat-rightを指定すればContent1~3が右寄せに横並びになります。

floatプロパティの指定の仕方

imgタグにfloat:rightを適用

HTMLファイルで横並びにしたいコンテンツを<body>タグ内に明記します。ここではコンテンツとして犬の写真を<img>タグで<img src="dog.jpg">と指定しています。写真のデータ”dog.jpg”はあらかじめカレントディレクトリ（同じ階層内）に保存しておきます。

CSSファイルにて、<img>タグに対して「float: right;」を指定します。WebブラウザでHTMLファイルを確認すると外観のように三つの犬の写真が右寄せ横並びで表示されます。

: CSS overflowとは？はみ出し部分の表示を指定する方法

続きを見る

floatの書き方

floatの指定の基本

float : left ;

コンテンツを左寄りに横並びで表示する。

float : right;

コンテンツを右寄りに横並びで表示する。

float : none;

回り込みをしない。デフォルトではnoneが指定されている。

左寄せfloat:left;

実際のCSSファイルでHTMLの<Section>タグの<div>要素に対して"float:left;"を指定していきます。

表示例

float:leftプロパティ表示例

コンテンツが三つ左寄せで横並びに並んでおり、”Content１””Content2”"Content3"という文字を表示されています。
Content1~3の背景色を表示されています。Content1の背景色は"lightskyblue"[#83cefa]。Content2の背景色は"blanchedalmond"[#ffebcd]。Content3の背景色"plum"[#dda0dd]。
Content1~3の横幅を100pxになっています。
Content1~3の高さを50pxになっています。

上記例のソースコード

HTMLコード

<!DOCTYPE html>
　<head> 
　　<meta charset="utf-8">
　　 <link rel="stylesheet" type="text/css" href="style.css"> 
　　　<title>Owlview</title>
 </head> 
　<body> 
　　<section> 
　　　　<div class="content1">Content1</div> 
　　　　<div class="content2">Content2</div> 
　　　　<div class="content3">Content3</div> 
　　</section>
　　</body>
</html>

<!DOCTYPE html>

　<head>

　　　<title>Owlview</title>

</head>

　<body>

　　　　<div class="content1">Content1</div>

　　　　<div class="content2">Content2</div>

　　　　<div class="content3">Content3</div>

　　</section>

　　</body>

</html>

CSSコード

 .content1{
	background-color : #87cefa;
	width: 100px;
	height: 50px;
	float:  left;
}
	
.content2{
	background-color : #ffebcd;
	width: 100px;
	height: 50px;
	float:  left;
}
	
.content3{
	background-color : #dda0dd;
	width: 100px;
	height: 50px;
	float:  left;
}

.content1{

background-color : #87cefa;

width: 100px;

height: 50px;

float: left;

}

.content2{

background-color : #ffebcd;

width: 100px;

height: 50px;

float: left;

}

.content3{

background-color : #dda0dd;

width: 100px;

height: 50px;

float: left;

}

HTMLファイルの<body>タグ内に<section>タグ<div>タグで”Content１””Content2”"Content3"という文字を表示する。それぞれクラスを"content1""Content2""Content3"と指定する。
CSSファイルでbackground-colorでContent1~3の背景色を指定する。Content1の背景色は"lightskyblue"[#83cefa]、Content2の背景色は"blanchedalmond"[#ffebcd]、Content3の背景色"plum"[#dda0dd]に指定する。
CSSファイルでContent1~3の横幅をwidthで100pxに指定する。
CSSファイルでContent1~3の高さをheightで50pxに指定する。
CSSファイルでContent1~3が左寄せで横並びに表示するfloat:leftで指定する。

右寄せfloat:right;

表示例

float:right;で右寄せのコンテンツに指定

コンテンツが三つ右寄せで横並びに並んでおり、”Content１””Content2”"Content3"という文字を表示されています。
Content1~3の背景色を表示されています。Content1の背景色は"lightskyblue"[#83cefa]。Content2の背景色は"blanchedalmond"[#ffebcd]。Content3の背景色"plum"[#dda0dd]。
Content1~3の横幅を100pxになっています。
Content1~3の高さを50pxになっています。

上記例のソースコード

HTMLコード

<body> 
　<section> 
　　<div class="content1">Content1</div> 
　　<div class="content2">Content2</div> 　　　　
　　<div class="content3">Content3</div> 
　</section> 
</body>

<body>

　　<div class="content1">Content1</div>

　　<div class="content2">Content2</div> 　　　　

　　<div class="content3">Content3</div>

　</section>

</body>

CSSコード

 .content1{
	background-color : #87cefa;
	width: 100px;
	height: 50px;
	float:  left;
}	
.content2{
	background-color : #ffebcd;
	width: 100px;
	height: 50px;
	float:  left;
}	
.content3{
	background-color : #dda0dd;
	width: 100px;
	height: 50px;
	float:  left;
}

.content1{

background-color : #87cefa;

width: 100px;

height: 50px;

float: left;

}

.content2{

background-color : #ffebcd;

width: 100px;

height: 50px;

float: left;

}

.content3{

background-color : #dda0dd;

width: 100px;

height: 50px;

float: left;

}

HTMLファイルの<body>タグ内に<section>タグ<div>タグで”Content１””Content2”"Content3"という文字を表示する。それぞれクラスを"content1""Content2""Content3"と指定する。
CSSファイルでbackground-colorでContent1~3の背景色を指定する。Content1の背景色は"lightskyblue"[#83cefa]、Content2の背景色は"blanchedalmond"[#ffebcd]、Content3の背景色"plum"[#dda0dd]に指定する。
CSSファイルでContent1~3の横幅をwidthで100pxに指定する。
CSSファイルでContent1~3の高さをheightで50pxに指定する。
CSSファイルでContent1~3が右寄せで横並びに表示するfloat:rightで指定する。

float:noneの指定

float:none;を指定した場合は、配置の指定は行われないのでコンテンツの下に回り込みます。HTMLのコンテンツはデフォルトでfloat:noneが適用されています。パソコンとスマホなどのスクリーンが異なるサイズへのレスポンシブ対応する際にfloat:noneが使われます。

表示例

float:noneを指定した場合

コンテンツが三つ縦並びに並んでおり、”Content１””Content2”"Content3"という文字を表示されています。
Content1~3の背景色を表示されています。Content1の背景色は"lightskyblue"[#83cefa]。Content2の背景色は"blanchedalmond"[#ffebcd]。Content3の背景色"plum"[#dda0dd]。
Content1~3の横幅を100pxになっています。
Content1~3の高さを50pxになっています。

上記例のソースコード

HTMLコード

<body>
<section>
　<div class="content1">Content1</div>
　<div class="content2">Content2</div>
　<div class="content3">Content3</div>
</section>
</body>

<body>

　<div class="content1">Content1</div>

　<div class="content2">Content2</div>

　<div class="content3">Content3</div>

</section>

</body>

CSSコード

 .content1{
	background-color : #87cefa;
	width: 100px;
	height: 50px;
	float:  none;
}
	
.content2{
	background-color : #ffebcd;
	width: 100px;
	height: 50px;
	float:  none;
}
	
.content3{
	background-color : #dda0dd;
	width: 100px;
	height: 50px;
	float:  none;
}

.content1{

background-color : #87cefa;

width: 100px;

height: 50px;

float: none;

}

.content2{

background-color : #ffebcd;

width: 100px;

height: 50px;

float: none;

}

.content3{

background-color : #dda0dd;

width: 100px;

height: 50px;

float: none;

}

HTMLファイルの<body>タグ内に<section>タグ<div>タグで”Content１””Content2”"Content3"という文字を表示する。それぞれクラスを"content1""Content2""Content3"と指定する。
CSSファイルでbackground-colorでContent1~3の背景色を指定する。Content1の背景色は"lightskyblue"[#83cefa]、Content2の背景色は"blanchedalmond"[#ffebcd]、Content3の背景色"plum"[#dda0dd]に指定する。
CSSファイルでContent1~3の横幅をwidthで100pxに指定する。
CSSファイルでContent1~3の高さをheightで50pxに指定する。
CSSファイルでContent1~3がコンテンツの位置を指定しないfloat:noneで指定する。

: CSSのidとclassとは？違いを分かりやすく説明

続きを見る

floatによる回り込みを解除する方法

floatによる回り込みの図解

Content1にのみfloat:leftを適用した場合、Content2,Content3がContent1の右側に回り込んでしまう。Content1に指定したfloat:leftの影響をContent2,3が受けてします。ここでは、このような現象をfloatによる回り込みと言います。

floatによる回り込みを解除する事も可能です。回り込みが起きた時実際どのような外観になるかHTMLコード、CSSコードを使って確認し解除方法を探っていきたいと思います。

回り込みの例

回り込みをする状況としては様々なケースが考えられます。今回は、画像のコンテンツに対してテキストが回り込んでしまう状況を想定してfloatによる回り込みを再現してみました。

表示例

floatによる回り込みの再現

画像のコンテンツが左側にあり、テキストコンテンツが画像の右側に回り込んでいるのが分かります。

上記例のソースコード

HTMLコード

<body>
 <img src="dog.jpg" title="犬の写真">
  <p>こんにちは、僕の名前はナチョー。チャームポイントは大きな耳と大きな目です。小柄だけど走るのはとても得意だよ。僕は朝昼晩お散歩に行くんだ。</p> 
</body>

<body>

<p>こんにちは、僕の名前はナチョー。チャームポイントは大きな耳と大きな目です。小柄だけど走るのはとても得意だよ。僕は朝昼晩お散歩に行くんだ。</p>

</body>

CSSコード

img{
	float: left;
	}

img{

float: left;

}

HTMLコードでは、画像挿入する<img src>タグでファイル指定し、段落<p>タグで文章指定しています。CSSコードで画像に対してfloat: leftを指定しています。<p>タグでは何も指定していません。このような場合、表示例のように画像の右側から<p>タグの文章が表示されます。

解除する方法

floatによる回り込みを解除するには、clearプロパティと呼ばれるものを使う事によって解除する事ができます。

clearプロパティ

clearプロパティの指定方法

claarのプロパティ指定	説明
clear : both;	両側に回り込むのを解除する
clear : right;	右側に回り込むのを解除する
clear : left;	左側に回り込むのを解除する
clear : none;	回り込みの解除をしない

表示例

上記例のソースコード

HTMLコード

 <body>
   <img src="dog.jpg" title="犬の写真">
  　<p>こんにちは、僕の名前はナチョー。チャームポイントは大きな耳と大きな目です。小柄だけど走るのはとても得意だよ。僕は朝昼晩お散歩に行くんだ。</p> 
 </body>

<body>

</body>

CSSコード

img{
   float: left;
}
p{
   clear: both;
}

img{

float: left;

}

clear: both;

}

段落<p>タグに対してclear: bothを指定しています。clear:bothを指定する事により文章が画像の横に回りこまず画像の下に表示される。

: CSS marginとpaddingとは？〜CSSで余白を作る方法〜

続きを見る

まとめ

floatのまとめ

floatとclearプロパティ	説明
float : left ;	コンテンツを左寄りに横並びで表示する
float : right;	コンテンツを右寄りに横並びで表示する
float : none;	回り込みをしない。デフォルトではnoneが指定されている
clear : both;	両側に回り込むのを解除する
clear : right;	右側に回り込むのを解除する
clear : left;	左側に回り込むのを解除する
clear : none;	回り込みの解除をしない

CSS floatとは？～要素を横並びにする方法～

css float とは

floatプロパティの指定の仕方

CSS overflowとは？はみ出し部分の表示を指定する方法

floatの書き方

左寄せfloat:left;

表示例

上記例のソースコード

右寄せfloat:right;

表示例

上記例のソースコード

float:noneの指定

表示例

上記例のソースコード

CSSのidとclassとは？違いを分かりやすく説明

floatによる回り込みを解除する方法

回り込みの例

表示例

上記例のソースコード

解除する方法

clearプロパティ

表示例

上記例のソースコード

CSS marginとpaddingとは？〜CSSで余白を作る方法〜

まとめ