text alignとは？初心者でもわかる意味と使い方

皆さんはCSSのtext-alignというプロパティを知っていますでしょうか？
読み方は、「テキストアライン」といい、HTML/CSSの学習を始めると必ず出てきます。
本記事では、text-alignの使い方とプロパティについても紹介していきます。

そもそもCSSとは

ほとんどのWebページは、HTML,CSSという言語で見た目が制作されています。
CSSとは、「色やサイズや文字の大きさを指定できる言語」です。
つまりCSSとは、HTMLに色や大きさや背景などを加えてスクリーンに表示される見栄えを良くするものになります。

CSSの書き方

CSSの書き方について紹介します。

p{
color: red;
}

上記のようなCSSがあるとします。
CSSを適用したいタグのことを「セレクタ」(p)、変更したい項目を「プロパティ」(color)、プロパティを決定するものを「値」(red)と言います。
注意点として、プロパティと値は、「{}」で囲んで対応してあげましょう。

text-alignとは

text-alignプロパティは、文字や画像に対して、水平方向の揃え方を指定するプロパティのことです。ブロック要素に指定するCSSですが、その効果はブロック要素の中のインライン要素にでています。
例えば、文字を左や右に寄せたり、画像を中央に寄せたりする時に使います。

ブロック要素とは

ブロック要素は、文書を構成する上で基本になる要素のことで、divやh2,h3などの見出しタグやpタグ、ulタグ、liタグなどもブロック要素です。
divタグなどは他のブロック要素を入れ子にすることができますが、h2タグやpタグなどの中にはaタグなどのインライン要素しか入れれません。

インライン要素とは

インライン要素とは、文章の一部として扱われブロック要素の内容として用いられる要素です。インライン要素にはaタグやspanタグ、quotタグ、strongタグなどがあります。

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

text-alignプロパティで指定する値には複数あります。
今回は代表的な3つの値（left・right・center）を使用する方法を紹介します。

left

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

center

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

right

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

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

ブロック要素を左右中央に持っていきたい場合、text-align: center;では、中央にいきません。
ですので、width(幅)を指定してから、marginの左右にautoを指定します。

div{
wifth:900px;
margin: 0 auto;
}

といった具合です。

text-alignの値は他にもある

text-alignは紹介した3つ以外にもあります。機能を理解して必要に応じて使い分けるようにしましょう。

text-align: start;

インライン要素のコンテンツは、一般的な始まりの位置(左)で揃えられます。
なお、初期値ではtext-align: start;となっています。
実際、text-align: left;と変わりません。

text-align: end;

インライン要素のコンテンツは、一般的な終わりの位置(右)で揃えられます。
実際、text-align: right;と変わりません。

text-align: justify;

ワープロでいう均等割り付けのことです。
text-align-lastというプロパティの指定がない限り、最後の行に関しては一般的な始まりの位置(左)で揃えられます。

縦に中央揃えする方法

ボックス要素の中にテキストを入力し、表示させるときには、縦方向の中央揃えで表示したいときもあるでしょう。
text-alignは左右中央にする記述なため、縦方向には使えません。
その場合どのように配置しているでしょうか。

vertical-align: middle;

vertical-align: middle;とは、aタグやspanタグ、テキストや画像などのインライン要素の縦方向の揃え位置を指定する際に使います。

display: flex;

「display: flex;」と「align-items: center;」、「justify-content: center;」を使用することによってテキストやブロックを上下左右中央に揃えることも可能です。

text alignの使い方を理解して使いこなそう

text-alignについて説明しましたが理解できたでしょうか？
text-alignの使い方を理解して使いこなすことで、Webサイトを自分好みに表示させましょう。
文字の大きさを変更したり、周りに枠線をつけたりと、text-align以外にもCSSタグはたくさんあります。
理解してタグを使っていきましょう。