CSSでのテキストの両端揃えの方法

2024-02-08 20:55 CSSテキスト両端揃え

  1. text-alignプロパティを使用する方法:

    .justified-text {
 text-align: justify;
}

    上記のCSSコードをテキストが含まれる要素（例:

    、

    ）に適用すると、テキストが両端揃えされます。

  2. text-justifyプロパティを使用する方法:

    .justified-text {
 text-align: justify;
 text-justify: inter-word;
}

    上記のCSSコードでは、text-justifyプロパティを使用して単語ごとにテキストを両端揃えします。この方法は、単語の間隔が均等になります。

  3. text-align-lastプロパティを使用する方法:

    .justified-text {
 text-align: justify;
 text-align-last: justify;
}

    上記のCSSコードでは、text-align-lastプロパティを使用して最後の行も両端揃えにします。ただし、このプロパティは一部のブラウザでサポートされていない場合がありますので、注意が必要です。

これらの方法を使用すると、テキストが両端揃えされた状態で表示されます。適用する要素に対して適切なCSSクラスを指定し、スタイルシートに上記のコードを追加してください。

なお、テキストの両端揃えは、特に日本語の場合には適用すると読みにくくなる場合があります。デザイン上の配慮や文章の内容に応じて、適切なスタイルを選択することが重要です。