text-align-last:ボックスに含まれる内容の最後の行を揃える位置を指定する
初期値 | auto |
適用対象 | ブロックコンテナ |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
text-align-lastプロパティの説明
text-align-last
は、ブロック要素やテーブルセルに含まれる内容の最後の行を揃える位置を指定します。一般的にはテキストや画像などのインライン要素を左、右、中央に寄せるために使用します。
この機能の利点は、ブラウザ上で折り返されたことによる最終行にも適用されることです。通常の手法であれば、寄せる位置を変えたい内容を子要素で囲い、そこにtext-align
を指定し直すことが考えられますが、これでは指定範囲の内容が固定されるため、動的な効果は果たせません。
text-align-lastに指定できる値
- auto
text-align
の値と同じ方向に配置します。text-align
の値がjustify
だった場合は、text-align-last
にstart
を指定した時と同じ振る舞いをします。これが初期値です。- start
- 書字方向が左書きであれば
left
、右書きであればright
と同じ方向に寄せます。これが初期値です。 - end
- 書字方向が左書きであれば
right
、右書きであればleft
と同じ方向に寄せます。 - left
- インライン要素は行方向の左に寄せて配置されます。
- right
- インライン要素は行方向の右に寄せて配置されます。
- center
- インライン要素は行方向の中央に寄せて配置されます。
- justify
- インライン要素は行方向の両端に揃えて配置されます。最終行を除くテキストは、均等の隙間を空けて等間隔で並びます。
text-align-lastの使い方とサンプル
text-align-last
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
/* グローバル値 */
text-align-last: inherit;
text-align-last: initial;
text-align-last: revert;
text-align-last: unset;
text-align-lastの実例
それでは実際にtext-align-last
プロパティの書き方を見ていきましょう。以下の例は、同じ内容のテキストに別の値を持つtext-align-last
を指定した場合の比較です。
text-align
は既定値で共通となっています。resize
に対応しているブラウザであれば、各セクションの幅を変更できます。テキストが折り返された時に最終行の文字数が変わりますが、text-align-last
はこれを動的に処理します。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > section {
overflow: auto;
width: 75%;
margin: 1rem auto 0;
padding: 0 1rem 1rem;
background: #fff;
resize: horizontal;
}
section > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: 1rem 0 0;
}
.tal_auto > p {
text-align-last: auto;
}
.tal_start > p {
text-align-last: start;
}
.tal_end > p {
text-align-last: end;
}
.tal_left > p {
text-align-last: left;
}
.tal_right > p {
text-align-last: right;
}
.tal_center > p {
text-align-last: center;
}
.tal_justify > p {
text-align-last: justify;
}
HTML
<div class="samp_box">
<section class="tal_auto">
<h2>text-align-last: auto;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
<section class="tal_start">
<h2>text-align-last: 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="tal_end">
<h2>text-align-last: 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="tal_left">
<h2>text-align-last: 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="tal_right">
<h2>text-align-last: 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="tal_center">
<h2>text-align-last: 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="tal_justify">
<h2>text-align-last: justify;</h2>
<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890. ABC DEFG HIJKLMN OPQRSTU VWXYZ. 1234567890.</p>
</section>
</div>
text-align-lastに関連するCSSプロパティ
テキスト関連 | |
---|---|
text-align | ボックスに含まれる内容の横位置の揃え方を指定する |
text-align-last | ボックスに含まれる内容の最後の行を揃える位置を指定する |
text-combine-upright | 一文字分の空間に挿入する文字の組み合わせを指定する |
text-decoration | 文字の装飾線に関する値を一括で指定する |
text-decoration-color | 文字に加えられた装飾線の色を指定する |
text-decoration-line | 文字に加えられた装飾線の種類を指定する |
text-decoration-skip-ink | 装飾線が文字を通過する祭の処理を指定する |
text-decoration-style | 文字に加えられた装飾線の形状を指定する |
text-decoration-thickness | 文字に加えられた装飾線の太さを指定する |
text-emphasis | テキストに付加する圏点、傍点、脇点に関する値を一括で指定する |
text-emphasis-color | テキストに付加する圏点、傍点、脇点の色を指定する |
text-emphasis-position | テキストに付加する圏点、傍点、脇点の位置を指定する |
text-emphasis-style | テキストに付加する圏点、傍点、脇点の記号を指定する |
text-indent | テキストの一行目に挿入するインデントの幅を指定する |
text-justify | テキストの行端揃えに対して均等割り付けの方法を指定する |
text-orientation | 縦書きモードの文字の向きを指定する |
text-overflow | 行からテキストが溢れている状態の表現方法を指定する |
text-shadow | 文字に影(ドロップシャドウ)を付ける |
text-transform | テキストの大文字・小文字の表記を指定する |
text-underline-position | 文字の下に引かれる装飾線の位置を指定する |