画像の使用を（略）CSS大会の作品解説。

壱茉さん主催の画像の使用を（略）CSS大会に２点ほど応募したんですが、１点目はともかく２点目は友達の中村というデザイナがビジュアルを作って僕がCSSを書くという流れで参加したので、見た目的にもCSS的にも面白い事が出来たと思ったので、ちょっとだけ解説したいと思います。

タイトル: gungnir
ページ: ギャラリー

原案はこんな感じなんですが、CSSの常識から言ってまず無理だと判断してしまうのは、本文の２カラムです。
一つのブロック要素を２カラムで表現することは、僕の知る限り現在はCSSだけで実現するのは不可能だと思ったので、シングルに変更しました。
次に目を引くのは、リストの番号がでかいことです。しかし、これは面白いし、見やすいと思ったので、考えた結果、contentプロパティの counter()を利用することで実現しました。

リストのスタイル無効にし、カウンターで番号を生成して表示した結果、OperaとFirefox *1では上のような感じで実現できましたが、IEとSafariはcounterに対応していません。そのまま番号が表示されなくては困るので、IE と Safari には、それぞれのみにCSSを適用するhack*2を用いて通常のdecimalの値を与えました。これによって、レンダリングの差による情報の違いを吸収させています。

あと、今回重宝したのは:first-childや:last-childなどの疑似クラスです。もちろん、このような画像を使わずCSSのみで表現する大会では、面白い表現をするため、各種セレクタ *3を実際にほとんどの人が使っています。
しかし今回、不要なブロックを控えて綺麗な文書構造を持つHTMLで、柔軟なレイアウト表現をするためには各種セレクタの利用が必要不可欠であると思いました。

このデザインで便利に感じたのは、CSS3 で定義されている:last-childです。先行実装しているFirefoxでは一番下の.sectionでpadding-bottomを0にして、margin-bottomを使ってスペースを取っていますが、Operaではそれが出来ずにmarginもpaddingもそのままです。

というわけで、各種セレクタを適切に用いることで、非常に簡潔なHTML構造を保ちつつ、柔軟な見た目を実現できることがよく分かりました。
でも残念ながら、やっぱり各種セレクタを駆使すると、どんどん酷くなって行くのがIEです。最終的に、IEのみ（IE7もね）大幅に調節を加えた結果、ようやく下のような表示に落ち着くことができました。

あと、最近の僕のCSSの管理方法は、メインスタイルを記述したdefault.cssと、ブラウザのデフォルトスタイルをリセットするreset.css *4、各ブラウザのバグ修正スタイルをまとめたhack.cssと、今回はフォントサイズを調節するためにYUI の font.cssの４つのCSSに分けて、import.cssからインポートしています。
とまぁ、そんな感じなんですが、詳しい事はやっぱりソースを見てください:p)