text-alignを使って、文字の右寄せ・左寄せ・中央揃えを行う方法
HTMLの文章はデフォルトで左揃えですが、場合によっては文字を中央揃えにしたい場合や右揃えにしたい場合が出てきます。
そのような場合に文字の揃える位置を変えるには、text-alignプロパティを使います。
ちなみに、text-alignは文字だけではなく、あらゆるブロックレベル要素に指定できるので、いろんな場所で使われるプロパティです。
簡単な例
簡単な例を見てみましょう。文書を表示して真ん中揃えにするシンプルな構成です。
<p class="demo01">これは文章です</p>.demo01{
text-align: center;
}ブラウザで表示してみましょう。「これは文章です」という文字が真ん中に表示されれば成功です。
重要な概念
とてもシンプルな「text-align」ですが、覚えておくべき重要な概念が2つあります。
- 「text-align」はブロックレベル要素に指定する
- 「text-align」はブロックレベル要素の中のインライン要素に反映される
text-alignはブロックレベル要素に指定し、その中のインライン要素の位置を変えるプロパティです。
ですので、間違った使い方、例えばインライン要素に直接書いても「無効」と判断されて何も起きないので注意しましょう。
よく使う文字の揃え方
文字の揃え位置は、左揃え、中央、右揃えから選ぶことが出来ます。それぞれ下記のよう書きます。
- 左寄せ…text-align: left;
- 中央…text-align: center;
- 右寄せ…text-align: right;
デフォルトでは左寄せになるので、左寄せの場合はあえて指定する必要はありません。
例をみてみましょう。
<p class="demo01">これは文章です</p>
<p class="demo02">これは文章です</p>
<p class="demo03">これは文章です</p>.demo01{
text-align: left;
}
.demo02{
text-align: center;
}
.demo03{
text-align: right;
}これをブラウザで表示するとそれぞれ、左揃え、中央、右揃えがどのようになるか雰囲気がつかめると思います。
特殊な揃え方
そのほかの文字の揃え方です。あまり使うことがないので、無理に覚える必要はありません。
- justify…両端揃え。普通の文書は結構右端がガタガタになりますが、それを綺麗にするために使います。
- start…ボックスの先頭に寄せます。
- end…ボックスの末尾に寄せます。
- matchparent…親要素の値を継承します。
※start, end, matchparentはIEやEdgeで未対応の場合があります。
ここで紹介したパターンはほとんど使ったことがありません。頭の片隅に入れて置く程度で問題ないでしょう。
画像を揃えることも出来る
テキストと同じように、画像やリストなども「text-align」を使って揃え位置を調整することが出来ます。
例を見てみましょう。
<div class="demo-box01">
<img src="https://images.unsplash.com/photo-1553336973-3dddedf05907?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" width="200px">
</div>
.demo-box01{
text-align: right;
}このようにすることで、画像を右に寄せることができます。
注意点としては、text-alignはimg要素そのものではなく、img要素を囲むブロックレベル要素（p要素 や div要素）に設定するようにして下さい。
text-alignが効かない理由
例えば下記のようにimgタグに直接スタイルを適用しても、無効のため反応しません。
<div class="demo-box01">
<img src="https://images.unsplash.com/photo-1553336973-3dddedf05907?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" width="200px">
</div>.demo-box01 img{
text-align: right;
}前述したとおり「text-align」には2つの重要な条件があります。
- 「text-align」はブロックレベル要素に指定する
- 「text-align」はブロックレベル要素の中のインライン要素に反映される
img要素はインライン要素なので直接「text-align」を指定しても無効になってしまいます。「text-align」を有効にするには、divなどのブロックレベル要素で囲い、そのブロックレベル要素にCSSを当てる必要があるのです。
まとめ
- HTMLの文章はデフォルトで左揃え
- 文字の揃える位置を変えるには、text-alginを使う
- text-alignはブロックレベル要素の中の、インライン要素の位置を指定するプロパティ
- インライン要素に直接スタイルを当てても効かない
- 画像やリストなども「text-align」を使って揃え位置を調整することが出来る
