第2回コーディングコンテストで入賞しました!

1回目のコーディングコンテストにも参加しましたが、入賞ならず、リベンジするつもりで応募した2回目のコーディングコンテストで、見事入賞しました! ありがとうございます!!

今回のコーディングコンテストは、これからのウェブ標準となる、HTML5とCSS3に焦点が当てられています。

勉強しながらコーディングした制作物を公開します。

まずは、応募した制作物のzipファイル
2010codingcontest.zip

と、その中身です。
2010codingcontest/index.html

今、見返してみると、ああすれば良かった、こうすれば良かったという部分がありますね。

で、今回どうして入賞できたのか? それは狙い通りというか、なんと言うか、きっと誰も注目していないだろうなと思われる CSS3 Media Queries に着目したからではないかと。

今回のコーディングコンテストでは、HTML5とCSS3を使って、デザインを忠実に再現することが求められた訳だけど、対応ブラウザは Firefox 3.6 と Safari 4 だけで、

そのほかのブラウザでは情報が正しく伝わること。デザインの再現は必要ありません

と書いてあります。つまり、CSS3をがっつり使ってコーディングしようとすると、CSS3に対応していないブラウザへの対応が問題になってしまうんですね。

ばっさり切り捨てて、非対応にしちゃうのか、それとも、div要素+CSSハックで強引にデザインを再現するのか、きっと意見が分かれる部分ではなかったかと思うんです。

そこで、僕はそのどちらでもない「非対応ブラウザ用のCSSを用意する」というへそ曲がりな選択をした訳です。

その延長として、携帯端末用CSS、印刷用CSSを用意して、CSS3 Media Queries でメディアや画面サイズに応じてデザインを振り分けたら「審査員の方々の目に止まって入賞できるかも」なんて考えてました。

最優秀賞や優秀賞こそ逃しましたが、みごと狙い通りだった訳です。これはある意味、最優秀賞を獲得したぐらいのキモチ良サデスヨ!

でも、今度コーディングコンテストがあったら、トリッキーなことなしに入賞したいもんです。

[追記: 2010年05月08日]

CSS3 Media Queries の確認は主にOperaで確認しています。実機による確認はしてません。