今回は、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で以下のように記述します。
|
1 2 3 4 5 6 7 8 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <body> <p>指定した場所にテキストを表示します。</p> </body> </html> |
テキストを左に配置する場合は、CSSでpタグに、text-align:left;を指定します。
See the Pen
text-align left by misaki (@poyo773)
on CodePen.
このように、テキストは左に配置されます。
テキストを右に配置する
テキストを右に配置する場合は、text-align:right;を指定します。
See the Pen
text-alignright by misaki (@poyo773)
on CodePen.
テキストが右に配置されたことがわかります。
テキストを中央に配置する
テキストを中央に配置する場合は、text-align:center;を指定します。
See the Pen
text-aligncenter by misaki (@poyo773)
on CodePen.
テキストが中央に配置されました。
テキストを均等割付する
半角と全角が混ざった文章を表示させると、このように右側に空欄ができて各行にズレができてしまいます。
See the Pen
RwGrygd by misaki (@poyo773)
on CodePen.
文字の両端をきれいにそろえたい場合は、text-align:justify;を指定します。
See the Pen
text-align justify2 by misaki (@poyo773)
on CodePen.
右側の空白が無くなり、きれいに揃ったことが分かります。
text-alignとvertical-alignの違い
text-alignは、ブロック要素の揃え方を横方向に指定するプロパティです。
vertical-alignは、インライン要素の揃え方を上下方向に指定するプロパティです。
例えば、表のテキストの位置を指定したいときは、「vertical-align」で指定することができます。各セルのテキストにtop,middle,bottomの値を指定します。
See the Pen
vertical-align by misaki (@poyo773)
on CodePen.
このように表のテーブルセル内のテキストを配置することができます。
text-alignの応用的な使い方
画像を配置する
text-alignで画像を中央に表示する方法を紹介します。text-alignで画像を配置するには、画像そのものではなく、親要素のdivタグに指定します。画像の外枠となるdiv要素にtext-align :center ;を指定することで、中央に配置することができます。
See the Pen
gazou by misaki (@poyo773)
on CodePen.
表を配置する
表を中央に配置する方法を紹介します。画像と同じように、<div>にtext-align : center を指定します。
See the Pen
hyou 1 by misaki (@poyo773)
on CodePen.
まだ表の配置は変化していません。そこで、marginを指定することで表を中央に表示することができます。table要素に、margin-left、margin-rightの両方にautoを指定します。
See the Pen
hyou 2 by misaki (@poyo773)
on CodePen.
まとめ
いかがでしたか？今回はtext-alignで文字や画像を配置する方法を解説しました。web制作で実装したいデザインに合わせて活用してみてください。
この記事がお役に立てれば幸いです。
参考文献：https://developer.mozilla.org/ja/docs/Web/CSS/text-align,https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align
