text-shadowプロパティ。

CSSに於けるテキストへの影付け指定・text-shadowプロパティに関する解説です。

text-shadowプロパティは現在策定中のCSS第二水準第一改訂版(CSS 2.1)では廃止される事となっております。また、現在策定中のCSS第三水準・テキスト効果モジュールでどのように扱われるかは未定です。

text-shadowプロパティとは。

text-shadowプロパティは、テキストへの影付け指定です。

text-shadowプロパティの扱い。

読み飛ばす

text-shadowプロパティの書式。

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

text-shadow: 値

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

読み飛ばす

一番近い上位要素で指定された値を継承します。

none

影をつけません(デフォルト)。

影に関する値

影に関する値を、「,」で区切って複数指定出来ます。

値の書き方は以下の通りです。

影の色コード。但し最初ではなく最後に書いても構いません。また省略した場合はcolorプロパティ値に従います。
右方向の影の位置を数値で(必須)。負値の場合は左方向に影が描かれます。
下方向の影の位置を数値で(必須)。負値の場合は上方向に影が描かれます。
ぼかしの範囲を数値で。省略した場合、影にはぼかしは掛けられません。

text-shadowプロパティの記述例。

読み飛ばす

例えば、HTMLの <h1>要素において、本体を緑で描き、右方向 4ピクセルズ、下方向 6ピクセルズ、ぼかしの無い黒の影を表現したい場合は、

h1 {
    color: #0c0;
    text-shadow: #000 4px 6px;
    }

と記述します。

text-shadowプロパティに関する注意事項。

text-shadowプロパティの仕様上の注意。

text-shadowプロパティは廃止されます。

text-shadowプロパティは現在策定中のCSS第二水準第一改訂版(CSS 2.1)では廃止される事となっております。

実装が追い付いていないため、CSS第三水準に移される事になります。

text-shadowプロパティの実装上の注意。

text-shadowプロパティを実装しているユーザエージェントは殆どありません。

残念ながら、text-shadowプロパティを実装しているユーザエージェントは現時点ではサファリくらいしか無いとの事です。

ウィンドウズ版インターネットエクスプローラ 4.x以降では、独自実装のフィルタを用いる事で同等の効果を出す事も出来ます。
- 読み飛ばす
記述例の場合は、
```
h1 {
    color: #0c0;
    text-shadow: #000 4px 6px;
    width: 100%;
    filter:progid:DXImageTransform.Microsoft.DropShadow(Strength=4, Direction=135, Color='#000');
    }
```
とする事で、サファリとウィンドウズ版インターネットエクスプローラで黒い影を出す事が出来ます。
- - Strengthは影の幅をピクセル数で
  - Directionは影の方向を真上を0度として時計廻りの角度(45度の倍数に限る)で
  - Colorは影の色を
  それぞれ指定します。
- 尚、widthプロパティを併せて指定しないと効果が出ません。

WAP 2.0での注意事項。

WAP 2.0では、text-shadowプロパティは定義されておりません。

関連項目。

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