米Yahoo!のほうはMy Yahoo!をはじめ、ゆっくりとですがCSSデザインに変更する動きを見せています。公開されているβ版のトップページはレイアウトにテーブルを使用していないCSSデザインになっています。それだけでなくデザインや使い勝手も変わっているようなので詳しくはデモページを参照すると良いかもしれません。Yahoo!設立当時から存在し『Yahoo!の顔』とも言えたディレクトリー式のカテゴリリストも影を潜め、下のほうに配置されています。全体的にサービスを押し出したアプローチをとっているのが分かると思います。
もちろんソースコードを見ると突っ込みどころはたくさんあると思います。HTMLのマークアップも<ol>などを使ったりして構造化を計るべきだと思います。さらに、Doctypeも正しく記述されていません。しかし、現存のデザインはDoctypeすら記述されていないですし、何よりもテーブルレイアウトから抜け出そうとしているその姿勢が素晴らしいかと思います。特にYahoo!のようなメガサイトだとこの段階に行くまでもかなりの労力が必要だったでしょうし、βということでこれからもっと良くなるのではないかと思います。
試しに現存のYahoo!とβ版のYahoo!のソースコードをテキストエディターにペーストしてファイルサイズを比べてみたところ現存が36.5kで、β版が35.8kとほとんど変わらない結果に（泣）。試しにβ版のHTMLファイルに直接記述されているCSSを外してみると28.8kまでファイルサイズが落ちました。現存のサイトはCSSがまったく使われていないようなので、HTML（とJavaScript）のファイルサイズだけを比較すると7kのスリムアップに成功したといえると思います。たったの7kと思われるかもしれませんが、Yahoo!のアクセス数は毎月2億人と言われていることを考えると、7kのスリムアップは1.3テラバイトのファイル転送を節約したことになります。そう考えるとかなりスゴい。
CSSをHTMLの中に書き込んでいるのは恐らくHTTPリクエストの数を出来るだけ減らすためにわざとHTML内に記述しているのではないかと考えられます。とはいうもののCSS部分だけで、7.7kあることやメンテナンス性を考えるとやはりCSSとHTMLを分けてしまったほうが良さそうな気がしますが実際どうなんでしょうね。
Yahoo!くらいの規模のサイトだと普通では考慮しなくても良いことも考慮対象になったり、いろいろ苦労もあるだろうなと改めて感じました。日本のYahoo!もCSSデザインに変わったらそれこそ大きなステップでしょうね。これから楽しみです。
テクノロジー系やビジネス系など、専門的な分野をターゲットにしたニュースサイトはテーブルを使っていないXHTML+CSSデザインになっているサイトが登場してきていますが、ついにアメリカの４大テレビ局であるABCが提供しているニュースサイトもテーブルがない標準デザインになって生まれ変わりました。Web Developer Toolなどを使ってCSSを無効化すると分かりますが、トップのテキスト画像になっているナビゲーションもCSSで制御してあり、かなりのコダワリを感じます。単にCSSレイアウトにしました・・・というよりは、情報デザインもかなり考慮されており非常に見易いデザインになっているのではないでしょうか。
ABC News: Online news, breaking news, feature stories and more
トップページのデザインだけでなく、個々の記事ページもかなり作り込まれていて、ナビゲーションを通常は不可視にすることで文章のためのスペースを贅沢に用意されているのも特徴だと思います。トップページも含めて要所要所にJavaScriptが効果的に使われていて使い勝手が向上されていると思います。
興味深いのが古いブラウザへの対処です。Netscape4.7でアクセスしてみたところ、Browser Upgradeと呼ばれるページが表示されました。ページ右にはMac, Linux, Windowsすべてのモダンブラウザへのリンクとブラウザの紹介が書かれているのが好印象です。こういうメジャーなサイトも思い切ってNetscapeを対象外にしたのは興味深いような気がします。ただ、このページにも書かれていますが『on your way to faster, happier browsing（より速くてハッピーなブラウジングのため）』のことを考えると、こういうアプローチも必要になってくるのかもしれませんね。
海外ではPDFを使ったWebマガジンが去年か一昨年あたりから増えてきたわけですが、『Design In-Flight』もそのひとつです。これは今年の7月に創刊されたデザイン系の季刊誌で、やわらかいトーンですが、有益な情報が満載です。専門的で技術書というよりは、コンセプト的な話が多くライターさんの性格がよく出ているのが多いので参考になるだけでなく楽しく読めることが出来るような気がします。実はこの創刊号のブックレビューにありがたいことにスタイルシート・スタイルブックが紹介されていました。
先日出たばかりのこの季刊誌第二号に僕の記事が載っています。恐れ多いことにEric Meyer氏や、Jon Hicks氏と一緒に載っています。知りませんでした（汗）他にも「あ！知っている」という人もいて焦りました。かなり釣り合い悪いです。
今回の記事はCSSとマインドマップというネタに挑戦しています。響きは奇妙ですが結構役立つテクニックだと思うのでぜひ試していただきたいですね。もちろんDesign In-Flightを買って読んでいただきたいですが、出版者の許可をいただいて、僕の記事は日本語訳してこちらで公開することにしました。日本語訳は無料です。もちろん。
ライセンスは帰属 - 同一条件許諾 2.0になります。以下のリンクにある「mapping_out」というのをクリックしてダウンロードしてください。もちろん他の文書を読んでいただいても全然OKですけどね。何かの参考になれば幸いです。
Mapping Out Your Style (ZIP圧縮＋PDF文書)
皆さんはCSSのプロパティの記述する順番について考えた事がありますか？毎回思いついた順番に書いていると、何処にどのプロパティを書いたのか探し難くなる場合もあります。特に10つくらい複数のプロパティを記述したときはなおさらです。筆者は属性をアルファベット順にならべて記述するように心がけています。
少し前にリニューアルしたMozilla.orgのスタイルシート（content.css）を見てみると属性の書く順番に関する簡単なガイドラインが記述されています。その一部を抜粋するとこんな感じで記述されています。
Suggested order:また、Mozillaにはマークアップ リファレンスというページがあり、そこではHTMLの記述方法や、どのクラスを継承すれば良いのかなど詳しい説明が例と一緒に掲載されています。このようなガイドラインや記述する順番を決めるのは複数のデザイナーやプログラマーと一緒に作業するときには不可欠なものだと思います。Mozillaのように海外にもサイトを持っているところとなるとこのようなガイドラインが重要なコミュニケーションツールになっているのは言うまでもありません。
display
list-style
position
float
clear
width
height
...
ガイドラインを作成するにおいてMozillaのリファレンスを参考にしてみると良いかもしれませんね。
４月よりインターネットマガジンでCSSを使ったコネタを幾つか紹介しています。11月号はサイドバーに置けるブログアクセサリーのカスタマイズ方法について書きましたが、そこで画像が幾つか使われています。今回は以前の号でも使った画像をひとつにまとめておきました。サイトに実際使ったり改造したり、ご自由にお使いくださいダウンロードはこちら（ZIPファイル）。
11月号ではMyClip、JUGEPi、Flickr!のカスタマイズ方法を紹介しましたが、いずれもクラス名が細かく指定してあるので、自分のサイトにあわせたデザインに作り直しやすくなっています。今回のコネタをヒントに自分なりにアレンジしてみてはいかがでしょうか。
