text-alignで文章の揃え位置や均等割付を指定する【CSS】

text-alignは文章の揃える位置や均等割付を指定するためのプロパティ。

以下のような値を指定することができます。

start	行の開始位置に揃える
end	行の終了位置に揃える
left	左揃えにする
right	右揃えにする
center	中央揃えにする
justify	均等割付にする
match-parent	親要素の値を継承する

「left,center,right」はよく聞く値ですが、均等に割付できる「justify」という値を指定できたり、「start」や「end」で行の開始もしくは終了位置で揃えることも指定できます。

「match-parent」は親要素の値を継承するというもの。もし親要素の値がstartだったらleftを適用し、endだったらrightを適用します。

text-justify

text-alignプロパティで「justify」を指定した場合、text-justifyプロパティで文章の均等割付の形式を指定することができます。

text-justifyプロパティでは以下のような値が指定できます。

auto	ブラウザが自動的に適切な値を指定
none	形式の指定なし
inter-word	単語の間隔を広げて調整
distribute	単語と文字の間隔を広げて調整

「inter-word」を指定すると、単語の間隔を調整して均等割付でき、「distribute」を指定すると単語と文字の間隔を調整して均等割付します。

「distribute」は日本語文章の均等割付に合っています。

text-align-last

text-alignプロパティで文章の行揃えの位置を指定するといいましたが、最終行の揃え位置を指定するときには、text-align-lastプロパティを使います。

text-align-lastプロパティで指定できる値は以下のようなものがあります。

auto	text-alignの値がjustify以外はstartが適用
start	行の開始位置に揃える
end	行の終了位置に揃える
left	最終行を左揃えにする
right	最終行を右揃えにする
center	最終行を中央揃えにする
justify	最終行を均等割付にする

text-alignプロパティはよく使うと思いますが、それに加えてtext-justifyプロパティやtext-align-lastプロパティといったものもtext-alignプロパティに関係があるので、覚えておくといいかもしれません。