こんにちは、Autumn（オータム）です。
「文章を左右や中央にキレイに揃えたい！」「text-alignって何それ美味しいの？」「てゆうか眠くて勉強どころじゃない。。」
そんなプログラミング初心者のために、今回はWEB制作でよく使用する「text-align」というCSSプロパティの解説をします。
今回の記事を参考に、文章や写真のレイアウトを自由自在に操っちゃいましょう！
今回もカンタンな実例を交えて解説していきます。ソースコードも載せますので、ぜひコピペしたり、真似して書いてみて勉強してください！
CSSの重要プロパティ「text-align」の使い方
「text-align」は文章や写真を左右に動かしたり、中央合わせにしたりすることができるCSSプロパティです。
配列する時に使用する、flexboxの「justify-content」と似たような効果ですね。flexboxがよくわからない！という方は、こちらの記事で解説してますのでよかったらどうぞ。
代表的な値
基本的に使用する値は下記のものを覚えておけば、ほぼ問題ないです。
right：右揃えにする
center：中央揃えにする
justify：文章を両端揃えにする
「justify」だけ使い方が他と少し異なるため、別で解説します。
また、注意するポイントとして「ブロック要素にしか適用できない」という特徴があります。
imgタグやaタグなどのインライン要素に適用したい場合は、インラインブロック要素に変換する必要がありますので、必ず覚えておいてください！
ちなみに、ブロック要素・インライン要素って何？って方はこちらをどうぞ。
【HTML・CSS勉強】ブロック要素とインライン要素の違いまとめ
基本的な動作
「left・right・center」はその名の通り、要素を水平方向に移動させることができます。
下記のように、3つのボックスの中のテキストを「text-align」を使って移動させてみます！
［HTML］
［CSS］
それぞれのクラスに、「text-align」を記述します。
すると、下記のようにテキストが移動しました！
文章の両端を揃える「text-align: justify;」
先ほどの値に比べると使用頻度は少ないですが、文章量の多い部分のレイアウトを作る時に「text-align: justify;」は使うことがあります。
下記のように、文章を折り返してまとめる場合、右端が揃っていないことがあります。
［HTML］
［CSS］
この子要素に「text-align: justify;」を追加してみると、下記のように右端もキレイに揃うよう調整してくれます。
文章を一つのブロックとしてまとめることができるので、見た目のも整って見えますね！
デザインデータでこのような形になっていることも多いので、覚えておくと便利です。
今回のポイントおさらい＆まとめ
それでは、今回のポイントをおさらいします！
・「text-align: justify;」で文章の両端を揃えることができる
・ブロック要素にのみ適用可能
「text-align」は本当によく使うCSSプロパティですので、使い方をしっかり覚えておきましょう！
また、今後もHTML・CSSの基本解説記事を随時更新していきますので、チェックしてみてください。
その中でもよく見られている記事のリンクも貼っておきますので、よかったら参考にしてみてください！
【初心者向け】お金をかけずにHTML・CSSの基礎を学ぶ勉強手順
【初心者向け】Javascriptを実際に使えるレベルになるまでの勉強手順を解説【オススメ動画5選】
読んでいただき、ありがとうございました！
