【CSS Modules】text-align-lastプロパティの使い方

text-align-lastプロパティは、ブロックレベル要素内のテキストコンテンツにおいて、その要素の最後の行、または強制改行（<br>要素など）の直前の行のテキストの揃え方を制御するプロパティです。通常のtext-alignプロパティが要素内のすべての行に適用されるのに対し、このプロパティは特に「最後の行」の配置に限定して適用されるため、より細やかなレイアウト調整が可能になります。

このプロパティには、以下のような値を指定できます。autoは、ユーザーエージェント（Webブラウザなど）のデフォルトの動作に依存し、多くの場合、親要素のtext-alignの値に従うか、書字方向に応じたデフォルトの揃え方が適用されます。startは、書字方向に基づいて行頭にテキストを揃え、例えば左から右へ書く言語では左揃えに、右から左へ書く言語では右揃えになります。endはその逆で、書字方向に基づいて行末に揃えます。leftはテキストを常にブロックの左端に揃え、rightは常に右端に揃えます。centerはテキストをブロックの中央に揃えます。justifyは、単語間のスペースを調整してテキストを両端揃えにするため、最後の行が不自然に引き伸ばされることなく、視覚的に整った印象を与えます。

このプロパティは、段落や記事の本文において、最後の行の見た目を細かく調整したい場合に非常に有用です。例えば、本文全体は両端揃えにしつつも、最後の行だけは左揃えや中央揃えにするといった柔軟なデザインを実現できます。ただし、要素内にテキストが一行しかない場合や、インライン要素に対しては効果を発揮しませんのでご注意ください。コンテンツの可読性を高め、より洗練されたレイアウトを実現するために活用できるプロパティです。

Copy
1.selector-name {
2  text-align-last: auto;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません