CSSのword-spacingで単語間のスペースを調整する方法をわかりやすく解説

2024.09.15
スポンサーリンク

word-spacingプロパティは、テキスト内の単語間のスペースを調整するために使用されます。単語と単語の間隔を調整することで、読みやすさやデザインに応じたレイアウトを作ることができます。

スポンサーリンク

word-spacingプロパティの値とその効果の一覧

  • normal: 通常の単語間隔で表示します。単語間のスペースはブラウザのデフォルト値になります。
  • 10px: 単語間に指定されたピクセル数の間隔を追加します。この場合、単語間に10pxのスペースが追加されます。
  • -5px: 単語間のスペースを縮小します。ここでは5px分、単語同士が詰められます。

注意点や関連情報

word-spacingプロパティは、単語間のスペースのみを調整するため、文字間の調整はできません。文字間を調整したい場合は、letter-spacingプロパティを使用してください。また、負の値を指定することで単語間を詰めることも可能ですが、極端な負の値を設定するとテキストが読みにくくなることがあります。

word-spacingが効かない時の原因と対策

テキストに複数の単語が含まれていない

word-spacingは、単語間のスペースを調整するプロパティですが、テキストが単一の単語のみで構成されている場合、効果が発揮されません。単語間のスペースを広げるためには、テキストに複数の単語が必要です。

対策: word-spacingを適用する場合、テキストが複数の単語で構成されていることを確認します。例えば、<p style="word-spacing: 10px;">Hello world</p>のように複数の単語があるか確認します。

white-spaceプロパティが干渉している

white-spaceプロパティがnowrapやpreに設定されている場合、word-spacingが適切に適用されないことがあります。特に、white-space: nowrap;はテキストの折り返しを無効にし、スペースの扱いにも影響を与えるため、word-spacingの効果が見えにくくなります。

対策: white-spaceの設定を確認し、white-space: normal;に設定することで、word-spacingの効果が正しく適用されるか確認します。

共通するCSSコード

.css-sample-container {
    border: 1px solid #333;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

word-spacing: normal

通常の単語間隔で表示され、ブラウザのデフォルト設定に従います。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-word-spacing-normal">
        This is a sample sentence to demonstrate normal word spacing.
    </div>
</div>

CSSコード

.css-sample-word-spacing-normal {
    width: 100%;
    word-spacing: normal;
    background-color: lightyellow;
}

This is a sample sentence to demonstrate normal word spacing.

word-spacing: 10px

単語間に10pxのスペースが追加され、単語同士が広がります。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-word-spacing-10px">
        This is a sample sentence with a 10px word spacing.
    </div>
</div>

CSSコード

.css-sample-word-spacing-10px {
    width: 100%;
    word-spacing: 10px;
    background-color: lightblue;
}

This is a sample sentence with a 10px word spacing.

word-spacing: -5px

単語間が5px詰められ、単語同士が近づきます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-word-spacing-minus5px">
        This is a sample sentence with a negative 5px word spacing.
    </div>
</div>

CSSコード

.css-sample-word-spacing-minus5px {
    width: 100%;
    word-spacing: -5px;
    background-color: lightpink;
}

This is a sample sentence with a negative 5px word spacing.

まとめ

  • word-spacingプロパティは、単語間のスペースを調整し、レイアウトやデザインを柔軟にカスタマイズできます。
  • normal: デフォルトの単語間隔を使用します。
  • 10px: 単語間に10pxのスペースを追加します。単語同士が広がります。
  • -5px: 単語間が5px詰められ、単語同士が近づきます。過度な負の値の使用は避けましょう。
スポンサーリンク