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

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

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

文字間隔を広くする効果

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

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


文字間隔:0px フォントサイズ:16px 色:#333


文字間隔:1px フォントサイズ:22px 色:#111 太字


文字間隔:3px フォントサイズ:26px 色:#000 太字
<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>

業務に役立つPerl

Perlテキスト処理のエッセンス

PerlでポータブルなLinuxファイル管理入門

ITエンジニアの求人情報など

 ITエンジニアの求人情報・Webサービス・ソフトウェア・スクールなどの情報。