HTML & CSS

レシピ

テキスト

テキストの行揃えを調節する

テキストの左揃え、中央揃え、右揃え、両端揃えに設定する方法を解説します。

この記事のポイント

  • テキストの行揃えを指定する
  • テキストをボックス幅いっぱいに表示する

目次

行揃えを指定する

テキストを揃える位置は通常「左」が多いですが、場合によっては「右揃え」や「中央揃え」で表示したいことがあります。

Wordなどのオフィスソフトでも「行揃え」は指定することが多く、例えば見出しは中央揃え、通常のテキストは左揃え、署名は右揃え、などテキストの性質によって使い分けます。

CSSのtext-alignプロパティを使うと、これと同じことがHTMLでも指定することができます。

HTMLでテキストごとに行揃えを指定している例
HTMLでテキストごとに行揃えを指定している例

左揃え、右揃え、中央揃えを指定する

3つの基本的な行揃えの指定方法を解説します。

左揃え

text-alignプロパティleftを指定することで、テキストを左揃えにすることができます。
初期設定はleftなので通常は指定不要ですが、他の箇所でtext-alignプロパティを指定しているときなど、あえて左揃えを指定したい場合に使用します。

左揃えの指定例
左揃えの指定例

text-alignプロパティの指定例

<style>
section {
	margin: 0 auto 20px;
	padding: 20px;
	width: 460px;
	text-align: left;
	border-radius: 10px;
	border: 2px solid #ccc;
}
</style>
<section>
	<h3>左揃え</h3>
	<p>テキストの左揃えのテストです。初期設定では左揃えになっています。</p>
</section>

右揃え

text-alignプロパティrightを指定するとテキストを右揃えにすることができます。

右揃えの指定例
右揃えの指定例

text-alignプロパティの指定例

<style>
section {
	margin: 0 auto 20px;
	padding: 20px;
	width: 460px;
	text-align: right;
	border-radius: 10px;
	border: 2px solid #ccc;
}
</style>
<section>
	<h3>右揃え</h3>
	<p>右揃えのテストです。<br>改行をしてもテキストは右揃えになります。</p>
</section>

中央揃え

text-alignプロパティcenterを指定するとテキストを中央揃えにすることができます。

中央揃えの指定例
中央揃えの指定例

text-alignプロパティの指定例

<style>
section {
	margin: 0 auto 20px;
	padding: 20px;
	width: 460px;
	text-align: center;
	border-radius: 10px;
	border: 2px solid #ccc;
}
</style>
<section>
	<h3>中央揃え</h3>
	<p>中央揃えのテストです。<br>改行をしてもテキストは中央揃えに。</p>
</section>

両端揃えを指定する

テキストが長くなり、ボックスの幅いっぱいに達するとテキストは自動改行されます。
その時、文字や単語によって改行位置が自動判定されるため、綺麗にボックスの幅いっぱいにならないことがあります。

そういった時にボックス幅いっぱいにテキストを表示したい場合はtext-alignプロパティjustifyを指定し、両端揃えにすることができます。

両端揃えを指定しなかった場合

通常の自動改行

両端揃えを指定した場合

両端揃えを指定

text-alignプロパティの指定例

<style>
section {
	margin: 0 auto 20px;
	padding: 20px;
	width: 460px;
	text-align: justify;
	border-radius: 10px;
	border: 2px solid #ccc;
}
</style>

<section>
	<h3>両端揃え</h3>
	<p>テキストの両端揃えのテストです。テキストのボックスに対して、両端まで表示されるようテキスト幅の最適化を行います。</p>
</section>

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。