HTMLのテキストやブロック要素を右寄せにするCSSの書き方

2019 2/12

2019.02.12

HTMLは基本左寄せなので、左寄せに関しては問題ないです。

しかし、右寄せは自分でCSSを作成しないと右寄せになりません。

それもテキストなどのインライン要素とブロック要素では方法が異なります。

HTML基本サンプル

先にHTMLのサンプルを用意しました。

ピンクの部分が body タグで、水色の部分がブロック要素になります。

そして水色のブロック要素の中にはテキストがあります。

コードは以下の通りになります。

<html>
	<head>
		<meta charset="UTF-8">
		<title>HTMLテスト</title>
		<meta name="description" content="このページの概要を書く">
		<style type="text/css">
		body {
			background-color: #e6b4b4;
		}
		#area {
			width: 300px;
			height: 300px;
			background-color: #b4d7e6;
		}
		</style>
	</head>
	<body>
		<div id="area">
			あいうえお
		</div>
	</body>
</html>

このテキストや水色のブロック要素を右に寄せる方法を次に解説します。

HTMLのテキストを右寄せにするCSSの書き方

テキストは非常に簡単です。

テキストが書かれているエリアのブロック要素に text-align: right; を追加します。

今回の例では #area の要素です。

これでテキストは右寄せになります。

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

<html>
	<head>
		<meta charset="UTF-8">
		<title>HTMLテスト</title>
		<meta name="description" content="このページの概要を書く">
		<style type="text/css">
		body {
			background-color: #e6b4b4;
		}
		#area {
			width: 300px;
			height: 300px;
			background-color: #b4d7e6;
			text-align: right;
		}
		</style>
	</head>
	<body>
		<div id="area">
			あいうえお
		</div>
	</body>
</html>

追加したコードは 14 行目になります。

#area の要素内は右寄せになります。

HTMLのブロック要素を右寄せにするCSSの書き方

次にブロック要素を右寄せにする方法です。

ブロック要素を右寄せにするのは2つ方法があります。

marginを使う方法

一つは margin を使う方法です。

簡単にmarginの説明ですが、要素のまわりに余白を作るプロパティになります。

margin: 0 1; と書くと、0が上と下、1が右と左になります。

margin: 0 1 2 3; と書くと、0が上の余白で1が右、2が下、3が左の余白になります。

※上の例は単位が無いので正常に動作しません。

そして、margin: 0 auto; で上下の余白は無しで左右は自動になり、この場合左右中央になります。

margin: 0 0 0 auto; と書くと右が0になり左が自動になるため右寄せになります。

コードは次の通りです。

<html>
	<head>
		<meta charset="UTF-8">
		<title>HTMLテスト</title>
		<meta name="description" content="このページの概要を書く">
		<style type="text/css">
		body {
			background-color: #e6b4b4;
		}
		#area {
			width: 300px;
			height: 300px;
			background-color: #b4d7e6;
			margin: 0 0 0 auto;
		}
		</style>
	</head>
	<body>
		<div id="area">
			あいうえお
		</div>
	</body>
</html>

14行目に margin: 0 0 0 auto; を追加しただけです。

先ほどのテキストも同じ場所(#area)に書きましたね？

text-alignは指定した要素の中身に反映され、marginは指定した要素自体に反映されます。

なので同じ場所に書いたのですね！

floatを使う方法

僕は個人的にfloatはあまり好きではありません。

floatを使ったらその後にクリアしないと次の要素まで影響を受けてしまうからです。

慣れれば簡単ですが、最初は扱い辛いと思います。

でも float でも出来るので紹介します。

float: right; と書くことで右寄せに出来ます。

<html>
	<head>
		<meta charset="UTF-8">
		<title>HTMLテスト</title>
		<meta name="description" content="このページの概要を書く">
		<style type="text/css">
		body {
			background-color: #e6b4b4;
		}
		#area {
			width: 300px;
			height: 300px;
			background-color: #b4d7e6;
			float: right;
		}
		</style>
	</head>
	<body>
		<div id="area">
			あいうえお
		</div>
	</body>
</html>

これも14行目の #area に書きます。

結果は margin と同じになります。

ただ、この #area の要素の次に何かしらHTML要素を書くのでしたらクリアする必要があります。

クリアする方法については次の記事を参考にしてください。

≫ floatを使ってサイドバーを追加するHTML+CSSの解説