今回は、テキスト要素を左揃え・中央揃え・右揃えにするtext-alignの使い方をご紹介します。
テキストやブロック要素を左揃え・中央揃え・右揃えにする方法
テキスト要素を左揃え・中央揃え・右揃えにするtext-align
それでは、さっそくtext-alignの使用例を紹介します。
※使用例の大きさは、『0.5×』にして参照してください。
See the Pen qBZKJVV by ryu (@ryu-no-sss) on CodePen.
このように、text-alignは、
left・center・right
の3つの値を使って文字を揃えます。
使用例の『text-align: left;』に関しては、
標準で、左揃えになっているため基本は、記載しなくても大丈夫ですが、
使用例のボックスで囲まれている要素のように、
一部のテキストだけ左に寄せたい場合などは、
『text-align: left;』を使いましょう！
ブロック要素を左揃え・中央揃え・右揃えにするmargin
まずは、marginを使った使用例をご覧ください。
※使用例の大きさは、『0.25×』にして参照してください。
See the Pen LYNrgar by ryu (@ryu-no-sss) on CodePen.
左揃え
1つ目の左揃えのブロック要素は、
標準で左揃えになっているため特に設定することはありません。
中央揃え
2つ目の中央揃えに関しては、少し複雑なため順を追って説明します。
①margin-left: 50%;で中央に配置する。
※使用例の大きさは、『0.25×』にして参照してください。
See the Pen wvGXQOd by ryu (@ryu-no-sss) on CodePen.
デモを見ていただくと、margin-left: 50%;だけでは、
綺麗に中央揃えにはなっていません。
これは、ブロック要素の左端が、中央（以下の画像の赤い線）に、配置されるためです。
②transform: translate(-50%);で中央に配置する。
transform: translate(-50%);で、ブロック要素を左にずらすことで、
中央揃えにすることが出来ます。
※使用例の大きさは、『0.25×』にして参照してください。
See the Pen LYNrgar by ryu (@ryu-no-sss) on CodePen.
右揃え
3つ目の右揃えは、margin-left: auto;にすることで、
画面幅いっぱいの余白に対して、marginをとるため、
右揃えになります。
まとめ
・テキスト要素は、text-alignで、揃える。
・ブロック要素は、marginで、揃える。
今回は、テキストやブロック要素を左揃え・中央揃え・右揃えにする方法について解説しました。
他にも、実戦でよく使うCSSコード（テキスト要素）を以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
