HTMLやCSS初心者の方は、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プロパティで指定する値は最初に紹介したようにいくつも種類がありますが、
この記事では代表的な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: 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の使い方を理解し、活用することでwebサイトを制作する幅が広がります。
右揃えや上下揃え、均等割付など文字の揃えをを自由に変化させ、より良いWebサイトを制作していきましょう。
制作でお悩みでしたら、
Bigmacにお任せください。
