HTML上で文字間の隙間を指定する

etter-spacing

文字間の隙間を指定するプロパティです。負の値も指定することができます。

初期値はブラウザやフォントに応じた通常の文字間隔が使用されます。

用例

                .sample   {letter-spacing: 2px;}

※長さ(letter-spacingの後ろの数値)は数値+単位で指定します。単位はpx(ピクセル)、%(パーセント)、pt(ポイント)、em(エム)、（これ以降検証必要）in(インチ)、mm(ミリメートル)、pc(パイカ)等になります。

CSS3以降は新しい単位が追加されるそうです。(今回は使用しておりませんので、解説しておりません。)

簡単に単位の解説を書きます。

10px=7.5pt=0.104in=2.117mm=0.625pcとなります。

1px上がるごとに0.75pt上がります。

in、mm、pcはpxが増えたからと言って、等差数列っぽく増えていくわけではないので、覚えなくて大丈夫だと思います(実際あまり使用した記憶がない・・・)

%、emは相対単位なので、要素のフォントサイズによります。(フォントサイズを10pxと指定したいたら、100%と1emは10pxとなります。70%・0.7emは7pxとなります。)

＜CSS内に記入＞

.sample_letter-spacing

    {letter-spacing: 10px;}

＜HTML内に記入＞

<div class="sample_letter-spacing">

    ここの文字間は10pxになります。

    <p>ここの文字間は10pxになります。</p>

    <p style="letter-spacing: 2px;">ここの文字間は2pxになります。</p>

</div>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

ウェブ内での表示

以上の結果からわかるように、lettet-spacingは親要素に指定した値が子要素に継承されます。

継承されないプロパティの場合、<p style="letter-spacing:2px;">と</p>で囲まれた間の文字はdiv.sampleで指定されたプロパティが適用されます。

CSSの継承についての詳細は今後書く予定です。

ちなみに、letter-spacingにて負の値を指定した場合は下記のようになります。

letter-spacing:-2px;

ここの文字間は-2pxになります。

とりあえずはこんな感じです。

追記があればさらに記載していきます。