立て続けに人のエントリーに乗っかってますが、、S i M P L E * S i M P L E さんで紹介されていた、「CSSだけで文字にドロップシャドウをつける方法」 （元ネタはこれ） に関してはちょっと気になったので書いておこうと思います。
実は S i M P L E * S i M P L E さんのエントリーの元ネタでは書かれているのですが、このようにテキストを 2回書いてそれを CSS によって重ねてしまう方法は、下記のような弊害があります。
- CSS が OFF だと、テキストがだぶる
- 音声ブラウザは 2回同じテキストを読み上げることになる
CSS が OFF という状況は、ブラウザでアクセスしてくる人間様相手の場合、あまり起こらない状況だと思いますが、ページをスクレイピングしていくようなユーザーエージェントは、CSS なんて基本的に読みません。例えば、Google 等のロボットなどもこれに含まれますね。つまり、HTML文書の再利用性を阻害する可能性があるということです。
これは人によって考え方があるので、あくまで私の主観ですが、HTML 文書はスタイルが当たっていない状態でも文書としてしっかりと読むことができるように記述するべきという考えがあります。
今回のように見た目を作り出すために、余計なテキストを 2度書くなどといった方法はアクセシビリティ的に問題があり、あまりオススメできません。
で、じゃあどうしろと？ という方に。
実は CSS では、Text shadows プロパティが定義されています。CSS2 で定義された後、CSS2.1 （Working Draft） では一旦外れてしまったので、今のところ対応しているブラウザが Safari くらいしかありませんが、CSS3 では再度定義される予定になっているようです。
h3 {text-shadow: 0.1em 0.1em #333}
なんて書けば、簡単にテキストにシャドウが付きます。まあ、ブラウザ待ちですので今すぐの解決にはならないんですけどね。
![[広告] フルハイビジョン液晶テレビ FORIS.HD](http://direct.eizo.co.jp/docs/link/Netmile_080422.gif)
そのエントリー気になってました。
せっかく付け足してエントリーするのならば、
IEがCSS3に対応するのはあまり期待できないので、IE独自拡張のfilterについても触れてあげたら優しいかな、と思いました。
hira さんコメントありがとうございます。
filter 、、あまりブラウザの独自拡張が広まることに積極的に貢献したくはないのでパスしたいです。。
はじめまして。
text-shadowプロパティなんですが、CSS3 Text Moduleの最新版（Text Effects Module）では、定義が取りやめとなっているみたいですよ。
http://www.w3.org/TR/css3-text/
rea さんコメントありがとうございます。
まだまだ Working Draft の段階なのでなんとも言えませんが、
Many sections intended for this module are not yet represented in this draft. In particular, the 'text-justify-trim', ...略...'text-shadow', 'hanging-punctuation', 'kerning-mode', and related properties have not yet been evaulated.
(http://www.w3.org/TR/css3-text/#changes より)
って書き方を見ると、後回しになっているといった感じでしょうかね。