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

お知らせ, イベント

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

CSS Nite LP9 連動 第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とは別の部分での評価が多かったため という感じでした。

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

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

10 Comments »

  1. 第2回コーディングコンテスト 入賞しました。 | kzms2 – html,css,javascript コーディングコンテンストについて4月17日に開催されたCSS Nite LP… http://goo.gl/fb/a9xWE

    トラックバック by WorkingNow_bot — 2010/4/27 火曜日 @ 1:40:06

  2. 第2回コーディングコンテスト 入賞しました。 | kzms2 – html,css,javascript http://bit.ly/9lW8Ln #HTML #HTMLjp

    トラックバック by HTMLニュース — 2010/4/27 火曜日 @ 2:01:53

  3. 第2回コーディングコンテスト 入賞しました。 | kzms2 – html,css,javascript: コーディングコンテンストについて4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Highe… http://bit.ly/9lW8Ln

    トラックバック by コーディングヘルパー — 2010/4/27 火曜日 @ 3:58:39

  4. RT @codingheler: 第2回コーディングコンテスト 入賞しました。 | kzms2 – html,css,javascript: コーディングコンテンストについて4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Highe… http://bit.ly/9lW8Ln

    トラックバック by javascript: — 2010/4/27 火曜日 @ 4:05:17

  5. .@kzms2 さんが全く同じ事してて笑った!変態すぎる>< 「:targetを用いたライトボックス」http://kzms2.com/2010/04/27/about_coding-contest-2nd/

    トラックバック by neotag — 2010/4/27 火曜日 @ 5:03:28

  6. これは変態だww ソースのインパクトが半端ない。発想力がすごい。そして、新しい技術の使い方が勉強になる。
    >第2回コーディングコンテスト 入賞しました。 | kzms2
    http://j.mp/coxNiE

    トラックバック by ごんた — 2010/4/27 火曜日 @ 15:00:20

  7. 第2回コーディングコンテスト 入賞しました。 | kzms2 – html,css,javascript http://j.mp/aIVcA5

    トラックバック by 後藤 美夜 — 2010/4/29 木曜日 @ 13:10:27

  8. こういう技術を持ってる人と一緒に仕事したい。RT @ubitw 第2回コーディングコンテスト 入賞しました。 | kzms2 – html,css,javascript http://j.mp/aIVcA5

    トラックバック by Masaki NAKAYAMA — 2010/4/29 木曜日 @ 13:26:26

  9. おめでとうございます!「マニアック や 変 だの キモかった だの、非常に嬉しいお言葉」の一文が素晴らしいですw RT @ubitw: 第2回コーディングコンテスト 入賞しました。 | kzms2 – html,css,javascript http://j.mp/aIVcA5

    トラックバック by Seiya Shimizu — 2010/4/29 木曜日 @ 13:31:40

  10. メモ。 RT 第2回コーディングコンテスト 入賞しました。 | kzms2 – html,css,javascript http://j.mp/aIVcA5

    トラックバック by 後藤 美夜 — 2010/4/29 木曜日 @ 13:35:38

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー
  • 読み込みエラーです。しばらく経ってから確認してみてください。

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。