CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-align-lastプロパティの使い方を解説

text-align-last プロパティは、ブロック内のテキストの最終行の揃え方（位置合わせ）を指定するためのCSSプロパティです。通常、text-align: justify; を指定した場合、最終行だけは左揃えになりますが、このプロパティを使えば最終行だけ別の揃え方を適用できます。

基本的な使い方

以下のコードでは、.mydiv クラスを持つ要素内の段落に対して text-align-last: right; を指定し、テキストの最終行を右揃えにしています。

<!DOCTYPE html>
<html>
<head>
<style>
  .mydiv {
    text-align-last: right;
  }
</style>
</head>
<body>
<h1>text-align-last プロパティの例</h1>
<div class="mydiv">
  <p>これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。</p>
</div>
</body>
</html>

このコードを実行すると、段落の最終行のみが右端に揃って表示され、それ以外の行は通常どおり左揃えで表示されます。

主な値の一覧

  • auto：初期値。text-align の設定に従います（justify 以外の場合は先頭行と同じ扱い）。
  • start：書字方向における行頭側に揃えます。
  • end：書字方向における行末側に揃えます。
  • left：左揃えにします。
  • right：右揃えにします。
  • center：中央揃えにします。
  • justify：両端揃え（均等割り付け）にします。

対応ブラウザについて

text-align-last は、Chrome・Firefox・Edge・Safariなど主要なモダンブラウザで利用できます。ただし、古いバージョンのブラウザではベンダープレフィックス（-moz- など）が必要な場合があるため、幅広い環境をサポートしたい場合は注意してください。

  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説

    CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。 CSSの主なテキストフォーマット用プロパティ color（文字色） テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。 letter-spacing（文字間隔） 文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。 line-height（行