【text-alignの使い方】要素を寄せる位置を変更する方法

「テキストを中央や右に寄せたいけどうまく効かない」というのは、CSSを始めたばかりの方によくある悩みです。ここでつまづいてしまったり、なぜ効くのかわからないまま使用している方も多くいらっしゃいます。text-alignが効かないのは条件を満たしていないからですが、この条件は実はそれほど難しくありません。今回は、その悩みを解決するtext-alignプロパティについて解説します。各値ごとに詳しく記載しているので、ぜひご一読ください。

text-alignプロパティとは

text-alignプロパティとは、要素を寄せる位置を変更するプロパティで、水平方向に要素を移動させることが可能です。WordやExcelなどにある、テキストを「左揃え」「中央揃え」「右揃え」する機能と同じ動きをします。ただし、垂直方向の位置は変更することができません。

text-alignプロパティが効かない原因と正しい設定方法

text-alignプロパティはブロックレベル要素に指定し、そのブロック要素内のインライン要素の位置を変更するプロパティです。text-alignプロパティが効かない原因のほとんどは、インライン要素に直接指定してしまっています。

WebMedia参考記事

【基礎知識】ブロックレベル要素・インライン要素の性質と違い

https://www.itra.co.jp/webmedia/block-inline-difference.html

CSSで装飾をする際に、指定した要素を思い通りに変更できない経験をしたことはありませんか？その原因の1つとして、ブロック...

例を元に確認してみましょう。まず以下のような記述をして、テキストを表示します。

See the Pen vYLxjaL by ITRA (@ITRA) on CodePen.

インライン要素を指定できるように、ブロックレベル要素のpタグ内に、インライン要素であるspanタグで囲っています。 ではいきなりですが、要素を中央寄せするtext-align: centerをpタグとspanタグにそれぞれ指定してみましょう。

まずは以下の記述でpタグに、text-alignプロパティを指定します。

See the Pen RwrpyYa by ITRA (@ITRA) on CodePen.

テキストが中央寄せになりました。pタグにtext-align: centerを指定することで、pタグ内のテキストの位置が変わったことが分かります。

ではspanタグにtext-align: centerを指定するとどうなるのでしょうか。以下の記述をして確かめてみましょう。

See the Pen KKVWRxo by ITRA (@ITRA) on CodePen.

テキストが中央寄せになっていません。以上のように、text-alignプロパティはブロック要素に対して指定する必要があります。

それでは、次の項目から各値の解説していきます。

text-alignプロパティの使い方

text-align: left

text-align: leftは、要素を左寄せにする値です。以下のような記述をしてテキストを左に寄せます。

See the Pen VwepxEL by ITRA (@ITRA) on CodePen.

text-align: right

text-align: rightは、要素を右寄せにする値です。以下のような記述をしてテキストを右に寄せています。

See the Pen WNrpJaX by ITRA (@ITRA) on CodePen.

text-align: center

text-align: centerは、要素を中央寄せにする値です。以下のような記述をしてテキストを中央に寄せます。

See the Pen abdJGRr by ITRA (@ITRA) on CodePen.

text-align: justify

text-align: justifyは、親要素の幅いっぱいに要素が並ぶように、単語間を均等にして配置(以下、均等割付)する値です。この際、最終行は均等割付になりません。

以下のような記述をしてテキストを均等割付します。

See the Pen XWXMqGG by ITRA (@ITRA) on CodePen.

また、日本語にtext-align: justifyを適用すると、半角文字などで生じる各行のズレを修正し、文章の両端を揃えます。

See the Pen OJMpZrm by ITRA (@ITRA) on CodePen.

最終行を均等割付にする text-align-last

text-align: justifyでは、最終行を均等割付にすることができませんでした。そこで、text-align-lastというプロパティを使用することで、最終行も均等割付にすることができます。

プロパティ名からわかる通り、要素の最後の行の配置の仕方を変更できます。使用できる値はtext-alignプロパティと同じくright、left、center、justify等です。では、text-align: justifyで使用した記述に、text-align-last: justifyを追加してみましょう。

See the Pen YzwZLBw by ITRA (@ITRA) on CodePen.

最終行も均等割付になりました。

まとめ

text-alignプロパティの使い方はご理解いただけたでしょうか。Webデザインで頻繁に使用するプロパティなので、実際の動作を確認しながら使い方を覚えていきましょう。