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

CSSのtext-align＆text-justifyプロパティを使ってテキストを揃える方法

CSSのtext-justifyプロパティは、要素に適用される均等割り付け（ジャスティフィケーション）の方式を指定するために使用します。一方、text-alignプロパティは、要素内のテキストの水平方向の配置（左寄せ・中央揃え・右寄せ・両端揃えなど）を設定します。

なお、text-justifyプロパティは、text-align: justify;が指定されている場合にのみ有効になります。

text-justifyプロパティの主な値

  • auto：ブラウザが自動的に適切な均等割り付け方法を選択します（初期値）。
  • none：均等割り付けを無効にします。
  • inter-word：単語と単語の間隔を調整して均等割り付けを行います。英語などの欧文テキストに適しています。
  • inter-character：文字と文字の間隔を調整して均等割り付けを行います。日本語や中国語などのCJK言語のテキストに適しています。

例1：article要素とp要素への適用

次の例は、CSSのtext-justifyプロパティの基本的な使い方を示したものです。

<!DOCTYPE html>
<html>
<head>
<style>
article {
   margin: 3%;
   background-color: peachpuff;
   text-align: justify;
}
p:first-of-type{
   text-justify: inter-character;
   background-color: moccasin;
}
</style>
</head>
<body>
<article>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac. </p>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac.</p>
</article>
</body>
</html>

出力結果

このコードを実行すると、次のような結果が表示されます −

CSSのtext-align＆text-justifyプロパティを使ってテキストを揃える方法

この例では、最初のp要素にtext-justify: inter-character;が適用されているため、文字間隔が調整されて両端揃えになっていることがわかります。

例2：dl要素への適用

<!DOCTYPE html>
<html>
<head>
<style>
dl {
   margin: 3%;
   background-color: lightcoral;
   text-align: justify;
}
#example{
   text-justify: inter-character;
   background-color: snow;
}
</style>
</head>
<body>
<dl>
<dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
<dd>Nunc viverra congue aliquam. <p id="example">Nullam in fringilla ex, at sagittis erat.
Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
</dl>
<dl>
<dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
<dd>Nunc viverra congue aliquam. <p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
</dl>
</body>
</html>

出力結果

このコードを実行すると、次のような結果が表示されます −

CSSのtext-align＆text-justifyプロパティを使ってテキストを揃える方法

このように、IDセレクターを使って特定の段落だけに異なる均等割り付け方式を適用することも可能です。text-justifyプロパティを活用することで、日本語テキストでは「inter-character」、英語テキストでは「inter-word」のように、言語特性に合わせた美しい両端揃えを実現できます。

  1. CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

    CSSのclip-pathプロパティを活用することで、吹き出しのようなコメントボックスを作成できます。画像ファイルに頼らずCSSだけで完結するため、軽量でメンテナンス性が高く、デザインの調整も容易です。 clip-pathプロパティの基本構文 clip-pathは、要素の表示範囲を切り抜く（クリップする）ためのプロパティです。基本的な構文は以下のとおりです。 Selector {    clip-path: /*値*/; } polygon()関数を使うと、複数の座標点を指定して三角形などの多角形を描画できます。この仕組みを利用して、コメントボックスの下に付ける「しっ

  2. CSSでリストの箇条書きマーカーをスタイリング＆アニメーション化する方法

    CSSの list-style プロパティを使用すると、順序なしリスト（<ul>）や順序付きリスト（<ol>）の箇条書きマーカー（ブレット）を自由にカスタマイズできます。デフォルトのマーカーを非表示にしたうえで、box-shadow や :hover 疑似クラス、CSSカウンターなどを組み合わせることで、マウスオーバー時に動きのある魅力的なリストを作成できます。list-styleプロパティの基本構文CSSの list-style プロパティは、次のように記述します。li { list-style: /*値*/; }none を指定するとデフォルトのマーカーが消