単語と単語の間隔を変更できるword-spacingプロパティ
word-spacing

 単語と単語の間隔を変更する際に使用します。これにより、不必要なスペースを連続して記述する必要がなくなり、アクセシビリティを保つことができます。このプロパティは、単語を半角スペースで認識しているので、日本語を使用の際には、任意の場所にスペースを追加しなければ単語を認識しません。

 また、text-alignのjustify(両端ぞろえ)を指定していた場合、word-spacingの値を変更される恐れがあるので、注意が必要です。

基本データ

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

ほげ HOGE ですね。

p { word-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.wordSpacing

jQueryを使った参照方法

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

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




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH