text-align-last プロパティ

最終更新:2026-09-13

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

text-align-last プロパティは、ブロックレベル要素内の最終行の配置を設定します。多くは text-align: justify と組み合わせて使われます。既定では text-align の配置規則は段落の最終行には適用されませんが、text-align-last を使えば最終行だけを個別に制御でき、両端揃えのレイアウトをより柔軟で美しくできます。

カテゴリ
初期値auto
継承はい
適用対象
アニメーションタイプ
CSS バージョンCSS3
状態標準

📝 構文

text-align-last: auto | start | end | left | right | center | justify;

⚙️ 値

タイプ説明
auto | start | end | left | right | center | justifyキーワード最終行の配置値

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください:

🌐 ブラウザーサポート

ブラウザー ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
text-align-last v43 v12 v49 v9 v30
すべての主要ブラウザーでサポート
ヒント: auto は、最終行の配置が text-align の値に従うことを意味します。text-align が justify の場合、最終行は左揃えになります。
注意: text-align-last は、要素に複数行のテキストがある場合にのみ効果が見えます。单行では変化しません。

❓ よくある質問

Qtext-align-last と text-align の関係は?
Atext-align は最終行以外のすべての行の配置を制御し、text-align-last は最終行の配置だけを制御します。両者を組み合わせると、ブロック内のタイポグラフィをより細かく制御できます。
Qtext-align-last が期待通りに動かないのはなぜですか?
A要素に複数行のテキストがあるか、text-align が justify に設定されているかを確認してください。テキストが一行だけなら、text-align-last は可視的な効果を生みません。
Q段落の最終行を中央揃えにするには?
Aまず text-align: justify で全体を両端揃えにし、次に text-align-last: center で最終行だけを中央揃えにします。複数行テキストでのみ機能することに注意してください。单行なら text-align: center を直接使用してください。

📚 関連チュートリアル

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%