letter-spacing プロパティ
最終更新：2026-09-13
letter-spacing letter-spacing プロパティ
letter-spacing プロパティは、テキスト内の文字間の間隔を設定します。正の値は間隔を広げ、負の値は狭めます。見出しや、大文字の英文本の可読性向上によく使われます。
| カテゴリ | |
|---|---|
| 初期値 | normal |
| 継承 | はい |
| 適用対象 | |
| アニメーションタイプ | |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
letter-spacing: normal | <length>;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
normal | キーワード | 既定の文字間隔 |
<length> | タイプ | 固定の文字間隔の値 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| letter-spacing | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： 英文本のすべて大文字では、letter-spacing を 0.05em〜0.1em 加えると可読性が目立って向上します。
❓ よくある質問
Qletter-spacing プロパティは中国語テキストで正しく機能しますか？
Aはい。漢字の間に 0.5px〜1px を加えると、本文がより軽やかに、見出しがよりデザインされて見えますが、2px を超えると読書のリズムが崩れます。letter-spacing は中国語と英語を問わずすべての文字に一律に適用されます。
Qletter-spacing プロパティは両端揃えのテキストの配置に影響しますか？
Aはい。間隔は各文字の後ろに余分な幅を占有し、text-align: justify では余った空間が間隔によって分配されるため、隙間が不揃いに見えることがあります。英文本のすべて大文字では、适度な増加はかえって可読性を高めます。
Qletter-spacing プロパティは CSS ルールで負の値を受け取れますか？
Aはい。負の値は文字を互いに近づけます。例えば -0.05em は大きな見出しテキストを引き締めますが、小さすぎる値はグリフが重なり可読性を損ないます。レスポンシブなレイアウトでは、フォントサイズに応じて拡縮する em を推奨します。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
