コーディングコンテンストについて

4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Higher」にて、第2回コーディングコンテストの審査結果発表が行われたのですが、そちらで入賞を頂きました。

CSS Nite LP, Disk 9「Coder’s Higher」については当日のTwitterのTLを参照して頂ければなんとなく雰囲気が伝わるかと思います。

入賞した作品

応募したのは以下のHTMLになります。

• Movable Type 5

他の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のセレクタを多用して組んでみています。
<header></header>
<div id="contents"></div>
<footer></footer>

ぶっちゃけ、idとclassはもっと振ったほうがいいと思いました！

:targetを用いたライトボックス

右上部分にある画像をクリックするとオーバーレイしてライトボックスが出るんですが、そこはJavascriptを使わずに実装しています。
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」を用いて実装してみました。
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とは別の部分での評価が多かったため　という感じでした。

理由はどうあれ、審査員の方々に目が止まるような物を作れてよかったと思います。
ただまったく持って未熟なものを提出してしまったので、次回はもっと時間をかけて作業できたらと思いました。

他の応募者様もおつかれさまでした！！

リニューアルしますた。

Safari4だとキャプチャのように見えるはずです。
古いブラウザやCSS3に対応していないブラウザはものすごい表示になります。
IEで見ちゃいけません。ダメ絶対。
にしてもデザインの苦手なデザイナーだけあって直せそうなところがいっぱい…

明日以降からそこらへんは対応させてください…
といっても、古いブラウザなどはあえて微妙な表示にする予定ではあります。
仕事がNN4とかまでフォローしてるので、プライベートくらいはこんな感じにしたいかなぁと･･･

概要っぽいもの

• このページ画像は1枚も使ってません。凄いですねCSS3は。
  あ、上のキャプチャとその他アイコンはさすがに画像です＞＜
  デザインには一枚も画像を使っていないという意味です。
• アニメーションにJavascriptは使っていません。ChromeやSafari4などでページを見れば所々動きますが、CSS3です

作業時間とか

1. デザインは3時間くらい
2. コーディングは2時間くらい

計5時間くらい。ですがロスタイム含めて6時間ちょいかと思います。Twitterに作業はじめの時間POSTしてるので、それを元に計算しています。
コーディングに関してはIEとかを、ブッタ切ってるので納得の時間ですね…

苦労したところ

1. 地味にWebkit系とMozillaとで、ボックスの考え方が違いました。
   特にbox-shadowを使った場合、Mozilla系はbox-shadow分横幅が伸びて表示が崩れました（今は無理やり表示させてます）
2. TwitterにもPostしましたが「@font-face」を「@font-faｓe」と書いて1時間ほどはまりました…コピペしたはずなんだけど＞＜

明日以降直すところ

1. 古いブラウザなどの対応
2. HTML4の部分をHTML5に変更（ワードプレスの勉強をしないと…）
3. デザインの微調整（微妙にデザイン通りじゃない場所が多いので、調整）

といった感じになると思います。

ちょっと夜更かししすぎたので、後は明日以降の対応で＞＜
質問などありましたらコメントをお願いします。