どうも！ニシドラ(@nishidorablog)です。
この記事では、テキストを揃えるときに使うtext-alignプロパティについて解説します。
text-alignプロパティとは、テキストや画像の位置を指定するときに使うプロパティです。
text-alignプロパティとはどんなプロパティなのかや指定する値とその使い方、注意点について解説していきます。
当ブログ(ニシドラブログ)では、他にもCSSの使い方について解説をしています。
text-alignプロパティとは
「text-alignプロパティ」を指定することで、テキストや画像の位置を変えることができます。
指定する値は主に4種類で「left」「right」「center」「justify」です。
次の項で、それぞれの値について解説します。
text-alignプロパティで指定する値と使い方
左に揃える「left」
テキストを左に揃える場合は、値に「left」を指定します。
<p>左揃えにするにはtext-alignプロパティでleftを指定します。</p>
p { text-align: left }
ブラウザで表示させると上画像のようになります。
テキストが左に揃っています。
右に揃える「right」
テキストを右に揃える場合は、値に「right」を指定します。
<p>右揃えにするにはtext-alignプロパティでrightを指定します。</p>
p { text-align: right }
ブラウザで表示させると上画像のようになります。
改行が右はじからされています。
中央に揃える「center」
テキストを中央に揃える場合は、値に「center」を指定します。
<p>中央揃えにするにはtext-alignプロパティでcenterを指定します。</p>
p { text-align: center }
ブラウザで表示させると上画像のようになります。
改行が右はじからされています。
両端に揃える「justify」
テキストを両端に揃える場合は、値に「justify」を指定します。
<p>中央揃えにするにはtext-alignプロパティでcenterを指定します。</p>
p { text-align: center }
ブラウザで表示させると上画像のように、きれいにテキストを両端で揃えることができます。
上画像の左には「justify」を、右には「left」を指定しています。
leftを指定した右の文章は右端がガタガタになっていて揃っていません。
文章をきれいに見せたいときはjustifyを指定しましょう。
text-alignプロパティを使うときの注意点
text-alignプロパティで中央揃えにする場合は、1行～3行ほどの文章にしましょう。
あまり長い文章に中央揃えを指定してしまうと、段落がバラバラになり読みづらくなってしまします。
短い文章を縦に並べるようなときに、中央揃えにするときれいに装飾できるので参考にしてみてください。
まとめ
これまで「text-alignプロパティ」について解説してきました。
文章にはそれぞれ適した文字の揃え方があります。
揃え方が不自然だと読みづらくなってしまうので使い方を把握しましょう。
じかいは、marginプロパティについて、【marginプロパティ】CSSで余白を空ける方法で解説します。
コメント