画像の使用を(略)CSS大会の作品解説。


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

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


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

リストのスタイル無効にし、カウンターで番号を生成して表示した結果、OperaFirefox*1では上のような感じで実現できましたが、IESafariはcounterに対応していません。そのまま番号が表示されなくては困るので、IESafari には、それぞれのみに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の4つのCSSに分けて、import.cssからインポートしています。
とまぁ、そんな感じなんですが、詳しい事はやっぱりソースを見てください:p)

*1:Firefox はバグか解釈の違いかで明示的にリセットが必要です

*2:IE7 を含むモダンブラウザ向けの CSS ハックまとめCSS hacks seriesを参考。

*3:疑似クラスセレクタ、疑似要素セレクタ、隣接セレクタ、子要素セレクタなど、くわしくはCSS セレクタに関するおさらいあたりを参考。

*4:最近の僕の中の流行りはEric Meyerさんの手法です。