【 text-align 】テキストの配置を自由に変更する(水平方向) ~CSS入門~
このような方にオススメの記事
- CSSの勉強を始めたばかりの方
- テキストを表示したけど配置の変更できない方
- text-alignプロパティの値や使い方を知りたい方
【 text-align 】プロパティで文字の配置を変更する
本記事では、cssで要素中に記述したテキストの配置を水平方向に変更する方法について解説します。
cssプロパティの一つである、テキストの配置をX軸方向（水平方向）に変更する『text-align』についてです。
注意点として、ここで解説するcssプロパティはブロック要素に指定することで、ブロック要素内のテキストの配置を変更するものになります。
contents
text-align について
まず、 X軸方向（水平方向）に変更するtext-alignの値である”right”,”center”,”left” について、例を踏まえながら説明していきます
text-align : right;
下記例のように、p要素（ブロック要素）内のインライン要素が右寄せになります。
See the Pen by Shuhei Nishida (@shu0814) on CodePen.
text-align : center;
下記例のように、p要素（ブロック要素）内のインライン要素が中央寄せになります。
See the Pen by Shuhei Nishida (@shu0814) on CodePen.
text-align : left;
下記例のように、p要素（ブロック要素）内のインライン要素が左寄せになります。
なお、text-alignを指定しなくても初期値では左寄せとなっております。
See the Pen by Shuhei Nishida (@shu0814) on CodePen.
上記のように、right,left,centerを指定することでインライン要素の配置を変更できます。また、下記がtext-alignの値一覧となります。
| texalignの値 | 効果 |
| left | 左端に揃えられる |
| center | 中央に配置される |
| right | 右端に揃えられる |
| start | 始端に揃えられる |
| end | 終端に揃えられる |
| justify | 均等割付.。最後の行はtext-align-lastプロパティの指定がない限り、ラインボックスの始端に揃えられる |
| justify-all | 均等割付。最後の行も強制的に均等割付 |
| match-parent | 親要素の値を継承する |
text-align を使う上での注意点！！
text-alignめちゃくちゃ便利ですね。でも、冒頭でも述べたように、text-alignはブロック要素に指定できるプロパティです。
例えば、aタグ内に記述されたテキスト等、インライン要素に指定しても文字の配置は変更されません。そもそも要素内の配置を指定するものになるので、テキストの長さがそのまま要素の長さになるインライン要素には使えないということになりますね。
この記事では、水平方向の配置の変更について説明したため、次回は垂直方向の配置の変更について解説します！
ありがとうございました。
ABOUT AUTHOR
シュウヘイ
フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。
