🆕CSS新機能：text-autospaceで中日英混在テキストの読みやすさを向上させよう

Posted at 2025-10-18

`text-autospace` とは

text-autospace は、文字間隔を自動で調整する CSS プロパティです。
主に日本語などの**全角文字（漢字・ひらがな・カタカナ）**と半角文字（英数字）の組み合わせで、文字のバランスを最適化するために使われます。

値	説明
`normal`	デフォルトの動作。CJK文字と非CJK文字、句読点の周囲に自動でスペースを追加します。`ideograph-alpha` と `ideograph-numeric` を両方適用したのと同じ効果です。
`no-autospace`	CJK文字と非CJK文字の間の自動スペースを無効化します。
`ideograph-alpha`	漢字・仮名などの表意文字とアルファベット文字の間にスペースを追加します（数字との間は対象外）。
`ideograph-numeric`	表意文字と数字の間にスペースを追加します（アルファベットとの間は対象外）。
`punctuation`	句読点の前後に適切なノーブレークスペースを挿入します。
`insert`	表意文字と非表意文字の間にスペースが存在しない場合のみ、スペースを追加します。
`replace`	既存のスペース（U+0020 など）を指定された間隔に置き換えます。
`auto`	ブラウザが最適と判断した文字間隔を自動適用します。

ポイント：ideograph-alpha や ideograph-numeric は、混在した文章でも見た目の読みやすさを向上させるために使います。

<p>今日はCSSの新しいプロパティtext-autospaceを試しています。</p>

p {
  text-autospace: auto;
}