hamashun.com

追記

• 2008-04-03 言及を頂いたので質問コーナーに追記しました

CSS Nite in Ginza, Vol.23に行ってきました。 今回のゲストはあの大藤幹さん。 大藤さんの名著CSSプロフェッショナル・スタイルは、コーディングの勉強を始めたばっかりの頃に買って物凄く役に立った本だった事もあって、かなり期待していました。

開演前

19時開演なので18時30分に到着したんですが、既に座席は満員でした。 さすがに凄い人気です。

テーマ

大藤さんは雑誌Web Designingに『CSS Analysis』という連載をしていて、その内容は世界のWebサイトを取りあげて色んなテクニックを紹介するという物。
今回のテーマはそれの特別版みたいな感じで、『CSS Analysis Live!』でした。
なお、内容はあくまで解析したサイトの結果であり、それが正しいとか、或いは大藤さんの意見である、という訳では必ずしもないようでした。

アジェンダ

• この1年間の流れ
• トピックと事例
• これからのCSS

この1年間の流れ

新しいネタが減ってきた

CSSネタは成熟した感があるのでは。 ブラウザごとの特徴や対策や組み方のTipsなど、大抵の情報は出揃ってしまった。

（hamashun注：以前書いたんですけど、僕も同じような事を感じていました）

ハックを使わないサイトが登場した

CSSハックを全く使っていないサイトを取り上げてから、1年経っている。 しかしハックを使わないサイトは使っているサイトにあらゆる点で勝っている訳ではなく、例えばブラウザによる若干の差異などのデメリットが存在する。

世代交代で繰り返す歴史

画像置換の問題が顕著（後述）。

英語圏以外の国のサイトが増えた

連載当初は英語圏が100%だったが、最近ではドイツ、ブラジル、ルーマニア、チェコ、フランス、イタリアなど多岐に渡っている。
ちなみに取り上げる際は言語は考慮していなく、単にソースコードを見て決めているとの事。

言語圏の違いで制作スタイルの差が出てきた

昔は英語圏がNo,1だったが、最近はそうでもなくなってきている。 ドイツは追いつき追い越している印象。 そういえば思い返すと、2003年のW3Cサイトのリニューアルコンテストで優勝したのはドイツの人だった。
日本も結構イケてる。

トピックと実例

CSSハックの現状

• * html といういわゆるスターハックを殆ど見かけなくなった。
• clearfixも以前より減っている
• CSSハックを一切使わないサイトも登場した

世代交代による画像置換問題

画像置換そのものが悪という風潮で、使われない時期があった。 しかし、最近は普通に使われている。
その手法も、以前は古いブラウザに対応する為にtext-indent: -9999px;などとしていたが、最近は古いブラウザは無視したコードが増えている。 これらは若い製作者に多い傾向な模様。

古いブラウザの対応

英語圏では切り捨て傾向にある。 ドイツやオーストリアでは、IE5.0、IE5.5なども対応している事が多い。

（hamashun注：まあ、この辺はその国ごとのビジネス的、リテラシ的な事情にもよりそうですし、一概に優劣は決められないのではと思います）

CSSファイルの分割について

一時期、非常に細かく分けているサイトがあったが、最近はかなりシンプルな分け方が多い。 例として紹介された分け方で印象に残ったのは、いわゆるLiteboxなどのライブラリ用CSSを別ファイルに分けている事だった（弊社だと開発しちゃう事もあるので同じファイルに記述する事も）。
また、ブラウザの振り分けにはコンディショナルコメントを使っているサイトが多い（hamashun注：スターハックが減った理由も恐らくここにあるのでは）。

リセットCSS

最近は見かけない（！）。 連載で取り上げたサイトでは、英語圏以外では1年前くらいからゼロ件。 ただしこれは、一括してリセットしていないという意味で、marginとpaddingだけはリセットしたり、必要な箇所だけでリセットしているサイトはあるとの事。
でも、本当に全くリセットしていないサイトもあって、そのサイトはブラウザによって若干の表示差異はあるとの事。

