先生と生徒の会話形式で理解しよう

生徒

「CSSで文字と文字の間のスペースを広くしたり、狭くしたりできますか？」

先生

「はい、できますよ。文字の間隔は letter-spacing、単語の間隔は word-spacing というプロパティを使って調整できます。」

生徒

「それって難しい設定が必要なんですか？」

先生

「いえいえ、すごくシンプルですよ！それでは、実際に使い方を見てみましょう。」

1. CSSで文字と文字の間隔を調整するletter-spacingとは？

CSS（シーエスエス）とは、ウェブページのデザインや見た目を調整するためのスタイルシートです。その中でも letter-spacing（レタースペーシング） は、文字と文字の間のスペース（すき間）を指定するためのプロパティです。

例えば、新聞の文字がギュッと詰まっていて読みづらいと感じたことはありませんか？そんなときに、文字の間隔を少し広げることで、読みやすさがアップします。これをCSSで実現できるのが letter-spacing です。

2. 実際にletter-spacingを使ってみよう

下記は文字の間隔を広げるCSSの例です。1つ1つの文字の間に「2ピクセル」分のスペースを追加しています。


<style>
p.spacing-example {
    letter-spacing: 2px;
}
</style>

<p class="spacing-example">これは文字間隔が広がった文章です。</p>

ブラウザ表示

ポイント：「px（ピクセル）」は、画面上の最小単位です。大きい数値にすれば広く、小さければ狭くなります。

3. CSSで単語と単語の間隔を調整するword-spacingとは？

word-spacing（ワードスペーシング） は、単語と単語の間のスペースを調整するためのプロパティです。文字間ではなく、単語の間のスペースにだけ影響します。

たとえば、「こんにちは　世界」という2つの単語の間をもっと広げて見せたいときに使えます。たくさんの文章が並んでいるときなど、デザインとして整えるのにも便利です。

4. 実際にword-spacingを使ってみよう

次の例では、単語と単語の間隔を「10ピクセル」広げています。


<style>
p.word-spacing-example {
    word-spacing: 10px;
}
</style>

<p class="word-spacing-example">これは 単語 間隔 を 広げた 文章 です。</p>

ブラウザ表示

このように word-spacing を使うと、文章に余裕を持たせたり、特別なデザインをしたりするのに役立ちます。

5. letter-spacingとword-spacingの違いをしっかり理解しよう

ここで、2つのプロパティの違いをおさらいしましょう。

letter-spacing：1文字ずつの間隔を調整する
word-spacing：単語と単語の間のスペースを調整する

文字と文字の間を広げたいときは letter-spacing、単語と単語の間を広げたいときは word-spacing を使う、と覚えておきましょう。

6. 数値にはどんな単位を使えばいい？

CSSでは、数値の後ろに単位を付けて距離を指定します。

px（ピクセル）： 一般的によく使われる単位。画面の最小単位です。
em： 現在の文字サイズを基準とした単位。柔軟なサイズ調整に使われます。

初心者のうちは「px（ピクセル）」を使うのが簡単でおすすめです。

7. 間隔を狭めたいときはマイナスの値も使える

letter-spacingやword-spacingでは、スペースを広げるだけでなく「狭める」こともできます。その場合は、マイナスの数値を使います。


<style>
p.narrow-letter {
    letter-spacing: -1px;
}
</style>

<p class="narrow-letter">文字間隔を狭くした文章です。</p>

ブラウザ表示

あまり詰めすぎると読みにくくなるので、読みやすさを保つために微調整すると良いでしょう。

8. 文字や単語の間隔をデザインに活かすコツ

文字間隔や単語間隔を調整するだけで、文章の読みやすさや見た目の美しさが大きく変わります。

見出しは文字間隔を広げて印象を強くする
本文は狭すぎず、広すぎずが基本
タイトルロゴやキャッチコピーではデザインに合わせて自由に設定

CSSで文字のデザインを自由に変えることができるようになると、ウェブサイト全体の印象もプロっぽくなります。

