CSS3: letter-spacing プロパティ - 文字の間隔

■ 概要

項  目説  明
記述形式 セレクタ {letter-spacing: }
値 の形式 normal | 数値 (長さ)
初 期 値 normal
対応ブラウザー C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 すべての要素
継  承 する

■ 解説

letter-spacingプロパティ は,文字の間隔 を指定します。

指定できる値の形式は,以下のとおりです。

説  明
normal 文字間隔を新たに追加しません。 (初期値)
数値(長さ) 新たに追加する文字間隔の長さを指定します。
備  考 文字間隔を考える場合,連続した画像やインライン・ブロックは1文字として扱われます。
文字間隔の指定は,行の先頭文字の前や最後の文字の後は対象外です。

■ 使用例( letter-spacing プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   .lspace0 { letter-spacing: normal; }
   .lspace1 { letter-spacing: 3px; }
   .lspace2 { letter-spacing: 6px; }
   .lspace3 { letter-spacing: 0.5em; }
   .lspace4 { letter-spacing: 0.8em; }
   .lspace5 { letter-spacing: -0.1em; }
-->
</style>
HTML
<body> ~ </body>
<div class="lspace0">文字間隔 "normal" の文字列です。</div>
<div class="lspace1">文字間隔 "3px" の文字列です。</div>
<div class="lspace2">文字間隔 "6px" の文字列です。</div>
<div class="lspace3">文字間隔 "0.5em" の文字列です。</div>
<div class="lspace4">文字間隔 "0.8em" の文字列です。</div>
<div class="lspace5">文字間隔 "-0.1em" の文字列です。</div>

ブラウザー 表示例
文字間隔 "normal" の文字列です。
文字間隔 "3px" の文字列です。
文字間隔 "6px" の文字列です。
文字間隔 "0.5em" の文字列です。
文字間隔 "0.8em" の文字列です。
文字間隔 "-0.1em" の文字列です。

■ 備考

【参考ページ】