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

CSSのletter-spacingプロパティで文字間隔を設定する方法

文字と文字の間隔（字間）を調整したい場合は、CSSの letter-spacing プロパティを使用します。このプロパティを使うことで、テキストの読みやすさやデザイン性を自由にコントロールできます。

letter-spacingプロパティに指定できる値は以下の通りです。

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

各プロパティ値の意味

  • normal … フォント標準の文字間隔を適用します（初期値）。
  • length … 「px」「cm」「em」などの単位で間隔を数値指定します。負の値を指定すると、文字間隔を狭めることも可能です。
  • initial … プロパティを初期値（normal）に戻します。
  • inherit … 親要素のletter-spacingの値を継承します。

サンプルコード①：正の値で文字間隔を広げる

まずは「1px」と「10px」を指定して、文字間隔の違いを確認してみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
    letter-spacing: 1px;
}
p.demo2 {
    letter-spacing: 10px;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<h2>見出し2</h2>
<p class="demo1">これはデモ用のテキストです。</p>
<h2>見出し2</h2>
<p class="demo2">これはデモ用のテキストです。</p>
</body>
</html>

表示結果

CSSのletter-spacingプロパティで文字間隔を設定する方法

「10px」を指定した段落の方が、文字同士の間隔が大きく開いているのが分かります。

サンプルコード②：cm指定と負の値の使用例

次に、より大きな単位である「cm」を指定した例と、負の値で文字間隔を狭めた例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
    letter-spacing: 1cm;
}
p.demo2 {
    letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<h2>見出し2</h2>
<p class="demo1">これはデモ用のテキストです。</p>
<h2>見出し2</h2>
<p class="demo2">これはデモ用のテキストです。</p>
</body>
</html>

表示結果

CSSのletter-spacingプロパティで文字間隔を設定する方法

「1cm」を指定すると非常に広い字間になり、「-2px」のように負の値を指定すると通常より文字が詰まって表示されます。

まとめ

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からは属性セ