CSS Nite Vol.23

2008年3月20日 著

Apple Store Ginzaで開催された、CSS Nite Vol.23に参加してきました。仕事の詰まり具合がそれどころではないのですけど、今回の講師が北海道にお住まいでなかなか生の声を聞くことのできない大藤幹さんとあっては、馳せ参じないわけにはいかないのです！前座を務めたInfoaxiaの植木さん、20分ほどかけて先日のCSUN参加＆Google/Apple訪問を報告されました。途中、debugonさん改めツジちゃんが、Santa MonicaにあるApple StoreでTwitterにVoiceOverを使い書き込みを行った様子を写真で紹介したとき、summerwindさんの書き込みも割と大きく映し出されて「おおー」とか思いました（謎）。Web Designing誌の連載よろしく「CSS Analysis Live!」と題された講演では、大きく分けて以下の3項目についてお話がありました。

• この一年の傾向
• トピックと事例
• これからのCSS

いずれも大変興味深く拝聴させていただきました。スライドはそのうちCSS Niteのサイトで公開されるかもしれませんが、折角覚え書きをしたので、質疑応答も含めて以下に公開しておきます……ただ、質問が良く聞こえなかったのでもしかしたら趣旨を取り違えている可能性があります。間違い等あればご指摘いただけると幸い＞誰

この1年の傾向

1. CSSの新しい話題がなくなったｗ
2. CSSハックを使っていないサイトが増加
3. 世代交代によって過去の問題が繰り返されている
4. 英語圏以外のサイトが目立つようになった
5. 言語圏の違いによる制作スタイルの相違が顕著に

CSSの新しい話題がなくなった

• 必要な情報は出揃った
• 問題の回避方法もわかっている
• ブラウザも進化した
• 普通に使える技術になってきた

CSSハックを使っていないサイトが増加

• CSSハックのないサイト登場からほぼ1年
• 不要なCSSハックが明確になっている
• どうすれば不要になるのかもわかっている

世代交代によって過去の問題が繰り返されている

• 世代交代がどんどん進んでいる
• 定番的な技術で問題を発生させる例が多い

英語圏以外のサイトが目立つようになった

• ドイツ（.de）
• ブラジル（.br）
• ルーマニア（.ro）
• チェコ（.cz）
• フランス（.fr）
• イタリア（.it）

連載で取り上げたサイトの言語圏

• 2005年は100%英語圏
• 2006年は75%英語圏でそれ以外が25%
• 2007年は58%英語圏でそれ以外が42%
• 2008年は40%英語圏でそれ以外が60%

言語圏の違いによる制作スタイルの相違が顕著に

• 英語圏の国々がリードしていた時代は終わった
• 追いつき、さらに先に進んでいる国もある
• 言語圏ごとの情報の流れ方の違い？
• 実は日本もけっこう凄い！

トピックと事例

CSSハックの現状

• * htmlはほとんど見なくなった
• clearfixも以前より使われなくなった
• CSSハックを一切使っていないサイトは増加中

画像置換の現状

• 一時はほとんど使われなくなった
• 現在では、また普通に使われている
• ただし、テキストを消す方法は以前と異なる

  画像の消し方の例その1（CSSソースの一部を紹介）

  height:0;
  overflow:hidden;
  paddingt-top:156px;

  画像の消し方の例その2（CSSソースの一部を紹介）

  font-size:0.1m;（またはfont-size:0;）

  ……なぜこれらの消し方が復活してきたかは謎

古いブラウザへの対応

• 英語圏では切り捨ての傾向？
• ドイツ語圏ではすべて対応の傾向？

外部CSSの構成

• screen用CSSは1つが基本
• 読み込み専用CSSは使わない

  具体例

  • Grant Executive Jets
  • System Care
  • Kriesi Design
  • Royal Copenhagen

CSSのリセット

• リセットしているサイトは、昨年12月号より0
• 英語圏を除けば、約1年前から0

ページ上部を画像だけで構成する

• 文字サイズの変更に対応
• 配置が簡単に行える
  • Grant Executive Jets
  • System Care
  • Kriesi Design

極端に大きな画像を使用する

Demo：5024x3791（344KB）の背景画像を使ったe-Toile Graphic

Elastic Layout

• 8月号：FreeAgent Central
• 11月号：Unstoppable Robot Ninja

これからのCSS

足すコーディングから、引くコーディングへ

足せば足すほど、分ければ分けるほど、問題も増える

理想はドイツ流「シンプルでキレイなソース」

それは「目的」ではなく「手段」

プロパティの順序はどうするのがベスト？

• 連載で取り上げたサイトはばらばら
• 読みやすさ
  • 重要なものを先に置く
  • 関連するものを近接させる

One more thing...

MT本執筆中「テンプレートとスタイルシートがよくわかるMTOS・MT4.1カスタマイズ基礎講座（仮）」5月上旬発売

質疑応答

CSSを綺麗に書くことによるマークアップ側への影響はないのか？

記事のタイトルはCSS Analysisだが、ちゃんとマークアップ品質も見ている。

CSSファイル構成を単純化しているサイトの規模は？

大規模サイトも取り上げてはいるが、どちらかといえば規模の小さいサイト（例：個人Blog）が多い。

日本語圏のサイトの特徴は？

実は日常的に使ってはいるがあまり見ていない、ただしクオリティが高い制作者もいる。

条件分岐コメントとCSSによるフィルタリングはどちらが良い？

（案件ごとに）どちらを使っても良い。

CMSを使っているとどうしてもdiv要素を入れ子にしないといけない？

スタイルチェンジの柔軟性を確保する目的ではアリだが、そんなにこだわらなくてもよいのでは。