【副業を始めたい人必見!】副業開始マニュアル

【text-alignプロパティ】CSSで文章の位置を指定する方法

【text-alignプロパティ】CSSで文章の位置を指定する方法 CSS

どうも!ニシドラ(@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 }

左揃えの画像

ブラウザで表示させると上画像のようになります。
テキストが左に揃っています。

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 }

両端揃えの画像

ブラウザで表示させると上画像のように、きれいにテキストを両端で揃えることができます。

text-align 比較

上画像の左には「justify」を、右には「left」を指定しています。

leftを指定した右の文章は右端がガタガタになっていて揃っていません。
文章をきれいに見せたいときはjustifyを指定しましょう。

文字が少ない文章をjustifyで揃えてしまうと不自然に両端に揃ってしまうので、使いどころには注意しましょう。

text-alignプロパティを使うときの注意点

text-alignプロパティで中央揃えにする場合は、1行~3行ほどの文章にしましょう。

あまり長い文章に中央揃えを指定してしまうと、段落がバラバラになり読みづらくなってしまします。
短い文章を縦に並べるようなときに、中央揃えにするときれいに装飾できるので参考にしてみてください。

まとめ

これまで「text-alignプロパティ」について解説してきました。

文章にはそれぞれ適した文字の揃え方があります。
揃え方が不自然だと読みづらくなってしまうので使い方を把握しましょう。

じかいは、marginプロパティについて、【marginプロパティ】CSSで余白を空ける方法で解説します。

コメント

タイトルとURLをコピーしました