Opera 9.5β2が公開されたというニュースを見たので、久しぶりにOperaをインストールしてみました。
普段全く使っていないので何がどう違うのかはよくわからないのですが、うちのブログを何気なく見て驚きました。CSSのドロップシャドウに対応していたのです。
上の画像は、各Webブラウザでうちのブログのトップページの一部を表示させたものです。
CSSのドロップシャドウをタイトル部分に設定しているのですが、これまで対応していたのはSafariだけでした。ところが、画像の通り、Opera 9.5β2も対応しているのがわかります。
個人的にCSSのドロップシャドウは好きなので、Firefoxも対応してくれないものかと思ってしまいました（CSS2.1では外されたけど、CSS3では復活予定？）。
CSSをオフにしてWeb標準について考えよう、という趣旨のCSS Naked Dayが4月9日にあります。
Web標準に準拠したWebサイトならば、仮にCSSをオフにしても利用するのに大きな支障はないので、あえてCSSを切ることでWeb標準への意識を高めていこうという狙いがあるようです。
このブログのトップページをCSS無しで見ると、上の画像のようになります。
ここのWordPress用のテンプレートはWeb標準に準拠するように作られているため、利用するのに大きな支障は確かに生じません。しかし、だからと言ってCSSを切ることがWeb標準への意識を高めるというのはちょっと違う気がします。
多少Webサイトを作る知識を持っている人ならば、プロアマ問わずどういう意図があるのかを言われればわかります。しかしWebサイトを作る知識がない大多数の人から見れば、単に「内容はともかく、そっけないサイトだな」という印象を与えるだけで終わってしまうでしょう。
主な閲覧者がWebに関わっている人というようなWebサイトならば意味があることかも知れませんが･･･。
そんなわけで、私はこの企画には賛同出来ないので参加はしません。ただ、賛同出来る人も当然いるでしょうから、そういう人は参加してみてはどうでしょう。今のところ、日本をふくめて全世界で200超のWebサイトが参加しているようです。
Web Designingという雑誌で紹介されていましたが、面白いWebサイトがありました。
e-Toile Graphicというサイトで、何と5024×3791pxという巨大な背景画像の上に各ページをCSSで絶対位置指定し、リンクをクリックすると背景画像上をウィィィンと移動するという仕組み。
確かに面白くはありますが、若干重いのも事実。自分の会社のWebサイトに導入出来るかと言えば、正直なところちょっと勇気が必要ですね。
ただ、こういうやり方もアリなんだなぁと、固定観念を打ち砕かれるような気分になりました。
リンクでは行けませんが、スクロールバーを動かして一番右下に行くと、こんな背景画像ですよーとわかる縮小画像が設置されています。まあ、Firefoxなら背景画像をいつでも表示させられるので特に必要ないかも知れませんね。
色々とHTMLやCSSをチェックしてくれるWebサイトはありますが、XHTML-CSS Validatorは使い勝手が良さそうです。
チェックしたいURLを入力して”CHECK IT”をクリックすると、HTMLとCSSを同時にチェックしてくれるのです。そして、ダメな部分はどこだというのも明記してくれるので、修正の参考には丁度いいかも。
うちもチェックしたところ、上図のような感じになりました。HTMLは問題なしだったのですが、CSSがいささか汚いようです。まあ、よろしくないHACKなども使っているので無理もないですが･･･ 
ここの便利なところは、複数のCSSファイルがあったとしてもご覧の通り一発で調べてくれるところでしょうか。うちが使っているテーマは多くのCSSファイルを使用しているので、こういうところはありがたいですね。
HTML同様、なるべくCSSもValidに近づけたいと思います。
realab.org – 影響を受けた方を紹介してみる (前編)というのがあったので、私もふと思い出してみました。
私がWebサイトを初めて作ったのは1999年か2000年。一応CSSは存在したけど、あまり注目されていない時代でした。私も一応”スタイルシート”という言葉は知っていましたが、どのようなものかはよく知らなかったし、興味もありませんでした。
時代はテーブルレイアウトで、Dynamic HTMLやJava Appletなどが幅を利かせていました。個人サイトでは”波紋アプレット”などが人気で、今にして思えば何て閲覧者のことを無視したものだったかと・・・。
参照：波紋アプレット ポインタを画像に重ねてみると・・・
今のPCなら処理速度も向上してブロードバンドも普及しているのでマシですが、当時はまだまだナローバンドが主流（というかISDNが速いと謳われており、1.5MbpsのADSLサービスが東京の一部で始まったばかりの頃だった）でPCの処理速度も遅く、Java Appletなどをサイトに置かれると非常に動作が鈍重になったものなのです 
それから2年か3年ほど自分の好きなようにWebサイトを作っていたのですが、デザインが好きだったあるWebサイトのソースを覗いた時、謎に直面したのです。
ソースでは
<h2 class=”abc”>タイトル</h2>
となっていたのですが、見た目は
タイトル
となっていたのです。
今見れば、いかにもCSSの定番中の定番な飾り付けなのですが、HTMLしか知らなかった私にはさっぱり理解出来ませんでした。「ソースにあるclass=”abc”とはなんだ？」と。
そこで、隅々までソースを見てみると、見慣れない一文を発見しました。
<link rel=”stylesheet” type=”text/css” href=”style.css” />
これが何らかの手がかりに違いないと、早速そのstyle.cssを覗いてみると、見たこともない世界が広がっていたのです。そして、例のabcの文字列も発見しました。これだ。
早速そのstyle.cssを全て保存し、元のHTMLも保存し、私のサーバーにアップしました。そしてabcの部分の数字を変更してみると、線の太さが変わったのです。CSSというものを私が初めて理解した瞬間でした。
それからネットでCSSに関する知識をかき集め、書籍も読みあさり、何とか時代がCSSレイアウトに変わろうという流れにあまり遅れることなく乗ることが出来ました。今でもあのWebサイトには感謝していますが、残念ながら今はなくなってしまいました。
また、CSSを調べる過程で、realab.orgでも紹介されているAlternative Design Projectにも行き着きました。ものすごく勉強になるブログで、一時期全く更新されない時期があって残念な思いを抱いていましたが、最近はリニューアルされて更新も再開されています 
