letter-spacingプロパティ。

CSSに於ける一文字一文字の間の空白の幅・letter-spacingプロパティに関する解説です。

letter-spacingプロパティとは。

letter-spacingプロパティは、一文字一文字の間の空白の幅です。

letter-spacingプロパティの扱い。

letter-spacingプロパティの書式。

letter-spacingプロパティの書式は、以下のようになります。

letter-spacing:

値としては、以下のものが取れます。

inherit
一番近い上位要素で指定された値を継承します。
normal
現在のデフォルトの文字間隔(フォントなどに依存します)が取られます(デフォルト)。

この場合、text-alignプロパティjustifyが与えられていたら、適宜文字間隔を調整して両端揃えを実現する事が許されます。

数値
数値にはパーセンテージは使えません。

現在のデフォルトの文字間隔に加える余白の量を指定します。

負値でも構いませんが、ユーザエージェントに依っては対応出来ない場合もあります。

数値を指定した場合、text-alignプロパティjustifyが与えられていても両端揃えのために、適宜文字間隔を調整する事はありません。この場合、文字の書字方向に合わせて右か左に行揃えをする事でしょう。

letter-spacingプロパティの記述例。

例えば、HTMLの<h1>要素において、文字間隔を 4ピクセル増やしたい場合は、

h1 {
    letter-spacing: 4px;
    }

と記述します。

letter-spacingプロパティに関する注意事項。

letter-spacingプロパティの仕様上の注意。

letter-spacingプロパティとtext-align: justifyプロパティが併用されている場合。

text-alignプロパティjustifyが与えられている場合、letter-spacingプロパティと矛盾します。

なぜなら、text-align: justifyプロパティが与えられている場合、改行直前の行で両端揃えが行なわれますが、そうすると文字間の間隔に依ってはおかしくなる場合があるからです。

実際問題として、letter-spacingプロパティとtext-align: justifyプロパティが併用されている場合についての求められている挙動は詳しく書かれておりません。

つまり、ユーザエージェントに依存するものとなります。

  • 要するにletter-spacingプロパティとtext-align: justifyプロパティを併用した場合についての挙動は保証されないと言う事です。

letter-spacingプロパティの実装上の注意。

ネットスケープ 4.xでの注意事項。

ネットスケープ 4.xには、letter-spacingプロパティは実装されておりません。

WAP 2.0での注意事項。

WAP 2.0では、letter-spacingプロパティは定義されておりませんが、オープンウェーヴ社のWAP 2.0 ウェブブラウザには実装されております。

関連項目。


しらぎくのウェブサイト作成入門サイトマップ