CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで単語間のスペースを調整する方法｜word-spacingプロパティの使い方

Webページ上のテキストは、単語同士の間隔が詰まりすぎていたり、逆に広すぎたりすると読みにくくなります。CSSではword-spacingプロパティを使うことで、単語と単語の間隔（ワードスペース）を簡単に調整できます。

この記事では、word-spacingプロパティの基本的な使い方から、実際のコード例までをわかりやすく解説します。

word-spacingプロパティとは

word-spacingプロパティは、テキスト内の単語間のスペース幅を指定するためのCSSプロパティです。指定できる値は以下の通りです。

word-spacing: normal | length | initial | inherit;

各値の意味

  • normal：フォントやブラウザが定める標準の間隔を適用します（初期値）。
  • length：具体的な長さをpx、em、rem、cmなどの単位で指定します。負の値も指定可能です。
  • initial：このプロパティの初期値（normal）に戻します。
  • inherit：親要素のword-spacingの値を継承します。

例1：normalと10pxの比較

まずは、通常の間隔（normal）と10pxを指定した場合の違いを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
   word-spacing: normal;
}
p.demo2 {
   word-spacing: 10px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>

出力結果

demo1クラスの段落は標準の間隔で表示され、demo2クラスの段落は単語ごとに10pxずつ余白が広がって表示されます。数値を大きくするほど、単語間のスペースが広がることが確認できます。

例2：cmやpxなど異なる単位での指定

次に、cmとpxという異なる単位を使った例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
   word-spacing: 3cm;
}
p.demo2 {
   word-spacing: 40px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>

出力結果

demo1クラスでは3cmという大きな間隔が設定されるため、単語が大きく離れて表示されます。一方、demo2クラスでは40pxの間隔となり、こちらも標準よりかなり広いスペースが適用されます。このように、単位や数値を変えることで柔軟にデザインを調整できます。

まとめ

word-spacingプロパティを使えば、単語間のスペースを細かくコントロールできます。英文テキストの可読性向上やタイポグラフィの微調整に役立つので、normal・length・initial・inheritの4つの値の違いをしっかり押さえておきましょう。なお、日本語のような単語間にスペースを持たない言語の場合は、letter-spacing（文字間隔）の方が効果的な場面もありますので、用途に応じて使い分けるのがおすすめです。

  1. CSSイメージスプライトの利点とは？HTTPリクエスト削減でサイト表示を高速化する方法

    Webサイトのパフォーマンス改善テクニックのひとつが「CSSイメージスプライト」です。複数の画像を1枚の画像ファイルにまとめることで、ブラウザがサーバーへ送信するHTTPリクエストの数を大幅に減らせます。リクエスト数が減ればサイトの読み込み時間は短縮され、ページの表示速度向上につながります。さらに、画像があらかじめ読み込まれた状態になるため、マウスオーバーなどのイベントで画像を切り替える際も動作がスムーズになり、画像の読み込み遅延によるちらつきを防ぐことができます。イメージスプライトとは？イメージスプライトとは、複数の小さな画像（アイコンなど）を1枚の大きな画像にまとめたものです。CSSのba

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