Webページの見出しを少しゆったりと表示したり、文字と文字の間を広げたりしたいと思ったことはありませんか？
そんなときに使うのが、CSSの「letter-spacing（レタースペーシング）」です。
letter-spacingを使うと、文字の間隔を広げたり、反対に狭くしたりできます。例えば、見出しの文字間隔を少し広げるだけでも、見た目の印象が変わります。
この記事では、letter-spacingの基本的な書き方、文字間隔を広げる・狭める方法、pxとemの違い、見出しでの使い方を初心者向けにわかりやすく解説します。
CSSが反映されない場合の確認方法も紹介するので、実際にコードを書きながら試してみましょう。
CSSのletter-spacingとは？
letter-spacingは、文字と文字の間隔を調整するCSSのプロパティです。
プロパティとは、文字の色や大きさなど、Webページの見た目を変更するための設定項目のことです。
letter-spacingを使うと、次のような調整ができます。
- 文字と文字の間隔を広げる
- 文字と文字の間隔を狭める
- 見出しやラベルの文字間隔を整える
例えば、次のCSSを見てください。
h2 {
letter-spacing: 0.05em;
}このCSSでは、h2タグで作成した見出しの文字間隔を少し広げています。
0.05emは、文字の大きさを基準にして間隔を調整する指定方法です。
letter-spacingは、文字そのものの大きさを変えるわけではありません。文字の大きさを変える場合はfont-sizeを使用します。
letter-spacingの基本的な使い方
ここからは、HTMLとCSSを使って文字間隔を変更してみましょう。
今回は、同じ文章を「標準」「広め」「狭め」の3種類で表示します。
STEP1：HTMLを書く
まずは、次のHTMLを用意してください。
<p class="spacing-normal">HTMLとCSSの学習</p>
<p class="spacing-wide">HTMLとCSSの学習</p>
<p class="spacing-narrow">HTMLとCSSの学習</p>それぞれのpタグに、異なるclassを付けています。
classは、CSSを適用する文字や要素を区別するための目印です。
STEP2：CSSで文字間隔を指定する
続いて、次のCSSを記述します。
.spacing-normal {
letter-spacing: normal;
}
.spacing-wide {
letter-spacing: 0.15em;
}
.spacing-narrow {
letter-spacing: -0.03em;
}それぞれの設定には、次の意味があります。
normal：通常の文字間隔にする0.15em：文字と文字の間隔を広げる-0.03em：文字と文字の間隔を少し狭くする
CSSでは、数字の前に「-（マイナス）」を付けると、文字間隔を狭めることができます。
STEP3：ブラウザーで表示を確認する
HTMLとCSSを保存したら、ブラウザーで表示を確認してみましょう。
同じ文章でも、文字間隔を変えると次のような違いが生まれます。
HTMLとCSSの学習
HTMLとCSSの学習
HTMLとCSSの学習
上から順番に、通常の文字間隔、広げた文字間隔、狭めた文字間隔で表示しています。
このように、letter-spacingは正の値で間隔が広がり、負の値で間隔が狭くなります。
ただし、負の値を大きくしすぎると、文字同士が重なって読みにくくなる場合があります。
まずは小さな値から試して、読みやすい文字間隔に調整しましょう。
letter-spacingで使う値と単位の違い
letter-spacingでは、文字間隔を指定するときにnormalやpx、emなどを使用します。
初心者が最初に覚えておきたい指定方法は、次の3つです。
| 値・単位 | 指定例 | 意味 |
|---|---|---|
| normal | letter-spacing: normal; | 通常の文字間隔にする |
| px | letter-spacing: 1px; | 文字間隔をピクセル単位で調整する |
| em | letter-spacing: 0.1em; | 文字サイズを基準に間隔を調整する |
normal：通常の文字間隔にする
p {
letter-spacing: normal;
}normalは、ブラウザーがフォントなどに応じた通常の文字間隔で表示する指定です。
特別に文字間隔を広げたり狭めたりする必要がない場合は、normalを使用できます。
px：ピクセル単位で指定する
p {
letter-spacing: 1px;
}pxは、CSSで長さを指定するときによく使う単位です。
この例では、通常の文字間隔に対して1px分の間隔を追加します。
例えば、2pxに変更すると、1pxのときよりも文字間隔が広くなります。
em：文字サイズを基準に指定する
p {
font-size: 20px;
letter-spacing: 0.1em;
}emは、文字サイズを基準に長さを指定する単位です。
letter-spacingでemを使用する場合は、その文字のfont-sizeを基準に計算します。
この例では、文字サイズが20pxなので、0.1emは2pxに相当します。
/* 文字サイズが20pxの場合 */
letter-spacing: 0.1em; /* 2px相当 */
letter-spacing: 0.2em; /* 4px相当 */文字サイズを変更すると、それに合わせて文字間隔も変わるため、見出しなどの調整に便利です。
CSSの単位について詳しく知りたい場合は、CSSの単位まとめ（px・%・rem・emの違い）も参考にしてください。
見出しの文字間隔を調整する実用例
letter-spacingは、Webページの見出しやメニュー、短いラベルなどによく使用します。
例えば、見出しの文字間隔を少し広げると、ゆったりとした印象にできます。
HTMLの記述例
<h2 class="sample-heading">CSS入門</h2>CSSの記述例
.sample-heading {
font-size: 24px;
letter-spacing: 0.08em;
}このCSSでは、文字サイズを24pxにし、文字間隔を0.08emに指定しています。
見出しの大きさはfont-size、文字と文字の間隔はletter-spacingで調整しています。
表示結果
CSS入門
CSS入門
上は通常の文字間隔、下は0.08emで文字間隔を広げた例です。
短い見出しでも、文字間隔を少し変更するだけで見た目の印象が変わります。
最初は0.02em〜0.1em程度の小さな値から試すと、違いを確認しやすいでしょう。
ただし、これは必ず使用すべき数値ではありません。実際の見出しの長さやフォントに合わせて調整してください。
letter-spacingを使うときの注意点
文字間隔を調整するときは、デザインだけでなく、文章の読みやすさも大切です。
文字間隔を広げすぎない
letter-spacingの値を大きくすると、文字と文字の間が広くなります。
短い見出しでは見た目が整っても、長い文章では文字が離れすぎて読みにくくなることがあります。
本文全体に設定する場合は、特に注意しましょう。
負の値で文字を詰めすぎない
負の値を指定すると、文字間隔を狭くできます。
p {
letter-spacing: -0.05em;
}少し文字を詰めたいときには便利ですが、値を大きくしすぎると文字同士が重なる場合があります。
文字が読みにくくならない範囲で調整しましょう。
スマートフォンでも確認する
パソコンではきれいに表示されていても、画面の小さいスマートフォンでは見出しが途中で折り返されることがあります。
特に、長い見出しに大きなletter-spacingを指定すると、文字が横に広がりやすくなります。
文字間隔を変更したら、パソコンとスマートフォンの両方で確認することをおすすめします。
文字サイズや行間との違いを理解する
CSSには、文字の見た目を調整するプロパティがいくつかあります。
| プロパティ | 調整する内容 |
|---|---|
| font-size | 文字の大きさ |
| font-weight | 文字の太さ |
| line-height | 行の高さ |
| letter-spacing | 文字と文字の間隔 |
letter-spacingは、文字の大きさや行間を変更するものではありません。
何を調整したいのかに合わせて、適切なプロパティを使い分けましょう。
letter-spacingが反映されないときの確認方法
letter-spacingを指定しても、文字間隔が変わらない場合があります。
そんなときは、次の項目を確認してみましょう。
HTMLのclass名とCSSが一致しているか
まずは、HTMLとCSSで同じclass名を使用しているか確認します。
例えば、HTMLが次のようになっている場合です。
<p class="sample-text">文字間隔を調整します</p>CSSでは、次のように指定します。
.sample-text {
letter-spacing: 0.1em;
}class名が違っていると、CSSは適用されません。
ほかのCSSで上書きされていないか
同じ文字に複数のCSSが指定されていると、別の設定が優先される場合があります。
その場合は、ブラウザーの開発者ツールを使って、どのCSSが適用されているか確認しましょう。
CSSファイルを保存・読み込みできているか
CSSファイルを変更したあとに保存していなかったり、HTMLから正しいCSSファイルを読み込んでいなかったりすると、変更が反映されません。
次の点を確認してみてください。
- CSSファイルを保存したか
- HTMLから正しいCSSファイルを読み込んでいるか
- ブラウザーを更新したか
- 指定した値が小さすぎて違いがわかりにくくなっていないか
例えば、0.01emでは違いがわかりにくい場合があります。表示を確認するときは、一度0.2emなどに変更して、文字間隔が変わるか試してみましょう。
まとめ
CSSのletter-spacingは、文字と文字の間隔を調整するためのプロパティです。
今回のポイントを振り返りましょう。
- letter-spacingを使うと、文字間隔を広げたり狭めたりできる
- 正の値は文字間隔を広げ、負の値は狭くする
- pxはピクセル単位、emは文字サイズを基準に指定する
- 見出しや短いラベルの文字間隔を整えるときに便利
- 文字間隔を広げすぎたり、狭めすぎたりしないよう注意する
まずは、次のCSSを使って文字間隔を変更してみましょう。
h2 {
letter-spacing: 0.05em;
}0.05emを0.1emに変更したり、0.02emに戻したりすると、文字の並び方がどのように変わるか確認できます。
文字間隔は少しの調整でも見た目が変わるため、読みやすさを確認しながら使ってみてください。
次に読む記事
→ HTML講座トップページへ
→ CSS講座トップページへ
