CSS辞典 letter-spacingプロパティの解説

文字の間隔を指定する「letter-spacingプロパティ」の使用方法を記載

CSS3／2.1

対応ブラウザ

初期値	normal
適用される要素	すべての要素
モジュール	CSS Text Module Level3
継承	あり

概要・使用方法

{letter-spacing: 間隔;}

「letter-spacingプロパティ」は文字の間隔を指定します。

使用方法

normal	文字の間隔を調整しません。フォントの標準の間隔になります。
数値+単位	文字の間隔を単位付きの数値で指定します。負の値も指定できます。

CSS Text Level 3ではさらい、日本語など言語特有のルールを使って文字間に空白を入れたり取り除いたありするための「text-spacingプロパティ」も新しく追加予定とされています。ただし、このプロパティへのサポートはブラウザの選択に任されており、優先的に実装される見込みはありません。

CSS3変更点
CSS Text Level 3 では、letter-spacingプロパティの値として、normalまたは長さを示す値を、１～３個まで指定できます。値を３個指定した場合は、文字間の間隔の最適値、最小値、最大値をそれぞれ表します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>letter-spacingプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample1{letter-spacing: 0.5em;}
    </style>
  </head>
  <body>
      <h1>letter-spacingなし</h1>
      <p>危険な夏の生物。それはクラゲといわれる動物。</span></p>
      <h1>letter-spacingあり</h1>
      <p class="sample1">危険な夏の生物。それはクラゲといわれる動物。</span></p>
  </body>
</html>

実行結果