概要

text-justifyは、CSSでテキストを両端揃えにした際のスペースの配置方法を制御するプロパティです。このプロパティを使用することで、単語間や文字間のスペースを調整し、視覚的に整ったテキスト配置を作成することができます。特に、新聞や雑誌のような紙面レイアウトのように見せたい場合に役立ちます。

基本的な使い方

text-justifyプロパティは、両端揃え（text-align: justify;）の際にスペースの配置方法を制御します。主に、単語間や文字間の調整を行い、テキストが自然な形で配置されるようにします。

構文

.element {
  text-align: justify; /* 両端揃えを指定 */
  text-justify: auto; /* 両端揃えの方法を指定 */
}
  • auto
    デフォルト設定。ブラウザが自動的にスペースの配置を決定します。
  • inter-word
    単語間のスペースを調整します。日本語など、単語の区切りが明確でない言語には効果が限定されます。
  • inter-character
    文字間のスペースを調整します。日本語のような文字ベースの言語で特に有効です。
  • none
    両端揃えの調整を行わず、通常のスペース配置を行います。

例

以下の例では、text-justifyの設定がどのようにテキストの見た目を変えるかを確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Justify Example</title>
<style>
  .justify-auto {
    text-align: justify;
    text-justify: auto; /* 自動調整 */
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
  }
  .justify-inter-word {
    text-align: justify;
    text-justify: inter-word; /* 単語間のスペース調整 */
    margin-bottom: 20px;
    border: 1px solid #007bff;
    padding: 10px;
  }
  .justify-inter-character {
    text-align: justify;
    text-justify: inter-character; /* 文字間のスペース調整 */
    margin-bottom: 20px;
    border: 1px solid #28a745;
    padding: 10px;
  }
</style>
</head>
<body>
<p class="justify-auto">
  自動調整の例です。ブラウザが適切な間隔を決定し、両端揃えの調整を行います。この設定は、ほとんどの状況で視覚的にバランスの取れたテキスト配置を提供します。
</p>
<p class="justify-inter-word">
  単語間のスペース調整の例です。各単語間のスペースが均等になるように調整されます。この設定は、日本語以外の言語で特に効果的です。
</p>
<p class="justify-inter-character">
  文字間のスペース調整の例です。この設定では、文字ごとのスペースが調整され、特に日本語などの文字ベースの言語で有効です。
</p>
</body>
</html>

この例では、.justify-autoがデフォルトの自動調整であり、.justify-inter-wordは単語間のスペースを均等にし、.justify-inter-characterは文字間のスペースを均等にしています。

text-justifyの利点

  • 視覚的なバランス: 両端揃えの際にスペースを適切に調整することで、文章が均整の取れた見た目になります。
  • 読みやすさの向上: 特に長文のテキストで、調整された間隔により読みやすさが向上します。
  • 言語特有の調整: 単語間や文字間を柔軟に調整できるため、英語や日本語など、異なる言語特有のタイポグラフィに対応できます。

応用例

両端揃えの効果を最大化する

新聞や雑誌のように、視覚的に完璧な両端揃えを目指す場合、text-justify: inter-character;を使うと、特に日本語の文章で美しく整ったレイアウトが実現します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perfect Justify Example</title>
<style>
  .perfect-justify {
    text-align: justify;
    text-justify: inter-character;
    line-height: 1.6;
    border: 1px solid #f0ad4e;
    padding: 15px;
  }
</style>
</head>
<body>
<p class="perfect-justify">
  日本語の文章でも、両端揃えを視覚的に整えることができます。この調整は、特に紙面レイアウトや印刷物のようなビジュアルをウェブで再現したい場合に役立ちます。スペースの調整が文字単位で行われるため、文章が詰まりすぎたり、間延びしたりせず、きれいに見えます。
</p>
</body>
</html>

この例では、文字ごとのスペースが細かく調整され、視覚的に美しい両端揃えを実現しています。

まとめ

text-justifyプロパティは、テキストの両端揃えを細かく制御し、視覚的に整ったレイアウトを実現するための重要なツールです。デフォルトの設定から単語間や文字間の調整まで、さまざまな調整方法を活用することで、ウェブページのタイポグラフィが大幅に向上します。特に、読みやすさや見た目の美しさにこだわる場合、text-justifyを効果的に使うことをおすすめします。

参照:

text-justify - MDN Web Docs