第2回コーディングコンテスト 入賞しました。
コーディングコンテンストについて
4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Higher」にて、第2回コーディングコンテストの審査結果発表が行われたのですが、そちらで入賞を頂きました。
CSS Nite LP, Disk 9「Coder’s Higher」については当日のTwitterのTLを参照して頂ければなんとなく雰囲気が伝わるかと思います。
入賞した作品
応募したのは以下のHTMLになります。
他のcssファイル、画像ファイルは0ファイルなので、このindex.htmlだけを応募しました。
ちなみに1枚にする前のファイルはこちらにまとめてあります。
詳細は続きから。
前提みたいなもの
ちゃんと手を付けたのが締め切り日の13時付近で、まあ11時間くらいあれば終わるだろうなんて思っていたら…
まったく持って終わらない雰囲気が…！
そしてまさに23時59分30秒くらいまで作業をしていて、ぎりぎり2秒前に応募できました…
ちなみに一番最後の応募だったらしいです（汗
そして提出後、Webkitで画像がうまいこと表示されないことが判明して優秀賞などは無理と判断！
という流れがありました。
提出したものの特長や注力した点
0リクエスト
index.html内からのリクエストを0にするために、cssを直書き・画像をbase64形式で埋め込みなどを行いました。
要するにindex.htmlだけを応募したわけです。
idとclassを多用しないコーディング
良いか悪いかは別として、実験的にidとclassをあまり用いずにコーディングしてみました。
css3のセレクタを多用して組んでみています。
1 2 3 | <header></header> <div id="contents"></div> <footer></footer> |
ぶっちゃけ、idとclassはもっと振ったほうがいいと思いました！
:targetを用いたライトボックス
右上部分にある画像をクリックするとオーバーレイしてライトボックスが出るんですが、そこはJavascriptを使わずに実装しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | body>aside:last-of-type li{ position:absolute; top:0; left:0; width:100%; text-align:center; background:rgba(0,0,0,0.5); height:100%; -webkit-transition:opacity 3s ease-in-out; } body>aside:last-of-type li span{ position:absolute; top:0; left:50%; padding-top:10px; margin-left:-480px; text-align:center; width:960px; height:100%; -webkit-transition:opacity 3s ease-in-out; } li[role="zoomImg"]{ display:none; opacity:0; } li[role="zoomImg"]:target{ display:block; opacity:1; } |
若干表示崩れを起こしていますが…ご愛嬌ということで。
アニメーションを付け忘れたのが無念…！
css3によるビジュアライズ
各ボタンなどのグラデなどにcss3によるグラデーションや角丸などを使用しています。
というかこれはむしろ当たり前な感じがするので特に触れる必要はないかと思います。
ちなみに地味に苦労したのはヘッダー上部の黒線にシャドウがかかった部分でした。
自分はcss3の「:before」を用いて実装してみました。
1 2 3 4 5 6 7 8 9 10 11 | header:first-of-type:before{ content:""; display:block; background-color:#152427; height:6px; position:absolute; left:0; width:100%; -moz-box-shadow:0 1px 2px #666; -webkit-box-shadow:0 1px 2px #666; } |
という感じです。
まとめ・感想
組んでみた全体的な感想
- idやclassを無駄に振らずにすんだ。
→これは自分が無理やり実装したからなのですが、命名しなくてよいというのはかなり時間短縮にはつながりました。 - リッチな表現がcss3のみでかなり出来た
- 本来ならJavascriptを用いなければならない部分がcss3で対応が可能になった
→ライトボックスなどが該当 - 今までグラデなどはスライスすればよかったものが、ピッカーなどを使って再現する必要があったため、逆に時間を浪費した
というように、良いことばかりでは無く悪い点もいくつか見受けられました。
正直穴だらけのコーディングでお恥ずかしい限りですが、沢山勉強になりました。
また名のある審査員の方々に見ていただけて大変光栄でした！
その他のお話
当日の懇親会などで審査員の方何名かにお話をお伺いしたところ マニアック や 変 だの キモかった だの、非常に嬉しいお言葉をいただけました！
致命的だったのがSafariで画像が表示されなかったことだったそうです。そりゃそうだ…！
あとはそもそも、css3とは別の部分での評価が多かったため という感じでした。
理由はどうあれ、審査員の方々に目が止まるような物を作れてよかったと思います。
ただまったく持って未熟なものを提出してしまったので、次回はもっと時間をかけて作業できたらと思いました。
他の応募者様もおつかれさまでした！！
