【33】テキストの整列や両端揃えを指定する text-alignプロパティ

今回から「テキスト」に関する CSSプロパティを見ていきましょう。

「フォント」のためのプロパティは、フォント（書体）やそのグリフ（字形）どう選ぶかを指定ます。
「テキスト」のためのプロパティは、テキスト（文字）の表示の仕方を指定します。
具体的には、文字の左揃え・センター揃えなどや、改行の仕方、字下げ（インデント）などです。

まず今回は、text-alignプロパティから。
これは、テキストの横方向の整列の仕方を指定します。

この text-align、CSS 2 からちょっと仕様が変わって、CSS 3（CSS Text Module Level 3）からは「text-align-allプロパティ」と「text-align-lastプロパティ」のショートハンドになったんだって。

ですが、他のショートハンドと違って、指定できる値は１個だけなので、CSS 2 の時とほぼ同じような感覚で使えます。

CSS 2 からの違いは、text-align-lastプロパティが併用できるようになったこと。これは最終行を指定するプロパティです。

最終行とは、ボックス内のテキストの最後の行や、<br>要素などで強制的に改行される直前の行。

まず全体の行揃えを text-alignショートハンドで指定して、最後の行だけ揃え方を変えたかったら text-align-last も使うってかんじです。

本日のINDEX

1. text-alignプロパティの値
   1. text-align-allプロパティの値
   2. text-align-lastプロパティの値
2. text-alignプロパティの指定サンプル
3. text-align: justifyでの配置を決める text-justify

参考：
・CSS Text Module Level 3 | W3C Working Draft
・text-align - CSS | MDN

text-alignプロパティの値

text-alignプロパティの値は、「text-align-allプロパティ」と「text-align-lastプロパティ」の値で、これらはキーワードだけです。その中の「1つだけ」指定します。

text-alignプロパティの値
キーワード	start がデフォルト値。 end、left、right、center、justify、justify-all、match-parent
グローバル値	text-align: inherit; 親の値を継承（コレ書かなくても継承するけど） text-align: initial; 継承した親の値を解消しデフォルト値に戻す text-align: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	ブロックコンテナ内のテキスト・インライン要素

それぞれのキーワードは、以下の意味があります。

start

各行は、書字方向の「始点」のある辺に整列。
例えば、英語や日本語（横書き）だったら、左から右に文字が流れるので「左揃え」に。アラビア語だったら右から左なので「右揃え」になります。

end

各行は、書字方向の「終点」のある辺に整列。

left

「左揃え」に

right

「右揃え」に

center

「センター揃え」に

justify

「両端揃え」に。
ただし最終行は「text-align-last」で auto以外の値を指定されない限り「start」と同じになる。

justify-all

「両端揃え」で最終行も「両端揃え」（いわゆる「完箱（完全箱組）」ってやつ）
この値だけは、text-align-allプロパティと text-align-lastプロパティには無い、ショートハンドだけで使える値です。
で、対応しているブラウザは今のところ無いみたい。勧告時に無くなるかもです。（2018年6月記）

match-parent

inherit に似ていますが、 「start」「end」が継承された場合、親要素の directionプロパティの値から計算され「left」か「right」に置き換えられるんだそうです。

（directionプロパティは、テキストの書字方向を指定します。アラビア語などのように右から左へ書かれる言語などで使います。詳細は後日）

text-align-allプロパティの値

W3C 仕様書では「text-align-allプロパティの代わりに text-alignプロパティを利用するべきである（Authors should use the text-align shorthand instead of this property. ）」とあり、このプロパティを単独で使うことは無さそうです。

text-align-allプロパティは、最終行以外の行の整列を指定します。

text-align-allプロパティの値
キーワード	start がデフォルト値。 end、left、right、center、justify、match-parent （キーワードの意味は、上の text-alignプロパティに記載。）
グローバル値	text-align-all: inherit; 親の値を継承（コレ書かなくても継承するけど） text-align-all: initial; 継承した親の値を解消しデフォルト値に戻す text-align-all: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	ブロックコンテナ内のテキスト・インライン要素