（hamashun注：個人的にはこれには結構驚きました。 現状でmarginとpaddingのリセットをしないメリットはあるんでしょうか。
なお、この記事の最初にも書きましたが、この講演はあくまで事例を紹介する物であり、それが必ずしも優れているという訳ではないので注意してください）

ページの上部が大きな画像になっているサイト

ヘッダー部分を大きくとって、そこに大きな画像を配置するサイトが増えた。 これによって文字サイズを極端に変更してもサイトのイメージが損なわれない。

超大きい画像を使ったサイト

3000pxとかの大きな画像を使ったサイトも増えてきた。

（hamashun注：nowaのヘッダ画像も、リキッドレイアウトに対応するために大きな物が多いです。 2000pxとか。 max-widthプロパティと合わせて大きなヘッダ画像を使う方法がわかりやすいのでは）

エラスティックレイアウトの登場

2回取り上げた。 国はイギリスとアメリカ。 最近は余り見かけない。
これは_blankによる別窓問題と似た問題を引き起こす可能性があって、便利だと思う人もいれば迷惑に思う人もいるかもしれない。

これからのCSS

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

追加修正などのたびに足せば足すほど、または（ファイルを）分ければ分けるほど問題が増えるのではないか。 例えば、

• 何か問題が起きたらハックを使う
• 何でもかんでもデフォルトスタイルリセット
• CSSファイル自体も分けまくる

これらによって問題が発生する可能性がある。

ドイツ式シンプルコーディング

ドイツのコーディングはシンプルでキレイらしい。 余計な事はせず、見通しのいいCSS.
キレイなソースなどと聞くと「それが何の得になるの？」と言う人がいるが、そういう人はコーディング自体が目的になってしまっている。
コーディングとはあくまで目的を達成するための手段であり、短くキレイに書いておけば、その後の作業もラクになる。

（hamashun注：ここがちょっとピンとこない人もいるかもしれませんが、つまりコーディングが目的になっているというのはその場のコーディングを終わらせる事が目的になっていて、運用を考えていない状態なのではと思います。
自分の書いたコードを半年ぶりに編集する事を考えたら、キレイなコードの方がいいですよね）

プロパティの降順

連載でとりあげた最近のサイトは、結構バラバラ。 でも読みづらくはない。 プロパティは降順よりは数が読みやすさに影響するようだ。
また、重要なプロパティを上の方に持ってくるサイトもあった。

質問コーナー

Q:ドイツはCSSがキレイだというけど、HTMLはどうなんですか？

A:HTMLもキレイ。 というか、この連載はHTMLがキレイである事がまず前提。 そこから更にCSSを見ている。
基準のひとつとなるエピソードは、css Zen Gardenを取り上げようと思ったが、HTMLがアレだったのでやめたというもの。

Q:コンディショナルコメントの是非

A:最近増えている理由は不明。 使っている人が多くなってきたから他の人も使う、という循環かも？
ただし、Microsoftの中の人的には「使わないで」と言っていた。

Q:CSSファイルを分割しないWebサイトの規模は？

A:個人Blogが多い。
余談ながら森田雄さんは「分割するとセッションが増えるからそういう手法を紹介しないでほしい」と言っていたそう（読み込みのロスが増えるという事）。
益子さんはガンガン使う派らしい。

ファイル分割の件について、森田さんご本人から言及を頂きました。
securecat's exblog : Re: CSS Nite in Ginza, Vol.23のまとめ

最後に

情報に翻弄されない事が大事。

• 今回の講演に影響を受けて手法を変えても、他の情報でまた変えたくなるかもしれない
• 自分の仕事がラクになるようにしよう
• 労力とメリットをよく考える
• 定番手法はそれだけ多くの人のノウハウが詰まっている
• 最後は自分で考えるべし。 自分の道を行け

感想

久しぶりにガチなCSSネタを聞けて楽しかったです。 業務に使えそうな部分もありました。
お会いするまではなんとなくもっと固い感じの方なのかと思っていたんですが、全然そんな事はなくて打ち上げでも気さくで優しい方でした。