狐の王国


2006年11月26日() [過去の今日]

#2 CSSのドロップシャドウ

blogやCMSが中心になったここ数年のウェブ界隈では、すごくまともなHTMLが増えた。それ以前はtableで無理矢理レイアウトしたひどい代物が溢れてて、ただでさえ遅い回線、遅いCPUに負担をかけまくっていた。最近のblog/CMSの出力は標準にほとんど準拠してるので、けっこう軽快だし、アクセシビリティも高い。

が、まだ呆れる話が無いわけじゃない。 ふと見つけた CSSだけで文字にドロップシャドウを付ける方法 という記事。

呆れてものが言えない。まるっきり スタイルシートWebデザイン CSS2完全解説 のP160にある、CSS適用の悪例そのまんまじゃないか。1998年に発行された本だぞ、これ。Google創業当時の出版物に「悪例」として書かれるような手法を、何今ごろになって「かっくいい」とか言っちゃってるのよ。

その前世紀の本にも書かれてる通り、

<h1><span>Lorem Ipsum</span>Lorem Ipsum</h1>

なんて書いちゃったら、CSS未適用時に

Lorem IpsumLorem Ipsum

という見出しになる。H1要素の中身がこれなんだからしょうがない。今こういう時代になって「HTMLを読むのは人間だけとは限らない」がどんどん現実になってるが、ソーシャルブックマークのようなサービスがH1要素をリンク名に使ったりすることを想像してないのだろうか。

ついでに言うと、こういうドロップシャドウは、text-shadowというプロパティがCSS2で定義されてて、それで実現できる。ただ、実装があまり追い付いてなく、今のところSafariくらいしか実装してるブラウザは無かったと思う。Firefoxは3あたりで対応してくれるだろうか。

もひとつついでに、20世紀の本で言われてることだが、画像を使うべきときは画像を使うべきだ。HTMLとCSSの仕様を飛び越えた事をするくらいなら、画像を使って表現すべきである。もちろん、alt属性はきちんとつけてね。

(@861)

この記事のURI

最近の記事

以上、1 日分

タイトル一覧


カテゴリ分類
Powered by hns-2.19.8, HyperNikkiSystem Project

過去にこの日記が置いてあったcgi.misao.gr.jpは廃止されました。それによって記事へのURIが変わってしまっています。cgi.misao.gr.jpをwww.misao.gr.jpと置き換えるだけで同じ記事にアクセスできるはずです。

Sugano "狐志庵" Yoshihisa(E) @ 美紗緒ネットワーク <koshian@misao.gr.jp>
日記管理ページ