文字と文字の間隔を変更できるletter-spacingプロパティ
letter-spacing

　文字と文字の間隔を変更する際に使用します。文字と文字の間隔を空ける際、余計なスペースを記述する必要がなくなるので、こちらもword-spacingと同様に、アクセシビリティを保つことができます。

　しかし、こちらはword-spacingと違い、日本語でも英語などと同じように挙動するので、その点は気にすることなく使用できます。

　ただし、text-alignのjustify（両端ぞろえ）を指定していた場合、letter-spacingの値を変更される恐れがあります。

基本データ

構文 セレクタ{letter-spacing:値;}
継承 ○
値
キーワードを使って指定する場合
normal
絶対的なサイズをpx（ピクセル）を使って指定する場合
○○px
相対的なサイズを%（パーセント）、em（イーエム）を使って指定する場合
○○%、○○em
親から継承させる場合
inherit
効果 文字と文字の間隔を変更できる
初期値 normal
適用箇所 すべての要素

例

ほげほげですね。

p { letter-spacing: 10em;}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.letterSpacing

jQueryを使った参照方法

$('【セレクタ】').css('letter-spacing','【値】');
$('【セレクタ】').css({'letter-spacing':'【値】'});

CSSリファレンス インデックス

有限会社タグパンダ
喜安 亮介



TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH