左寄せと右寄せ

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

ここでは、要素の右寄せ左寄せを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;
}

これをブラウザで見ると

実行結果2

となります。画像が左に浮いていることがわかります。これが、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>

実行例3

floatを解除する

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

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

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

clear:X;

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

  1. left:左寄せを解除
  2. right:右寄せを解除
  3. 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で追加

となります。「最後に実行」が追加されています。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;
}

すると

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:"";
	clear:both;
	display:block;
}
.img-left{
	float:left;
}
.img-right{
	float:right;
}

完成図

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

 

まとめ

以上をまとめると、

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

となります。

 

補足:displayについて

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

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

となります。

著者:安井 真人(やすい まさと)