CSSだけで文字にドロップシャドウをつける方法（あまり良くない方法）
November 26, 2006 9:56 PM written by
Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。
» Good-Looking, Sharp Offset, CSS Text Styling
実例はこちら。
↑ 適用前。
↑ 適用後。かっくいい。
やり方はいわれてみれば簡単で、1pxずらして影をつけただけ（というか影を先に書くのか）。
実際のコードは以下のような感じですね。スタイルシートには次のように記述します。
h1 {
color: #000;
position: relative;
}
h1 span {
color: #fff;
display: block;
position: absolute;
top: -1px;
left: -1px;
}
実際のHTMLの方はこんな感じ。
<h1><span>Lorem Ipsum</span>Lorem Ipsum</h1>
ちょっと画像を作るのが面倒、というときによいかもしれませんね。
追記（2006-11-27）:
たくさんの方からコメントいただきありがとうございました。アクセシビリティ、SEO等の観点からこの手法にはいろいろ問題があることがわかりました・・・軽率な掲載でしたが勉強になりました・・・。ご利用される方はコメント欄をご覧の上、欠点がわかった上でご利用ください。
Info: 特殊効果 |
固定リンク |
コメント (7) |
トラックバック (1) |
↑
これはわりと有名なCSSでやってはいけない例ですよ。
CSS非対応ブラウザで見ると文字が２つ出てきてしまいます。
そういう理由で text-shadow プロパティがCSS2から追加されているわけで・・・・
by kosaki
| 2006年11月26日 23:31
これやられると、読み上げソフト使っている人間に迷惑をかけます!!
by い
| 2006年11月27日 00:10
それだと、CSS無効化されているとき（検索エンジンとかRSSフィードとか）に、同じ文字列が二つ重なっちゃうんですが。。。
CSSのTipsとしては、well knownのバッドノウハウの一つだと思います。
by PAMd
| 2006年11月27日 03:03
ちょっと気になったので。
この方法だと、同じコンテンツ（ここでは "Lorem Ipsum" ）を不必要に２度記述してます。見栄えのために文書内容や構造を犠牲にしてますけど、いいんでしょうか？(^ ^;)
ネタ元リソースのコメントでも、
> Nothing new. If you come up with a way that doesn’t
> require you to have the text typed twice and I’ll be
> impressed.
> Cute, and a great example of how NOT to write code.
なんて皮肉が飛び交ってますけど..。
by 通りすがり
| 2006年11月27日 05:59
これは「CSSだけで」シャドウを付ける方法ではありません。
「HTMLとCSSで」シャドウをつけています。
この方法は、絶対に使ってはいけません。
HTMLとは、文章構造のみを記述すべきものであり、
視覚的表現は全てCSSで行うのが正しい方法です。
影を付ける為だけにタイトルを2回記述するのは
HTMLで視覚表現を記述することとなり、不適切であると言えます。
上記の例は、CSSが無効の環境(携帯もそうです)で閲覧した場合や
或いは検索エンジンのbot、視覚障害者用音声ブラウザ等では
「Lorem IpsumLorem Ipsum」という第一見出しである、
と判断されてしまいます。
ユーザビリティ的にもSEO的にも悪影響のある方法ということです。
繰り返しますが、この方法は、絶対に使ってはいけません。
僭越ながら、HTMLの基本概念の入門として、
こちらをご一読されることをお勧めします。
The Web KANZAKI - ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/htminfo.html
by nez
| 2006年11月27日 09:54
どうでもええやん…。
原理主義者はイヤだなあ…。
by Bar
| 2006年11月27日 12:23
kosaki さんの言う
text-shadow は 2.1 で廃止されている始末w
by ものの
| 2006年11月27日 17:37
コメント投稿 （コメントは承認後に公開されます）