9. まとめて指定することも可能

CSSでは複数のプロパティを1つのクラスにまとめて設定することができます。以下のように一緒に使ってみましょう。


<style>
p.spacing-both {
    letter-spacing: 1px;
    word-spacing: 8px;
}
</style>

<p class="spacing-both">文字と単語の両方の間隔を調整した例です。</p>

ブラウザ表示

このように複数のプロパティを組み合わせることで、見やすく整った文章を作ることができます。

まとめ

この記事では、CSSにおける文字間隔と単語間隔の調整方法について丁寧に学び、letter-spacingとword-spacingがどのように文章の読みやすさやWebデザインの印象を変えるかを詳しく確認しました。文字と文字の距離を自然に整えることで、見出しの強調や本文の可読性向上につながり、デザイン全体の統一感が生まれます。とくに、読みづらさを感じる文章でも、文字の間隔を少し広げたり狭めたりするだけで視線の流れが変わり、ユーザーにとって快適な文章レイアウトを実現できます。また、単語と単語の間隔を調整するword-spacingは、文章の広がりや呼吸感を演出するのに非常に効果的で、キャッチコピーやタイトルなどデザイン性の高い部分でも役立ちます。 CSSではpxやemなどさまざまな単位を利用できますが、初心者にとって扱いやすいpxを使えば、より直感的に間隔を調整でき、文章のバランスを整える作業がスムーズになります。さらにletter-spacingとword-spacingはマイナス値も使用でき、文字を引き締めたい場面にも活用できます。過度に狭めると読みにくくなりますが、少しずつ調整することで見た目の印象を洗練させることができます。また、複数のプロパティをひとつのクラスにまとめて設定すれば、デザイン全体を効率的に整えることができます。スタイルの管理がしやすくなり、複雑な文章デザインでも美しく統一されたレイアウトを実現できます。このように、CSSで文字間隔や単語間隔を自在にコントロールできるようになると、Webページの印象は大きく変わり、読み手にとって心地よいデザインへと進化します。文字の配置や余白の調整は小さな工夫に見えて、実はサイト全体の品質を大きく左右する重要な要素であり、今回学んだ技術は今後のページ制作でも確実に役立つ知識となるでしょう。

サンプルコード：まとめとして再確認できるCSS設定


<style>
p.sample-letter {
    letter-spacing: 3px;
}
p.sample-word {
    word-spacing: 12px;
}
p.sample-both {
    letter-spacing: 2px;
    word-spacing: 8px;
}
</style>

<h3>まとめ用サンプルデザイン</h3>
<p class="sample-letter">この文章は文字と文字のあいだを広げています。</p>
<p class="sample-word">この 文章 は 単語 と 単語 の あいだ を 広げて 表示 しています。</p>
<p class="sample-both">文字 と 単語 の 間隔 を 両方 調整 した サンプル です。</p>

ブラウザ表示

先生と生徒の振り返り会話

生徒「CSSで文字の間隔を調整するだけで、文章の印象がこんなに変わるとは思いませんでした。」

先生「そうなんですよ。letter-spacingとword-spacingはとても単純なプロパティですが、使い方次第で読みやすさもデザイン性も大きく向上します。」

生徒「たしかに、見出しを強調したり、本文を読みやすくしたり、場面に合わせて調整できるのが便利ですね。」

先生「そのとおりです。数値を変えるだけで印象がガラッと変わるので、実際に何度か試しながら最適な間隔を探すのがポイントです。」

生徒「word-spacingもデザインに応じて使えるので、さまざまな見せ方ができそうです。」

先生「単語に余白を持たせると文章が呼吸しているように見えるので、キャッチコピーやタイトルにもよく使います。今回の内容はWebデザインの基本でもあるので、ぜひ実際のページ制作でも試してみてください。」

生徒「はい！文字の間隔を調整するだけでこんなに表現の幅が広がるなら、もっと練習して自分のデザインに活かしたいです。」

先生「ぜひ、経験を積むことで感覚が身についていきますよ。」