「text align」がわかる!初心者向けに意味と使用法を解説!

「text align」がわかる!初心者向けに意味と使用法を解説!

HTMLやCSS初心者の方は、text-alignとはなんだろう?と思うことがあるかもしれません。

text-alignはテキストの配置を指定することができるプロパティを指します。

この記事では、text-alignの使い方やプロパティが効かない原因について紹介していきます。

text-alignとは?

text-alignとは?

text-alignとは、文字などのブロック要素に対して、水平方向の揃え方を指定するCSSプロパティのことです。

文字を左右に寄せたり、画像を中央に寄せたりする時に使います。

 

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

指定する値

指定する値

text-alignプロパティで指定する値には複数あります。

それぞれを理解して、必要に応じて使い分けるようにしましょう。

 

start

字の方向が左書きであれば left、右書きであれば right と同じです。

end

字の方向が左書きであれば right、右書きであれば left と同じです。

left

インラインコンテンツは行ボックスの左辺に寄せられます。

right

インラインコンテンツは行ボックスの右辺に寄せられます

center

インラインコンテンツは行ボックス内で中央寄せされます。

justify

インラインコンテンツは両端揃えされます。

テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。

justify-all

justify と同じですが、最終行も強制的に両端揃えされます。

match-parent

inherit に似ていますが、 start end 値が親要素の direction に従って計算され、適切な left right 値に置き換えられます。

 

 

 

ブロック要素とは

ブロック要素は、文字を構成する際、基本になる要素のことです。

divタグなどは他のブロック要素を入れ子要素にすることができますが、h2タグやpタグなどの中にはaタグなどのインライン要素しか入れることはできません

 

インライン要素とは

インライン要素とは、文章の一部として扱われブロック要素の内容として用いられる要素です。

インライン要素にはaタグやspanタグ、quotタグ、strongタグなどがあります。

 

text-alignプロパティの書き方

text-alignプロパティの書き方

text-alignプロパティで指定する値は最初に紹介したようにいくつも種類がありますが

この記事では代表的な3つの値(left・right・center)を使用する方法を紹介します。

 

よく使われるleft・right・center

left

「text-align: left;」と記述することで、要素を左に寄せることができます。

center

「text-align: center;」と記述することで、要素を左右中央に寄せることができます。

right

「text-align: right;」と記述することで、要素を右に寄せることができます。

 

ブロック要素を中央にしたい場合

text-align: center で、テキストなどのインライン要素を中央寄せすることができますが、

テーブルや div などのブロック要素を左右中央に持っていきたい場合は、中央にいきません。

ブロック要素を中央寄せにしたい場合、width(幅)を指定してから、marginの左右にautoを指定します。

div{

wifth:900px;

margin: 0 auto;

}

という書き方になります。

 

text-alignプロパティは画像にも使える

text-alignプロパティは、文字以外に画像に対しても使うことができます。

imgタグなどのインライン要素を中央揃えするには、外側をブロック要素で囲い、「text-align: center」と指定するやり方があります。

<div style=”text-align: center;”><img src=”画像パス” /></div>

実際に画像を表示するコードは下記になります。

<div style=”text-align: center;”><img src=”img/sample1.jpg” /></div>

 

text-alignプロパティが効かない時

text-alignプロパティが効かない時

text-align: center;」がうまくいかないときには、指定したいものが「ブロック要素内のインライン要素であるか」を一度確認してみてください。

(原因1)インライン要素に指定している

まず確認していただきたいのは指定したいものが「ブロック要素内のインライン要素」であるかということです。

「text-align: center;」はブロック要素に指定をし、そのブロック要素内のインライン要素の位置を決めます。

言い換えてみると「ブロック要素内のインライン要素」以外には、text-align: center;は効きません。中央寄せにするためには様々な指定方法、要素に合わせて使い分ける必要があります。

 

(原因2)中央寄せにしたいのがブロック要素の時は?

ブロック要素を中央寄せにするには、「margin: 0 auto;」を使います。

この指定をすることで、左右幅を自動的に計算し、横方向への中央寄せができます。

(HTML)

<div class=”centering_parent”>

    <div class=”centering_item”>

        ブロック要素

    </div>

</div>

(CSS)

.centering_item {              /* 中央寄せする要素 */

    margin:  0 auto;            /* 中央寄せ */

}

 

一緒に学びたいvertical-alignプロパティ

text-alignプロパティ併せて理解しておきたいプロパティに、vertical-alignがあります。

text-alignプロパティは水平方向の揃え方を指定するプロパティでしたが、

vertical-alignプロパティは、垂直方向の揃え方を指定するプロパティです。

使用する際、気をつける点としてdisplay:blockの要素には指定することができません。

 inline、または、table-cellにのみ指定することができます。 

 

vertical-alignプロパティにも様々な値が用意されています。

baseline

指定した要素のベースラインを親要素のベースラインと揃えます。

top

指定要素を上端揃えにします。

middle

指定要素を中央揃えにします。

bottom

指定要素を下端揃えにします。

text-top

テキストを上端揃えにします。テーブルセルでは無効になります。

text-bottom

テキストを下端揃えにします。テーブルセルでは無効になります。

super

テキストを上付き文字の位置にします(文字サイズは変わりません)。テーブルセルでは無効になります。

sub

テキストを下付き文字の位置にします(文字サイズは変わりません)。テーブルセルでは無効になります。

 

text-alignの基礎を理解し正しく活用しよう!

text-alignの基礎を理解し正しく活用しよう!

text-alignプロパティは頻繁に使用される場面が多々ある為、常に理解しておきたいプロパティです。

text-alignの使い方を理解し、活用することでwebサイトを制作する幅が広がります。

右揃えや上下揃え、均等割付など文字の揃えをを自由に変化させ、より良いWebサイトを制作していきましょう。

制作でお悩みでしたら、
Bigmacにお任せください。

バナー制作
バナーlefty
バナー制作
バナー総合
バナー制作
バナー総合
LINEで送る
Pocket