コーディングコンテスト Vol.1 ~Coder's High~ - CSS HappyLife

こっちにも参加しようかとコーディングしてみていたのだが、トップページ完成と同時に飽きた。
こういう「いかにも会社のWebサイト」的なデザインは経験が浅いので色々と参考になるし、自分一人の環境ではデザインとコーディングを同時進行させるので「他人のデザインをコーディングで再現する」ということ自体経験がない。
一方で、CSS中心にコーディングする人ならまずやらないようなデザインに泣かされもした。文字の画像化のみならず、全体として「Photoshopでスライスすることを前提にしたような」作りだ。新製品情報とか、かなり難物。


ここまでを完璧に作り上げ(ただしIEでの調整は済んでいない)、製品情報ページに取りかかろうとしたところで、凡そすべての要素に角丸が使われているのを見てげんなりした。
角丸はCSS Level3で提案されているが、今のところmozillaが先行実装している以外には採用例がない。従って角丸を実現しようと思えば画像に頼らざるを得ない。
今回のデザインは幅固定を前提としているので、それに合わせた幅で角丸画像を作って背景として配置することは不可能ではない。だが、それでは文字サイズも固定せざるを得なくなってしまう。逆に文字サイズを可変にして角丸を再現しようとするなら、最低で二重の枠が必要だ(ひとつの枠に1画像しか貼れないので、上枠1枚、下枠1枚の構成となる)。すべての要素に都合良く自由に利用可能な枠がふたつあるとも限らないし、デザインのためだけに枠を付けるコーディングは最低だ。
もう、こっちは素直に再現するのを止めて角丸を使わないパターン提案に切り替えようか。