立て続けに人のエントリーに乗っかってますが...... 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}
なんて書けば、簡単にテキストにシャドウが付きます。まあ、ブラウザ待ちですので今すぐの解決にはならないんですけどね。
