Perl Web開発者のHTML・CSS入門

letter-spacing - 文字間隔を設定する - CSS入門【CSS3対応】

文字間隔を設定するには、「letter-spacing」をスタイルシート(CSS)で指定します。

<div>文字間隔 0px</div>
<div style="letter-spacing:1px;">文字間隔 1px</div>
<div style="letter-spacing:2px;">文字間隔 2px</div>
<div style="letter-spacing:3px;">文字間隔 3px</div>

文字間隔を広くする効果

文字間隔を広くする効果は、間隔が横に開くので、文字領域の面積が広くなるということです。つまり、文字間隔を広くした部分は、文字間隔が小さいものよりも目立つということです。

文字間隔、フォントサイズ、太字、色の濃さを組み合わせると、上手にコントラストを生み出すことができます。

<div style="font-size:16px;color:#333;">文字間隔:0px フォントサイズ:16px 色:#333</div>

<div style="font-size:22px;color:#111;letter-spacing:1px;font-weight:bold;">文字間隔:1px フォントサイズ:22px 色:#111 太字</div>

<div style="font-size:28px;color:#000;letter-spacing:3px;font-weight:bold;">文字間隔:3px フォントサイズ:26px 色:#000 太字</div>