今回は、CSSで文字や画像を配置するときに欠かせない「text-align」について解説します。text-alignは、見やすく文字や画像の位置を指定するために、web制作で頻繁に使用されるプロパティです。
初心者のうちは、
こだわって見やすいデザインにしたいけれど、
なんだか複雑そう・・・
と諦めてしまう方もいらっしゃるのではないでしょうか。
今回は、「text-align」を使って
・文字を配置する方法
・画像や表を配置する方法
について説明します。
目次 [非表示]
text-alignとは
text-alignの読み方
text-alignは「テキストアライン」と読みます。alignは、日本語で一列に整列させるという意味になります。
text-alignの説明
text-alignとは、テキストを配置する位置を指定するプロパティです。行揃えの位置や均等割付の形式を指定することができます。
text-alignで利用できる値
text-alignでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| left | 要素を左に配置します |
| right | 要素を右に配置します |
| center | 要素を中央に配置します |
| justity | 要素を両端揃えにし、配置を均等に割り付けます |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
text-alignの基本的な使い方
テキストを左に配置する
まず、HTMLで以下のように記述します。
テキストを左に配置する場合は、CSSでpタグに、text-align:left;を指定します。
このように、テキストは左に配置されます。
テキストを右に配置する
テキストを右に配置する場合は、text-align:right;を指定します。
テキストが右に配置されたことがわかります。
テキストを中央に配置する
テキストを中央に配置する場合は、text-align:center;を指定します。
テキストが中央に配置されました。
テキストを均等割付する
半角と全角が混ざった文章を表示させると、このように右側に空欄ができて各行にズレができてしまいます。
文字の両端をきれいにそろえたい場合は、text-align:justify;を指定します。
右側の空白が無くなり、きれいに揃ったことが分かります。
text-alignとvertical-alignの違い
text-alignは、ブロック要素の揃え方を横方向に指定するプロパティです。
vertical-alignは、インライン要素の揃え方を上下方向に指定するプロパティです。
例えば、表のテキストの位置を指定したいときは、「vertical-align」で指定することができます。各セルのテキストにtop,middle,bottomの値を指定します。
このように表のテーブルセル内のテキストを配置することができます。
text-alignの応用的な使い方
画像を配置する
text-alignで画像を中央に表示する方法を紹介します。text-alignで画像を配置するには、画像そのものではなく、親要素のdivタグに指定します。画像の外枠となるdiv要素にtext-align :center ;を指定することで、中央に配置することができます。
表を配置する
表を中央に配置する方法を紹介します。画像と同じように、<div>にtext-align : center を指定します。
まだ表の配置は変化していません。そこで、marginを指定することで表を中央に表示することができます。table要素に、margin-left、margin-rightの両方にautoを指定します。
まとめ
いかがでしたか？今回はtext-alignで文字や画像を配置する方法を解説しました。web制作で実装したいデザインに合わせて活用してみてください。
この記事がお役に立てれば幸いです。
参考文献：https://developer.mozilla.org/ja/docs/Web/CSS/text-align,https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align
