さて、Macユーザーの方はご存知だと思いますが次期Mac OSXにあたる『Tiger』のプレビューが発表されました。ニュースやブログサイトでその機能がレポートされていますが、どうやらTigerのページは今までのページに比べてCSSがかなり使われているようです。全体の骨組みはテーブルですが、細かいレイアウトの作りはCSSベースになっています。特に右側の『Tigerの新機能』の部分は「:hover」を利用したテクニックが使われているようですね。しかも、アイコンは背景画像として処理しているみたいでなかなか凝っています。
『Tiger』のほうはテーブルとCSSをミックスしたハイブリッドデザインかと思えば、Cinema Displayのほうはほぼ完全にCSSレイアウトになっています。グローバルナビゲーションなど細かいところはテーブルが幾つか使われていますが、従来のようにテーブルを何個も重ねるというやり方は一切使われていません。試しにFirefoxのWeb Developer ToolとかでCSSを外してみると分かりますが、Cinema Displayのページは本当にしっかり組まれていますね。Win版IE5.0でもレイアウトが崩れないようになっていますね。ハックを最大限に押さえて「.padder」という padding プロパティだけ書かれたコンテイナーを用意してそれをレイアウトと重ねているみたいです。まぁベストソリューションじゃないかもしれませんし、突っ込みどころは幾つかありますが、それでもCSSデザインにしたというのは大きな飛躍かもしれません。
Webサイトだけでなく、印刷用のCSSまで用意してあるのは親切ですね。
この調子でAppleサイトはどんどんCSSデザインにかわっていくのでしょうか。このように大きな企業が思い切ってCSSデザインにしてくれると良い影響を及ぼすでしょうね。
今CSSでのWebデザインで最も苦労するブラウザといえばInternet Explorerです。バージョンアップがないまま２年ほど経っているせいもありCSSサポートは他のブラウザに比べると貧弱に感じます。とはいうもののIEが最もシェアがあるブラウザという事実もあるわけで、無視も出来ませんし逆にIEで見れなかったら意味ナシなんてケースもあるわけです。今年に出るWindows XP SP2はIEも含めてバグフィックスが中心という見方が強いですが、もしかするとIEには何か期待出来る予感もあるっぽいです。数年前までIEの開発に携わっていたDave Massy氏がどうやら再びIEの開発チームに加わるみたいですね。
CNET Japan：IE改良の可能性が浮上--マイクロソフト、エバンジェリストを新たに任命
彼のBlogでも記述されていますが、ユーザーの声を出来る限り反映させてIEをさらに良いものにしたいと名言していますね。向上させたい項目の中には透過PNGサポートやCSS2のさらなるサポートも含まれているみたいです。実際SP２のほうでそれらを実装したIEが出るとは限らないし、具体的な情報が公開されているわけではないですが、結構期待してしまいます。シェアが圧倒的にあるブラウザがサポートを増やしてくれるとCSSで無茶が出来る幅も広がりますからね。楽しみです。
Webサイト開発にDreamweaverをお使いの方も多いと思います。最新バージョンであるDreamweaver MX2004は以前にも増してCSS機能が充実したみたいですね。プロパティの定義が楽になっただけでなく、「ID」「CLASS」の継承のワークフローも以前にも増してスムーズになったのではないかと思います。今回はMacromediaサイトにあるCSSデザインに関する記事をメモ代わりにリストしようと思います。Dreamweaverユーザーでない方にも有益な情報もあるのでCSSの復習という意味でご覧になっても良いかもしれません。
カスタムスタイルシートとはユーザーが設定した独自のスタイルシートのことで、サイトのスタイル定義よりカスタムスタイルシートの設定が優先されます。フォントのサイズや背景色が自分の好みに合わないときなどに有効です。カスタムスタイルシートはほとんどのブラウザで使うことが出来ます。
Microsoft Internet Explorer 6 のステップ バイ ステップ ガイド
Mozillaの設定 - はじめての Mozilla 1.4
先月リニューアルされたEric Meyer氏のサイトをみてみるとソースコードに<body id="www-meyerweb-com">という記述がされています。実はこれ、カスタムスタイルシートと深い関係があるのす。カスタムスタイルシートを特定のサイトに対して別のスタイル定義をしたいときにbodyタグ内にMeyer氏のようなIDを設定をしてあげるとユーザーにとって非常に有益なものになります。例えばこんな感じでカスタムスタイルシートを定義します。
#www-meyerweb-com {color: #333; font: 1em Times, serif;}
#www-meyerweb-com * {color: #333; font-family: Times, serif;}
