HTML DOM Style の letterSpacing プロパティとは？使い方を徹底解説
HTML DOM の letterSpacing プロパティは、テキスト内の文字間隔（レタースペーシング）を設定または取得するために使用されるスタイルプロパティです。JavaScript から動的に文字間隔を制御したい場合に活用できます。
letterSpacing プロパティの構文
letterSpacing プロパティを設定する場合の基本構文は以下のとおりです。
object.style.letterSpacing = "normal|length|initial|inherit"
指定できる値の一覧
letterSpacing プロパティには、以下の4つの値を指定できます。
| 値 | 説明 |
|---|---|
| normal | デフォルト値です。文字間隔が通常の状態に設定されます。 |
| length | px や em などの長さの単位で文字間隔を指定します。負の値も指定可能です。 |
| initial | このプロパティを初期値（デフォルト値）に戻します。 |
| inherit | 親要素のプロパティ値を継承します。 |
letterSpacing プロパティの使用例
ここでは、ボタンをクリックすると段落の文字間隔が広がるサンプルコードを紹介します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<script>
function changeSpacing() {
document.getElementById("myP").style.letterSpacing = "12px";
document.getElementById("Sample").innerHTML = "文字間隔が広がりました";
}
</script>
</head>
<body>
<p id="myP">これはサンプル段落内のテキストです。段落の2行目です。段落の3行目です。</p>
<p>下のボタンをクリックすると、上の段落の文字間隔が広がります</p>
<button type="button" onclick="changeSpacing()">文字間隔を広げる</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを表示した直後の初期状態は以下のようになります。
「文字間隔を広げる」ボタンをクリックすると、JavaScript の changeSpacing() 関数が実行され、letterSpacing が「12px」に設定されて文字間隔が大きく広がります。
まとめ
letterSpacing プロパティを使えば、CSS を直接編集することなく、JavaScript から動的にテキストの文字間隔を操作できます。デザインの調整やユーザー操作に応じた演出など、さまざまな場面で活用できる便利なプロパティです。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM Style の letterSpacing プロパティとは？使い方を徹底解説
HTML DOM の letterSpacing プロパティは、テキスト内の文字間隔（レタースペーシング）を設定または取得するために使用されるスタイルプロパティです。JavaScript から動的に文字間隔を制御したい場合に活用できます。 letterSpacing プロパティの構文 letterSpacing プロパティを設定する場合の基本構文は以下のとおりです。 object.style.letterSpacing = normal|length|initial|inherit 指定できる値の一覧 letterSpacing プロパティには、以下の4つの値を指定できます。 値説明