text-align-lastプロパティの値

text-align-lastプロパティは、テキストの最終行の整列を決めます。
最終行とは、ボックス内のテキストの最後の行。
または <br>要素などで強制的に改行される直前の行のこと。

text-alignプロパティの指定後に、この text-align-lastプロパティも指定して、最終行のみ整列を変えることができます。

text-align-lastプロパティの値
キーワード	auto がデフォルト値。最終行は text-align に従って整列します。 start、end、left、right、center、justify （キーワードの意味は、上の text-alignプロパティに記載。）
グローバル値	text-align-last: inherit; 親の値を継承（コレ書かなくても継承するけど） text-align-last: initial; 継承した親の値を解消しデフォルト値に戻す text-align-last: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	ブロックコンテナ内のテキスト・インライン要素

text-alignプロパティの指定サンプル

では text-alignプロパティの全部の値を使ってみます。

text-align: start（text-align が未指定の場合コレになります） This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: end This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: left This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: right This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: center This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: justify This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: justify-all This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: justify; text-align-last: justify This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: match-parent This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

上の見本のソースコードはこんなかんじで作っています。

<div class="mihon">
  <p style="text-align:start">（テキスト省略）</p>
  <p style="text-align:end">（テキスト省略）</p>
  <p style="text-align:left">（テキスト省略）</p>
  <p style="text-align:right">（テキスト省略）</p>
  <p style="text-align:center">（テキスト省略）</p>
  <p style="text-align:justify">（テキスト省略）</p>
  <p style="text-align:justify-all">（テキスト省略）</p>
  <p style="text-align:justify; text-align-last:justify">（テキスト省略）</p>
  <p style="text-align:match-parent">（テキスト省略）</p>
</div>

text-align: justifyでの配置を決める text-justify

text-align: justify（両端揃え）を指定した時の、テキストの配置の仕方を決めるために text-justifyプロパティがあります。
単語間を空けるのか、1文字ずつの間隔を空けるのかを決めます。

このプロパティは、CSS 2 で IEのみが独自採用していましたが、今は Chrome, Firefox も対応しているようです。
ですが、W3Cの仕様書（草案）では「リスクがあり 勧告候補の期間中に削除される可能性がある（The following features are at-risk, and may be dropped during the CR period:）」となっています。（2018年6月記）

text-justifyプロパティの値
キーワード	auto がデフォルト値。ブラウザにおまかせ。 （英語などなら単語間を空け、日本語などなら文字間を空けます） none：両端揃えをしません inter-word：単語間を空けます inter-character：文字間を空けます （IE, Edge では、今は非推奨の値「distribute」も使えちゃいますが、割愛します）

値の継承	あり	適用できる要素	行内のテキスト・インライン要素

全部の値を試してみます。（文字が小さいと効果がわかりにくいので大きくしています）

text-justify: auto This property selects the justification method used when a line’s alignment is set to justify. このプロパティは、行の整列が justify に設定されているときに、利用する両端揃えメソッドを指定する。

text-justify: none This property selects the justification method used when a line’s alignment is set to justify. このプロパティは、行の整列が justify に設定されているときに、利用する両端揃えメソッドを指定する。

text-justify: inter-word This property selects the justification method used when a line’s alignment is set to justify. このプロパティは、行の整列が justify に設定されているときに、利用する両端揃えメソッドを指定する。

text-justify: inter-character This property selects the justification method used when a line’s alignment is set to justify. このプロパティは、行の整列が justify に設定されているときに、利用する両端揃えメソッドを指定する。

どうでしょう。auto以外使う機会はなさそうな気がする。勧告時に残るかなあ。

次回予告

次回は、overflow-wrapプロパティを使おう。
これは、CSS 2 では word-wrapプロパティと呼ばれていたもの。同じ機能ですが両方とも使えることになりました。
長い単語がオーバーフローしそうな時に、単語の途中で途中で切る（改行する）かどうかを決めるプロパティです。