- 2006-11-26 (Sun) 21:56
- 特殊効果
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等の観点からこの手法にはいろいろ問題があることがわかりました・・・軽率な掲載でしたが勉強になりました・・・。ご利用される方はコメント欄をご覧の上、欠点がわかった上でご利用ください。
- Newer: ドラッグ＆ドロップでデスクトップ環境に近づける
- Older: あるウェブサイトができるまでのアニメーション
Comments:8
- kosaki 06-11-26 (Sun) 23:31
-
これはわりと有名なCSSでやってはいけない例ですよ。
CSS非対応ブラウザで見ると文字が２つ出てきてしまいます。
そういう理由で text-shadow プロパティがCSS2から追加されているわけで・・・・ - い 06-11-27 (Mon) 0:10
-
これやられると、読み上げソフト使っている人間に迷惑をかけます!!
- PAMd 06-11-27 (Mon) 3:03
-
それだと、CSS無効化されているとき（検索エンジンとかRSSフィードとか）に、同じ文字列が二つ重なっちゃうんですが。。。
CSSのTipsとしては、well knownのバッドノウハウの一つだと思います。 - 通りすがり 06-11-27 (Mon) 5:59
-
ちょっと気になったので。
この方法だと、同じコンテンツ（ここでは “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.
なんて皮肉が飛び交ってますけど..。
- nez 06-11-27 (Mon) 9:54
-
これは「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 - Bar 06-11-27 (Mon) 12:23
-
どうでもええやん…。
原理主義者はイヤだなあ…。 - ものの 06-11-27 (Mon) 17:37
-
kosaki さんの言う
text-shadow は 2.1 で廃止されている始末w - とあるWEBクリエイターのblog 06-11-28 (Tue) 0:43
-
javascriptで文字にドロップシャドウをつける方法
SiMPLE*SiMPLEさんのエントリー、CSSだけで文字にドロップシャドウを…
Trackbacks:0
- Trackback URL for this entry
- http://www.simplexsimple.com/archives/2006/11/css.html/trackback
- Listed below are links to weblogs that reference
- CSSだけで文字にドロップシャドウをつける方法（あまり良くない方法） from SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳
