左寄せと右寄せ

2014年5月25日：CSS

図を右寄せにしたり左寄せにしたい場合があるかと思います。

ここでは、要素の右寄せ左寄せをCSSで実現する方法を解説します。

floatで浮かせる

CSSにはfloatという設定が存在します。

日本語に訳すと「浮く」というように、要素を浮かせることができます。

floatを説明するため以下の様なHTMLとCSSファイルをつくってみました。

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section>
	<img src="img.png" alt="ロゴ" />
	<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</section>
<section>
	<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</section>
</body>
</html>

【style.css】

section{
	border:solid #FF0000;
}

これをブラウザで見ると

となります。では、この画像を左寄せにして、文字を右へ寄せます。

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
	<img src="img.png" alt="ロゴ" class="img-left">
	<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</section>
<section>
	<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</section>
</body>
</html>

【style.css】

section{
	border:solid #FF0000;
}
.img-left{
	float:left;
}
.img-right{
	float:right;
}

これをブラウザで見ると

となります。画像が左に浮いていることがわかります。これが、floatといわれるゆえんです。

画像を右寄せにしたい場合は、imgタグのクラスをimg-rightにすればいいです。

CSSにimg-rightというクラスで「float:right;」により右に浮かせるようにしていますから。

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
	<img src="img.png" alt="ロゴ" class="img-right">
	<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</section>
<section>
	<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</section>
</body>
</html>

floatを解除する

floatでは、下の要素においても画像を浮き続きています。

後続の要素では浮かない用に設定したいものです。

そこで、登場するのがclearです。

clear:X;

とすれば、floatが解除されます。Xには

left：左寄せを解除
right：右寄せを解除
both：左右両方解除

がはいります。では、以下のようにCSSを書き換えます。

【style.css】

section{
	border:solid #FF0000;
	clear:both;
}
.img-left{
	float:left;
}
.img-right{
	float:right;
}

sectionにclear:bothがあるので、sectionでfloatが解除されます。

ただ、下のsectionでfloatが解除され文字が浮かなくなったのですが、上のsectionではfloatが解除されていないので画像が浮いてはみ出しています。

このはみだしを改善するには、sectionの直後にclearするという方法をとります。

要素の終わりに実行させるCSSを指定するには、afterを利用します。

例えば、CSSを以下のようにします。

section{
	border:solid #FF0000;
	clear:both;
}
section:after{
	content:"最後に実行";
        border:solid #0000FF;
}
.img-left{
	float:left;
}
.img-right{
	float:right;
}

すると

となります。「最後に実行」が追加されています。afterの部分に、contentにより擬似要素というものを付け加えることができるのです。

このafterを利用して、最後にclear:both;を実行すれば、はみ出しを改善できそうです。

ではやってみます。

section{
	border:solid #FF0000;
}
section:after{
	content:"最後に実行";
	border:solid #0000FF;
	clear:both;
}
.img-left{
	float:left;
}
.img-right{
	float:right;
}

実行すると

となります。sectionのclearを抜いてあるので、下のsectionが上にずれてしまっています。

確かに「最後で実行」の部分はclearによりfloat解除されているのですが、「最後に実行」が画像の下まで表示されないと画像の進行をおさえることができません。

「最後に実行」が右端までいかないのは、「最後に実行」はインライン要素だからです。

そこで、

display:block;

という命令を使って、「最後に実行」をインラインからブロックレベルの要素へ変更します。

section{
	border:solid #FF0000;
}
section:after{
	content:"最後に実行";
	border:solid #0000FF;
	clear:both;
	display:block;
}
.img-left{
	float:left;
}
.img-right{
	float:right;
}

すると

となります。予想通りうまくいきました。あとは、最後に実行を消せば

section{
	border:solid #FF0000;
}
section:after{
	content:"";
	border:solid #0000FF;
	clear:both;
	display:block;
}
.img-left{
	float:left;
}
.img-right{
	float:right;
}

となり

がえられます。ついでにボーダーも消せば、

section{
	border:solid #FF0000;
}
section:after{
	content:"";
	clear:both;
	display:block;
}
.img-left{
	float:left;
}
.img-right{
	float:right;
}

となります。これで完成です。

まとめ

以上をまとめると、

要素を寄せるにはfloatを使う
floatを解除するにはclearを使う
afterにより空白要素を追加して、空白要素に対してclearを使ってfloatを解除する
空白要素はdisplay:block;によりブロックレベル要素にして下に回り込ませる

となります。

補足：displayについて

displayによりブロックレベル要素とインライン要素を切り替えることができます。

インライン要素にしたい場合：display: inline;
ブロックレベル要素にしたい場合：display: block;

となります。

著者：安井真人(やすい　まさと)
@yasui_masatoさんをフォロー