CSSのletter-spacingプロパティを使って文字間隔（字間）を設定する方法
CSSのletter-spacingプロパティを使用すると、テキストの文字と文字の間隔（字間）を自由に指定できます。値にはnormalのほか、pxやemなどの長さの単位を指定でき、タイトルや見出しのデザイン性を高めたり、可読性を調整したりする際に非常に便利です。
基本の構文
letter-spacing: normal | <length>;
normalを指定するとブラウザ標準の間隔になり、数値を指定するとその分だけ文字間が広がります。負の値を指定すれば、文字間を詰めることも可能です。
サンプル1：em単位で文字間隔を指定する
以下の例では、最初のp要素だけにletter-spacingを適用し、文字間隔がどのように変化するかを比較できます。
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
margin: 3%;
padding: 3%;
background-color: seagreen;
color: white;
letter-spacing: 2em;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<p>BOOM</p>
<p>BOOM</p>
</body>
</html>
出力結果
上記のコードを実行すると、次のように表示されます。
最初の「BOOM」には2emの字間が設定されているため、下の通常テキストと比べて大きく間隔が広がっているのが確認できます。
サンプル2：px単位で文字間隔を指定する
次の例では、12pxという絶対的な単位で文字間隔を指定しています。アルファベット全体に適用すると、その効果がひと目でわかります。
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 3%;
padding: 3%;
border: 23px ridge navy;
}
p {
margin: 3%;
background-color: navajowhite;
letter-spacing: 12px;
font-size: 1.2em;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>BOOM</p>
<p>abcdefghijklmnop-qrstuvwxyz</p>
</div>
</body>
</html>
出力結果
実行結果は以下の通りです。
まとめ
letter-spacingプロパティを使いこなすことで、テキストの印象を大きく変えることができます。相対単位（em）はフォントサイズに連動するためレスポンシブデザインに向いており、絶対単位（px）は一定の間隔を保ちたい場合に適しています。用途に応じて使い分けましょう。
-
CSS tab-sizeプロパティを使ってHTMLのタブサイズを設定する方法
CSSのtab-sizeプロパティを使用すると、タブ文字によって挿入される空白（ホワイトスペース）の幅を自由に設定できます。デフォルトではタブ幅は8文字分に設定されていますが、このプロパティを使えば好みの幅に調整可能です。本記事では、具体的なサンプルコードを通じてtab-sizeプロパティの使い方を解説します。 tab-sizeプロパティの基本 tab-sizeプロパティは、<pre>要素やwhite-space: pre;が適用された要素など、タブ文字がそのまま表示される環境で効果を発揮します。値には整数（文字数）または長さの単位を指定でき、Firefoxなど一部のブラウザではベ
-
CSSのword-spacingプロパティを使って単語間の間隔を管理する方法
CSSのword-spacingプロパティを使用すると、テキスト内の単語と単語の間にある空白（ホワイトスペース）の量を自由に設定できます。デフォルトの状態から広げたり、値に「normal」を指定して標準の間隔に戻したりすることも可能です。指定できる主な値は以下の通りです。normal：標準の単語間隔（初期値）長さの単位：px、em、rem、cmなどで間隔を明示的に指定（負の値も指定可能）それでは、実際のコード例を見ていきましょう。例1：div要素にword-spacingを適用する<!DOCTYPE html> <html> <head> <style