米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（より速くてハッピーなブラウジングのため）』のことを考えると、こういうアプローチも必要になってくるのかもしれませんね。
さて、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デザインにしてくれると良い影響を及ぼすでしょうね。
スタイルシート・スタイルブックで毎日勉強中のBQです。
実践編までなんとか漕ぎ付けたのですが、そこでいつも参考にさせていただいてるサイトが紹介されていたので、エントリーしてみました。
実は以前に書いたカメレオンアイコン（勝手に名づけてましてTipでもなんでもなかったりしますが＾＾；）を参考にさせていただいたサイトだったりもするのですが、そのサイトは「Fast Company」というサイトです。
CSSと何気なテクニックを使っていてとても勉強になるサイトなんです。CSSのインポートやTABにリスト、アイコン背景やスタイルスウィッチなどなどCSSのテクニックが満載です。
いつかこんな風にCSSを使いこなしてサイトを作ってみたいなぁと思ったりしますが、今の私には到底ムリなので、かなり部分的になりますが、そのサイトで使われている見出し＋リストの作り方で参考になるかなと思ったところをエントリーしてみました。
余計な部分を削りながらCSSを抜き出したので、誤った部分も含まれているかも知れませんが、その辺はご愛嬌ってことでお願いします。リストの一つのパターンとして参考にでもしていただければと思います。
CSS例
#listsample h4 {
padding: 0;
margin: 0;
margin-bottom: 6px;
color: #c00;
font-size:100%;
font-weight: bold;
letter-spacing: .2em
}
#listsample h4 img {
vertical-align:bottom;
display: inline;
background: #c00
}
#listsample ul {
margin: 0;
padding: 0;
list-style: none
}
#listsample li {
background: url(../../listhead.gif) no-repeat 2px 1px;
padding: 0 0 6px 16px;
line-height: 1em
}
タグ部分
<div id="listsample">
<h4><img src="../../header.gif" /> Subheading</h4>
<ul>
<li><a href="">list 1</a></li>
<li><a href="">list 2</a></li>
<li><a href="">list 3</a></li>
</ul>
</div>
（下記サンプルは画像ですが、CSSの追加や調整だけでいろいろなパターンのリストを作成することができます）
*アイコン画像等は「Fast Company」さんのものを参考にさせていただいています。尚、サンプル中のheader.gifは背景を透過にしたものにCSSを適用しています（画像の説明）
はじめまして、Naoといいます。現在アメリカにてウェブデザイナー兼翻訳者をやっています。
先日のエントリーでAOLのサイトの紹介がありましたが、アメリカの商業サイトは次々にCSS＆XHTML対応の兆しを見せています。そんな中、CSSを使ってサイトをリデザインしよう！というコンテストがいろいろなところで行われています。
2003年初頭に行われたWThremixという非公式のコンテストは、W3C（World Wide Web Consortium）サイトの模擬リデザイン・プロジェクトとして行われ、著名なウェブデザイナー・プロデューサーたちが審査に参加していました。
＞入賞者 ＞参加者一覧
また、こちらも非公式ですが、ユーザビリティの専門家ヤコブ・ニールセン氏のサイト“USEIT”のリデザインコンテスト、“ReUSEIT”は、用意されたHTMLファイルを加工せずに、スタイルシートだけを使ってリデザインをするという形式でした。以下に挙げられているページが同じHTMLだという事を念頭に見比べてみるととても面白いです。
＞入賞者 ＞参加者一覧
同じHTMLファイルをCSSで全く雰囲気の違うページに、という試みで有名なものには、CSS Zen Gardenがあります。こちらの場合、既存のサイトをリデザインしているわけではないので、それぞれのデザイナーのオリジナリティあふれるデザインが勢揃いしていて圧巻です（ページ右側のテキストをクリックすると違うデザインを見ることができます）。
追記：CSS Zen Gardenの日本語訳サイトもあります。
さらに、最近発表されたばかりの“version 2: redesign contest for everyone”では、第1弾として「青空文庫」の元祖ともいえるプロジェクト・グーテンベルクのサイトリデザインコンテストが行われています。こちらは2004年2月29日が締め切りですが、version2ではこれからも毎月新しいコンテストの題材を提供していくとのことです（詳細…Whitespace » version 2）。
これらのコンテストの多くに共通するのが、W3CのHTML標準に準拠すること、テーブルを使わないレイアウトを作成すること（表組みとして扱うべきデータをのぞく）、ユーザビリティとアクセシビリティに配慮すること、などです。
受賞サイトをながめるだけでも勉強になりますが、機会があったら練習をかねて参加してみては？
