参加してみた。画像無使用、紙媒体的な読み易さを念頭に置いて。
配色はid:tanemori氏のスタイルから頂いている(事後ではあるが御礼申し上げる)。このCSSは配色だけでなく配置も含め実に秀逸だと思う。
規定ルールについて
大外の三重divはいかがなものか、と思う。確かに多重に枠があった方が複雑なデザインを設定し易いのだが、構造化という点では複数要素をまとめるための囲いdivはひとつであるべきだ。
その一方で、当初は見出しとその下の要素を囲う枠がないなど不足のある構造だったが、途中でdiv.section付きのソースに差し替えられていたのでそれをベースに再設定した。
当初はdivへの設定不使用、class/idの不使用なども考えていたようだったが、正直なところそれらなしに柔軟なスタイル指定は困難だし、技術訓練としてもむしろそれらを的確に使い分けられた方が好ましいのではないか。
また、最初にざっとルール案を見た時には『「画像5点以内」て(メニューによく使われるように)大きな画像1枚の表示部分を変えることでかなり使い回せるんじゃないか』と思ったが、公式ルールでは「50px以内の」という制限条項があったので安心した。
実際のところ、画像はデザインに必須の要素ではない。トップに大きな画像を使うといかにも見栄えがするのでよく誤魔化しに使われるが、それがコンテンツとして必須のものでないならば過剰装飾だ。それに、小さな画像でも使いどころを弁えれば充分な効果を発揮する。例えばアールヌーヴォースタイルでは枠線を柔らかく見せるために5枚ほど小さな画像を挿し込んでいるのみだ。
今回の注力点
文字ベースデザインとしての、Webに於ける最大の欠点は段組みだと思う。表示環境にも因ろうが、私の場合は比較的高解像度なモニタで広く表示する傾向にあるので、文字列が矢鱈と横に長く読み難くなりがちだ。段組みはこれを解消する最良の方法だが、CSSでは適切な方法が用意されていない。
NN4の頃にNetscapeはmulticolというタグを提案した。こうした物理要素は好ましくないが、CSSとしての実装であればむしろ望まれる機能であっただろう。結局、今に至るまでこの機能はCSSで実現できていないのだが、今回はfloatによるブロック単位での段組みもどきを行なってみた。
当初は大会の参加要項についても段組みとしていたのだが、各ブロックで長さがバラバラであること、区切り線の綺麗な挿入が困難であることから断念、見出しを左に出すスタイルとした。
実は上下とも、基本構造に違いはない。div.sectionでh2ごと中の要素を囲い、その中に更にdiv.sectionがあってh3以下の要素を囲う。外枠と内枠のclassが同じというのは違和感があるが、それは切り分けられるので問題ない。困るのは上下要素の切り分けだが、これは途中にhrが挟まれることを利用し隣接セレクタで対応した。従って隣接セレクタに非対応なWinIE6以前での表示を保証しない。
IE7では概ね意図した通りにレイアウトされていたが、何故か枠線の一部が表示されていない。調整は可能そうだったが制作環境がMacであり他人の作業機を占領して調整するのは気が引けたので放置した。できればGecko系、Opera、またはSafariの最新版でご覧頂きたい。
尚、全体を割合指定のみで制作しているため、閲覧者のウィンドウサイズや文字サイズによって見栄えが変わる。「ブラウザのデフォルトはユーザが好みに調整した結果」という前提でそのようにしているが、実のところ(特にIEユーザは)最適値に調整していない傾向があるので文字が大きく見えたりするかも知れない。
……そう言えばh5〜h6あたりとリストの調整を忘れてた。詰めが甘い。
他の参加者のCSSで気に入ったもの
個人的にborderのみで三角を表現する手法に感心した。ただしline-heightを0にする必要があるため確実に1行で表示される要素にしか利用できないのが欠点。
その他
コンテストと銘打つなら投票機能とかあっても良いのではないかと思った。「どれが優れているか」は一概には決められないとしても、「どれが人気あるか」は判断できてもいいような。
コメント数をその代わりとする方法もあるけど、それだと「疑問があってコメント」とか「不具合報告があってコメント」のようなものもカウントされてしまうし、なにより少々敷居が高い(のでほとんどのデザインに何のコメントも付かず終わってしまうだろう)。
