【CSS Modules】letter-spacingプロパティの使い方

letter-spacingプロパティは、テキストの文字と文字の間隔（字間）を調整するための値を保持するプロパティです。このプロパティを使用することで、Webページ上の文章の見た目や可読性を細かく制御することができます。

具体的には、指定されたテキスト要素内の各文字間にどれくらいのスペースを設けるかを定義します。これにより、デザインの要求に応じてテキストの視覚的なバランスを整えたり、特定のテキストブロックを読みやすくしたりする目的で利用されます。

指定できる値には、主に以下の種類があります。まず、「normal」は、ブラウザのデフォルト設定に基づいた標準の字間を適用します。これは特別な指定がない限り、ほとんどのテキスト要素に適用される初期値です。次に、長さの単位を用いた値を指定することができます。例えば、「px（ピクセル）」、「em（親要素のフォントサイズに対する相対的な単位）」、「rem（ルート要素のフォントサイズに対する相対的な単位）」などが利用可能です。これらの単位で具体的な長さを指定することで、文字間のスペースを正確に調整できます。正の値を指定すると字間が広がり、負の値を指定すると字間が狭まります。

例えば、「letter-spacing: 2px;」と指定すると、各文字間に2ピクセルの追加スペースが設けられます。「letter-spacing: -0.5px;」のように負の値を指定すると、文字が通常よりも密接に表示され、場合によっては文字同士が重なることもあります。このプロパティは、見出しの文字間を広げて視覚的なインパクトを高めたり、本文の文字間を微調整して読者の読みやすさを向上させたりする場合に有効です。

ただし、負の値を過度に使用すると文字が重なり合ってしまい、テキストが読みにくくなる可能性がありますので注意が必要です。また、文字間を広げすぎても間延びした印象を与え、かえって可読性を損なうことがあります。適切な値を見つけるためには、さまざまな環境での表示確認が推奨されます。letter-spacingプロパティは、CSSにおいてテキストの表現力を高めるための基本的ながら非常に強力なツールの一つです。

Copy
1letter-spacing: 1px;

引数なし

引数はありません

戻り値なし

戻り値はありません