ときに、ほとんど気づかれないようなささいな箇所がユーザー・エクスペリエンスを左右するものです。そのささいな箇所には、Webページの見出しに追加されたテキストシャドウや適切な行間も含まれます。
その点、text-align-lastプロパティは役立つものです。段落の最後の行または強制改行の直前の行をどのように配置するかを指定します。段落の最後の行は通常、1行を埋めるための十分なテキスト量は用意されません。だからこそ、text-align-lastプロパティは重要なのです。違いに気づくか気づかないかくらいの違いですが、Webサイトの全体的な見栄えを改善するものなのです。
この記事は、text-align-lastプロパティのすべてを網羅します。「すべて」には、許容値、ブラウザーのサポート、ブラウザー固有の動作を含みます。
使い方と使用可能な値
Webサイトの制作でtext-align-lastを使うのは簡単です。次のコードは、テキストの最後の行を右揃えに配置する基本的なスニペットです。
.intro-graph {
text-align: justify; // Required for IE and Edge
text-align-last: right;
}
text-align-lastプロパティには7つの値が使えます。おそらく、left、right、centerに関してはよくご存じでしょう。最後の行を段落の左、右、中央に揃える値です。
次のデモは、left、right、centerの3つの値の違いを示したものです。
4番目の値となる、justifyは、段落の左右の端に、最後の行のテキストの左右の端を揃えるように配置するものです。justifyは必要があれば単語間に適切な量のスペースを挿入して処理されます。テキストの量によっては、このプロパティを使うことで最後の行の単語間にそれほど多くの空白を作らずに1行を埋められます。2番目の段落内のテキストも割り付けされますが、最後の行に単語が1つしかない場合、左揃えに配置されます。
テキストの最後の行を左揃えにするのは左から右に読む言語（LTR）に対しては有効ですが、逆に右から左に読む言語（RTL）では間違いのもとです。そのような言語を扱うことをあらかじめ分かっていない人がleftやrightを使うと問題を引き起こしかねません。
幸いにも、テキストの方向にあわせて文の開始位置を決められるキーワードstartがあります。つまり、text-align-lastをstartに設定するとLTR言語のテキストであれば左揃え、RTL言語のテキストであれば右揃えになります。同様に、テキストの方向にあわせて行の終了位置を決められるendという値を使うことで、最終行を配置できます。この設定は、LTR言語のテキストであれば右揃え、RTL言語のテキストであれば左揃えにすることを意味します。
text-align-lastプロパティのデフォルト値はautoです。autoの場合、最後の行のテキストはtext-alignの値がjustifyに設定されていない限り、text-alignプロパティの値に従って配置されます。justifiedに設定されている場合は、text-justifyプロパティがdistributeに設定されている場合のみ、テキストが割り付けされます。それ以外の場合、テキストは開始側に配置されます。
注目すべきポイント
仕様書では、text-align-lastプロパティを設定する場合、text-alignの設定をjustifyにする必要があると記載されています。しかし、IEとEdgeだけがこの規則を実装しています。ChromeとFirefoxではtext-alignがjustifyに設定されていなくても、text-align-lastプロパティの通り表示されます。次のデモのEdgeとIEではすべてのテキストが右揃えでなくてはなりません。ほかのブラウザーでは、最後の行はtext-align-lastの値に基づいて配置され、残りの行は右揃えで配置されます。
実装結果を見ると、text-alignをjustifyに設定したときとそれほど見栄えが変わらないと思われるかもしれません。そのとおりで、テキストはほとんどjustifyになります。
たとえば、<br>タグで改行を強制している場合でもプロパティは有効です。また、このプロパティはコンテンツの一番最後の行だけではなく、指定された要素の中にあるすべての最終行を揃える処理をする、ということを念頭に置いておく必要があります。たとえば、articleまたはdiv要素内のテキストに段落が3つある場合、それらの段落の最終行はtext-align-lastの設定に基づいてテキストが配置されるということです。
コンテンツの一番最後の行の配置を揃えたい場合、状況によっては、:last-childや:last-of-typeセレクターを使えます。次のコードを見てください。
article {
text-align: justify;
}
article p:last-of-type {
text-align-last: right;
}
このコードは、記事の最終段落の最終行を右に配置できます。残りの行はtext-alignプロパティの値に基づいて配置されます。
同様に、:evenや:oddのようなほかのセレクターを使って、交互に揃え方を変更もできます。
ときには、段落の最初と最後の行が同じというコンテンツもあるかもしれません。つまり、段落が1行だけで構成されている場合です。段落が1行だけの場合にtext-alignとtext-align-last両方の値を指定すると、text-align-lastプロパティが優先されます。唯一の例外は、text-alignに‘start end’値が入力され、first-lineの配置が明示されている場合です。
次に紹介するコードで考えください。
p {
text-align: justify;
}
p:nth-of-type(2) {
text-align-last: left;
}
この例で2番目の段落が1行しかない場合、テキストはtext-align-lastが優先されるため均等割り付けでなく左揃えとなります。下のデモでは、CSSでの上記の動作をほかの2つの例とともに確認できます。
ブラウザーのサポート
text-align-lastプロパティの基本的な使い方を網羅しましたので、次にブラウザーのサポートについて説明します。text-align-lastプロパティのサポートは、Chromeのバージョン35やOperaのバージョン22以降で「Enable Experimental Web Platform Features」を使って有効にできます。フルサポートはChromeのバージョン47とOperaのバージョン34以降です。
Firefoxでこのプロパティを使用するには-moz-プレフィックス付きバージョンを使う必要があります。IEでは、startとendはサポートされていません。しかし、Edgeは完全にサポートしています。主要なブラウザーでtext-align-lastをまったくサポートしていないのがSafariです。各ブラウザーのサポートに関する詳細はここを参照してください。
全体の61.85%のブラウザーがtext-align-lastプロパティをサポートしているので、使っても困ることはありません。サポートしていないブラウザーのユーザーは、違いに気づかないはずです。
最後に
text-align-lastを使うと記事内のテキストを正しく配置できますが、もう1つ別の面白い使い方があります。それは画像の下に複数行のキャプションを適切に配置できることです。
（原文：Introducing the CSS text-align-last Property）
［翻訳：皐月弥生］
［編集：Livit］
