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

CSSでテキストの最終行を揃える方法｜text-align-lastプロパティの使い方

CSSのtext-align-lastプロパティを使用すると、ブロック要素内のテキストの最終行の揃え位置を個別に指定できます。段落全体の配置とは別に、最後の行だけ右寄せや中央寄せにしたい場合に便利です。
以下のコードでは、div要素にtext-align-last: right;を設定し、テキストの最終行を右寄せに表示しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mydiv {
            text-align-last: right;
         }
      </style>
   </head>
   <body>
      <h1>text-align-last Property</h1>
      <div class = "mydiv">
         <p>This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text.</p>
      </div>
   </body>
</html>

実行結果

CSSでテキストの最終行を揃える方法｜text-align-lastプロパティの使い方

text-align-lastで使える主な値

  • auto：初期値。text-alignプロパティの設定に従って配置されます。
  • start / end：書字方向（writing-mode）の開始側・終了側に揃えます。
  • left / right：それぞれ左寄せ・右寄せで配置します。
  • center：中央寄せで配置します。
  • justify：両端揃えで配置します。

たとえば、両端揃え（justify）の段落で最終行だけ中央寄せにするといった指定も可能です。text-alignとの組み合わせによって表現の幅が大きく広がるため、文章の見栄えを細かく調整したい場合にぜひ活用してください。対応状況はブラウザによって異なるため、実務で使用する際は最新の互換性情報を確認することをおすすめします。

  1. CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

    CSSの@mediaルールは、1つのスタイルシート内で、印刷・画面・すべてなど、異なるメディアタイプに応じて異なるスタイルを指定するために使用されます。通常はカンマ区切りのメディアタイプのリストと、対象メディア用のスタイルルールを含むCSS宣言ブロックが続きます。構文（Syntax）@mediaルールの基本的な構文は以下の通りです。@media not | only mediatype and (expressions) { CSS-Code; }「not」や「only」は省略可能なキーワードで、「expressions」には画面幅などの条件（メディア特性）を指定します。これにより、デ

  2. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負