◀ 10.

日本語での効き方）

▶

編集

この記事の要点

word-spacing は単語と単語の間隔 (半角スペースの幅) を調整する CSS プロパティ
値: normal (初期値) / 長さ (px, em) / %
正の値で広く、負の値で狭くなる — 0.5em や -0.05em 程度が定番
日本語の文章にはほぼ効かない — 単語の区切り (空白) がないため
英文タイポグラフィの精密調整、見出しのデザイン、両端揃え (text-align: justify) との組み合わせで活躍

word-spacing プロパティとは

word-spacing はテキスト内の単語と単語の間隔 (具体的には半角スペースの幅) を増減させる CSS プロパティです。欧文の見出しデザインや両端揃えの調整で使われます。

値の指定

値	意味
`normal` (初期値)	フォント標準の単語間
`<length>`	標準間隔に加算される値 (`px`, `em`, `rem`)
`<percentage>`	フォントサイズ基準の % (実装は限定的)

重要: length 値は追加分であり、置換ではありません。word-spacing: 5px は標準間隔 + 5px となります。

基本サンプル

/* 単語間を広げる */
.wide {
    word-spacing: 0.5em;
}

/* 単語間を詰める */
.tight {
    word-spacing: -0.05em;
}

/* 強調的に広げる */
.spread {
    word-spacing: 20px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

<p class="wide">Hello world this is wide spacing</p>
<p class="tight">Hello world this is tight</p>
<p class="spread">Spread out heading</p>

word-spacing と letter-spacing の違い

プロパティ	対象	用途
`word-spacing`	単語間 (空白の幅)	英文の単語間調整、両端揃えの補助
`letter-spacing`	文字間 (字間)	見出しの強調、トラッキング

.demo {
    word-spacing: 0.5em;    /* 単語と単語の間 */
    letter-spacing: 0.1em;  /* 1 文字 1 文字の間 */
}

日本語の場合

日本語の文章は単語の区切りに半角スペースを使わないため、word-spacing はほぼ効果がありません。文字間を調整したい場合は letter-spacing を使います。

/* 日本語に効かない */
.japanese-no-effect {
    word-spacing: 1em;        /* 効果なし */
}

/* 日本語の字間を広げる */
.japanese {
    letter-spacing: 0.1em;    /* これは効く */
}

/* 半角スペース混じりなら一部効く */
.mixed {
    word-spacing: 0.5em;
    /* 「私 は です」のように空白を入れた箇所だけ広がる */
}

両端揃え (justify) との組み合わせ

text-align: justify は単語間を伸縮させて両端を揃えます。その伸縮の度合いを word-spacing で制御することはできませんが、可読性に影響する組合せを意識すると良いです。

.article {
    text-align: justify;
    word-spacing: normal;       /* 基本は normal */
    hyphens: auto;              /* 単語が大きく開かないようハイフネーション併用 */
    text-justify: inter-word;   /* 単語間で調整 */
}

見出しのデザイン応用

/* ゆったり広げた見出し (キャッチコピー風) */
.hero-title {
    font-size: 3rem;
    font-weight: 300;
    text-transform: uppercase;
    word-spacing: 0.3em;
    letter-spacing: 0.1em;
    text-align: center;
}

/* タイトな見出し */
.dense-title {
    font-weight: 800;
    word-spacing: -0.1em;
    letter-spacing: -0.02em;
}

負の値で詰める

狭い領域に英文を収める際、わずかに負の値で詰めることがあります。やりすぎると読めなくなるので慎重に。

.nav-label {
    font-size: 0.85rem;
    word-spacing: -0.05em;     /* 控えめに詰める */
}

継承

word-spacing は継承されるプロパティです。body に指定すれば全テキストに反映されます。逆に特定要素だけ調整したい場合は、その要素に明示的に指定します。

body {
    word-spacing: 0.05em;        /* 全体にゆとり */
}
.nav {
    word-spacing: normal;        /* ナビは元に戻す */
}

アニメーション可能

word-spacing はアニメーション可能 (animatable) なプロパティです。トランジションやキーフレームで滑らかに変化させられます。

.spread-on-hover {
    transition: word-spacing 0.3s ease;
}
.spread-on-hover:hover {
    word-spacing: 0.4em;
}

@keyframes typewriter {
    from { word-spacing: 0; }
    to   { word-spacing: 0.3em; }
}

ブラウザ実装と互換性

ブラウザ	対応
Chrome / Edge	全バージョンで対応
Firefox	全バージョンで対応
Safari	全バージョンで対応
IE	IE6 から対応 (% は不安定)

基本キーワードや em / px 値は全ブラウザで安全に使えます。

FAQ

Q: 日本語で文字間を広げたい
A: letter-spacing を使う。word-spacing はスペースが含まれないため効かない。

Q: 単位の % は使える？
A: 仕様上は存在するがブラウザ実装が限定的。実用上は em / px を使う。

Q: word-break / word-wrap との関係は？
A: 別物。word-break は改行ルール、word-wrap (overflow-wrap) は長い単語の折り返しを扱う。word-spacing は間隔のみ。

Q: word-spacing で半角スペースの幅以外は変えられる？
A: ホワイトスペース文字 (空白) の幅を増減させる仕組みなので、文字そのものや句読点は対象外。文字の太さ・字形には影響しません。

ページ一覧

その他