text-alignプロパティの説明
CSSのtext-alignプロパティは、ブロック要素やテーブルセルに含まれる内容の横位置の揃え方を指定します。一般的にはテキストや画像などのインライン要素を左、右、中央に寄せるために使用します。
配置の指定は、leftやrightのように直感的なものから、startやendのようにボックスの書字方向に影響を受けるものがあります。通常の英文や日本語は左から右へ流れる横書きのため意識しませんが、既定値のstartは書字方向の影響を受けるという点を理解しておきましょう。
また、text-align-lastプロパティを併用することで、ブラウザが自動的に折り返した最後の行も寄せる位置を指定できます。
text-alignに指定できる値
start- 書字方向が左書きであれば
left、右書きであればrightと同じ方向に寄せます。これが初期値です。 end- 書字方向が左書きであれば
right、右書きであればleftと同じ方向に寄せます。 left- インライン要素は行方向の左に寄せて配置されます。
right- インライン要素は行方向の右に寄せて配置されます。
center- インライン要素は行方向の中央に寄せて配置されます。
justify- インライン要素は行方向の両端に揃えて配置されます。最終行を除くテキストは、均等の隙間を空けて等間隔で並びます。最終行を行端揃えにしたい場合は、
text-align-lastを併記します。 justify-all（β）- インライン要素は行方向の両端に揃えて配置されます。最終行を含む全てのテキストが行端揃えとなります。
match-parent- 親要素の
directionに従ってstartとendの値が計算され、適切なleftまたはright値に置き換えられます。 <string>（β）- 表のセルに配置されたコンテンツの揃える位置揃え文字を指定します。
text-alignの使い方とサンプルコード
text-alignプロパティの構文は以下の通りです。
/* キーワード値 */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;
/* 表の列における文字ベースの配置 */
text-align: "・";
text-align: "・" center;
/* グローバル値 */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: unset;
text-alignの実例
それでは実際にtext-alignプロパティの書き方を見ていきましょう。以下の例は、text-alignの値を変えたボックスに、テキストを配置した場合の挙動です。それぞれの値に従って左右や中央に文字が寄っているのが分かります。
細かい挙動を見ていくと、書字方向を指定するdirectionの設定によって、テキストを寄せる方向が変わる値があります。resizeに対応しているブラウザであれば、各セクションの幅を変更できます。
<div class="samp_box">
<section class="ta_start">
<h2>text-align: start;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
<section class="ta_end">
<h2>text-align: end;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
<section class="ta_left">
<h2>text-align: left;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
<section class="ta_right">
<h2>text-align: right;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
<section class="ta_center">
<h2>text-align: center;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
<section class="ta_justify">
<h2>text-align: justify;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
<section class="ta_justify">
<h2>text-align: justify-all;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
<section class="ta_mp">
<h2>text-align: match-parent;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background: #fff;
resize: horizontal;
}
section > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: 1rem 0 0;
}
.ta_start {
text-align: start;
}
.ta_end {
text-align: end;
}
.ta_left {
text-align: left;
}
.ta_right {
text-align: right;
}
.ta_center {
text-align: center;
}
.ta_justify {
text-align: justify;
}
.ta_justifyall {
text-align: justify-all;
}
.ta_mp {
text-align: match-parent;
}