2次応募も締め切りました。
コーディングコンテスト Vol.1 ~Coder's High~を開催します!
今回初の試みでもある(と思う)コーディングコンテスト。
用は、デザインは用意されてて、ソレを個々のスキルや考えに基づいてコーディングするというものです。
初回という事もあり、盛り上げたいな!と思っていたのですが、すんごい協力を頂けました。
ソレは、CSS Nite LP, Disk 3 と連動企画として動けたということ。
こんなWebの片隅でちまちま運営してるブログでも奇跡は起こるんですね。
さてさて、取り合えずさっさと必要データが欲しいって人の為に、目立たないDLボタンがありますので、そちらからダウンロードしてください。
このエントリーの追記で書いている詳細・必要事項は全て入れております。

(04/10:テキストデータ.txtが追加されております)
未統合psd、統合済みpsd、png、確認用jpgが入っていますが、何らかの理由で開けない場合は、コメントもしくはメールにてご連絡下さい。(PhotoShopのバージョンはCS2。CS以上なら正常に開けるかと思います)
そもそもzipじゃ開けないとかもありましたら、ご連絡下さい。
Fireworks用のデータですが、hxxk.jpの真琴さんが切り出しようのデータを作成して頂いているので、そちらを使っていただけると幸いです。
http://hxxk.jp/2007/04/05/0000ここの真ん中ら辺にあります。
2007-04-08T17:06:26+09:00 でページ内検索すればすぐに見つかると思います。
では、詳細に関しては追記にて。
---- こっから続き
スケジュール
- 締め切り:2007年4月22日(日)24時まで(締め切りました)
- 審査:2007年4月23日(月)~
- 結果発表:2007年5月12日(土)のLP3にて。このブログでの結果発表はその後時間見て頑張ります。
※ 審査対象になる締め切りは、2007年4月22日(日)24時までですが、LP3の割引特典が受けられる締め切りは、G.W明けの2007年5月6日(日)24時まで受け付けております。
目的
コーダーとしての提案力を上げる。
コーディングって下っ端の仕事なの? そんな事は無い。
コーダーから出来る提案だって、沢山ある。
この文字は小さすぎないかな、文字間広いかも?、ココはこうした方がもっと良くならないですか?、この方が絶対にアクセシビリティいいよ!、microformatsに対応してみた!この方が絶対にソース見やすいよね!
そんな提案力や意見力を!
もちろん提案だけじゃなくて、コーディングもしっかり出来ることが大前提。
初心者の方は、上級者のコーディングを見ることにより知識の幅を広げる。
中・上級者の方は、他の方のコーディングを見ることで新しい発見をし、視野を広める。
対象ユーザー・参加資格
XHTML+CSSによるコーディングが出来れば、その他の制限は一切なし。
デザイン
「実際の案件でもありそうな企業サイト」というテーマで作成。
ページ数
トップ+中ページの計2ページ
対応ブラウザ
Win
- IE 6/7
- Firefox 2
- Opera 9
Mac(OS X) ※OS9は対象外
- Safari 2
- Firefox 2
- Opera 9
IE5.x系、Netscape、それ以上に古いブラウザ、音声ブラウザ、CSS未対応ブラウザなどは全て対象外。
(対応するのは参加者の自由)
xml宣言
参加者の自由
DOCTYPE
XHTML1.0 Strict or Transitional
どちらかを選択。
(選択による審査の不利等は発生しない。)
文字コード
参加者の自由
ディレクトリ構成
参加者の自由
最低基準(バリデーション)
XHTMLについてはW3C Markup Validation Serviceで「Valid」。
CSSの文法の妥当性など(W3C CSS Validation Serviceとか)は、必ずしも通ることが必須条件ではありません。
その他のチェック(lintなど)も同様に通す必要が必ずある訳ではありません。
レイアウト目的によるテーブルの使用は、不可。ハイブリッドも同様に不可。
コーディングする上での補足説明
「コーダーの提案力」を重視しているので、デザインを完璧に再現するのも一つの能力として重要ですが、提案として個々の判断で変えていただいてOKです。
例:文字サイズを○○の理由で変えた。角丸部分を○○の理由で変えた。単純に1pxズレてると思ったから揃えた など
審査員の方の視点もそれぞれですので、一概にコレということはありません。
ソースコードの綺麗さや、コメントの仕方、分割管理など、自分の強みなどを押し出してください。
リンクは相対パスで指定してください。
サーバルートからの相対パスではありません。
審査員
- 鷹野 雅弘(株式会社スイッチ)
- 益子 貴寛(株式会社サイバーガーデン)
- 小久保 浩大郎(株式会社 ビジネス・アーキテクツ)
- 河内 正紀(株式会社 ロクナナ)
- 神森 勉(アンカー・テクノロジー株式会社)
- 長谷川 恭久(COULD)
- 伊藤 学(ウィルシステム・インコーポレイテッド)
- 鬼頭 健(ペタビット株式会社)
- 植木 真(株式会社インフォアクシア)
- 浜 俊太朗(株式会社ライブドア)
(順不同・敬称略)
賞品
Amazon ギフト券 3,000円分+各審査員の方からの何か(ある場合のみ)
コーディングコンテスト 参加特典
CSS Nite LP3での参加費が2,000円引き!
お申し込みは、「CSS Nite LP, Vol.3 "Coder's High":申込みフォーム」から。
データダウンロード
下記の無駄にでっかいボタンから。

(04/10:テキストデータ.txtが追加されております)
Fireworks用のデータですが、hxxk.jpの真琴さんが切り出しようのデータを作成して頂いているので、そちらを使っていただけると幸いです。
http://hxxk.jp/2007/04/05/0000ここの真ん中ら辺にあります。
2007-04-08T17:06:26+09:00 でページ内検索すればすぐに見つかると思います。
締め切り
2次応募も締め切りました。
応募時に必要なデータ
- ファイル一式
- ダウンロードしたファイルの中にある、profile.txtに必要事項を記入
ファイル一式は、htmlというフォルダにindex.htmlを入れてください。
それ以外は自由です。(画像置き場や中ページのディレクトリ構成など)
htmlフォルダ及び、profile.txtをzipなどで圧縮。
応募方法
締め切りました。
profile.txtに記載して頂いた個人情報の取り扱いに関して
- 入力いただいた個人情報は、デジパ株式会社で管理します。
- 個人情報は、コンテストのみに利用し、他の目的での利用および審査員以外の外部へ開示、提供をすることはございません
- 尚、結果発表時には「公開用のお名前」「サイトURI」「コーディング歴」「作業環境関連のデータ」「作業時間」「苦労した点」「ディレクター、デザイナーへ提案!(物申す)とその理由」「自由コメント」に関しては当ブログで公開する可能性がありますのでご了承の上参加して頂きますようお願いいたします。
コーディングデータに関して
主催側では、審査及び、結果発表以外の目的でデータを使用しません。
著作権に関しては「発生しない」扱いです。
参加者の方々には、非常に奇抜で創造性が豊かなデータを応募する方も居るかもしれませんが、今回のコンテストに関しては「発生しない」でご理解下さい。
その他・注意事項
ここに書いてある事に関しては全て決定事項の為、コメントなど頂いても変更できません。
逆に、分からない点や足りていない情報がございましたら、コメントなどで連絡いただければと思います。
参加者のブログでの告知に関しては、参加中などの告知は可能。データの公開は結果発表まで不可。
(コピーが応募されるのを防ぐため)
告知とかのコンテスト用バナーはこっち
デザインデータに関しては基本的に自由に使っていただいて構いません。
応募は1人1度まで。複数応募しても先に応募されたデータのみ審査対象。
(1度に複数パターンを入れるのも無しです)
Track Back [18]
コーディングコンテスト Vol.1 ~Coder's High~がついに開催!
ついにCSS HappyLifeさんのコーディングコンテストが開催しました! 審...
by CoolWebWindowコラム|2007年04月07日(土)
LP3 "Coder's High"連動企画「コーディングコンテスト」応募開始
5月12日、ベルサール神田にて開催予定のCSS Nite LP, Disk 3 ...
by CSS Nite公式ブログ|2007年04月07日(土)
うぇぶさいと
htmlとcssはウェブサイトを作る際に必要なものです。 htmlはプログラミング言語ではありませんが、マークアップ言語といって その文書の構造を規定...
by suzu-log|2007年04月08日(日)
コーディングコンテストついに開催!!
コーディングコンテスト Vol.1 ~Coder's High~ついに正式開催!!
by mystandard || css design weblog|2007年04月09日(月)
CSS Nite LP, Vol.3で開催されるコーディング・コンテスト、募集はじまりました。
左のハイになっている少女はCSS Nite主催の鷹野さんのお子さんです。可愛いですね。 そんなわけでデジパ主催(CSS Happy Life)の「コーデ...
by STOPN 'LISTEN|2007年04月09日(月)
CSS Nite LP, Disk 3 "Coder's High" 告知 [5月12日]
CSS Nite LP, Disk 3が5月12日土曜日に東京ベルサール神田で...
by Web::Blogoscope|2007年04月10日(火)
コーディングコンテストに挑戦だ!
CSS HappyLifeさん主催でコーディングコンテストが開催され...
by Webtech Walker|2007年04月10日(火)
諸君 私はコーディングが好きだ
諸君 私はコーディングが好きだ
というわけで、以下の2つのイベントに参加を表明いたします。
・CSS Nite LP, Disc...
by Like@Lunatic|2007年04月10日(火)
Coder's high 開催の狼煙!
お久しぶりです。以前のエントリーで発表を決意したコーディングコンテストですが、先...
by Skidbradnir.|2007年04月11日(水)
コーディングコンテスト Vol.1: 参加できるのか、それが問題
そもそも PhotoShop を使った事が無いという時点で終わっている気もしますが、なんとなくコーディングという言葉には惹かれてしまうわけでして。とりあえ...
by CEFA::Blog|2007年04月11日(水)
【告知】CSS Nite LP, Disk 3
データベース逝っちゃったので、改めて告知 あの『CSSniteLP』が再び行われ...
by KOMOREBI || blog|2007年04月13日(金)
コーディングコンテスト
私のブックマークに入っているブログの1つ、CSS HappyLifeを昨日、久し振りに覗いてみたら、コーティングコンテストの告知が出ていました。...
by Webデザイナー(ウェブデザイナー)、DTPデザイナーに...|2007年04月16日(月)
コーディングコンテスト corder's high!!
コーディングコンテスト開催です! あの"css nite"連動企画ということで審...
by Kangaroo Note|2007年04月16日(月)
コーディングコンテスト Vol.1 ~Coder's High~ 課題に取り組み中
コーディングコンテスト Vol.1 〓Coder's High〓なるものが開催さ...
by 365days:::おさるのWeb制作雑記帳|2007年04月16日(月)
コーディングコンテスト、CSS Nite LP, Disk 3 と連携
5月12日、東京・ベルサール神田にて CSS Nite の LP シリーズ第 3 弾が 開催されます、テーマは「Coder’s High」。 ...
by Komaku.net|2007年04月17日(火)
コーディングコンテスト Vol.1 ~Coder's High~
用意された画像データを元に架空の企業のサイトをコーディングしあって、見せっこする企画らしいです。 愛読させて頂いてるブログCSS HappyLifeさん...
by ホームページ制作ブログ|2007年04月23日(月)
コーディングコンテスト Vol.1 〜Coder's High〜に応募
締め切り間際の昨日の夜に、なんとか応募完了しました。 本来なら、参加してます、頑張って作ってます。ってエントリーするのが良かったのですが、仕事で色々考える...
by ジャンクワードの森|2007年04月23日(月)
corder's highのデータ作成終了
CSS Nite LP3と連動したコンテスト、コーディングコンテスト Vol.1 ‾Coder's High‾のデータ作成がついさっき終わりました。 普段...
by shortcut|2007年04月23日(月)








![[PR] SwapSkills for The Happy Web Weekend](/img/share/bnr_ban200w.jpg)



comment [32]
1 - ARONZO さん
はじめまして、Coder's Highを楽しみにしている者です。
「無駄にでっかいボタンから必要なデータをダウンロード」が出来ませんがどうしたらよろしいでしょうか?
2007年4月 7日 16:26
2 - Yunitti さん
Me too です。「無駄にでっかいボタン」からデータのダウンロードができません・・・(涙
2007年4月 7日 16:31
3 - 名無し さん
ファイルパスがずれてるみたいですね。
TOPページからはダウンロードできました。
http://css-happylife.com/
2007年4月 7日 16:47
4 - hira さん
うおっ!
/ 付け忘れてましたorz
修正しましたので、よろしくお願いいたします。
2007年4月 7日 18:43
5 - HILCA さん
質問です。
上部メニューの、アクティブページの場合は濃青線を表示するとのことですが、これをhover状態にした時は
・アクティブページに関わらず白線にする
・アクティブページなのだから濃青線のままにする
どちらでしょうか?
2007年4月 8日 10:26
6 - 名無し さん
>>5
既に該当ページにいるので
「リンクしない(hoverはない)」のではと思ったり。
パンくずと同じ考えですね。みんなはどうするんだろー
と思ったけどあえて聞かず。これも腕の見せ所。
2007年4月 8日 15:18
7 - hira@管理人 さん
>HILCA さん
こんにちは。
質問の件ですが、細かく規定しておりません。
Activeページでリンクを切る、切らない、
リンクは切らないけど、hoverで白になる、ならない。
などは、過去の経験や、自分が使いやすいと思う仕様で大丈夫です。
それが、評価として影響する or しないは審査員がそれぞれの考えの下に行うので、どちらに転ぶかは分かりません。
2007年4月 8日 16:41
8 - kazu さん
とうとう開催ですねー!
なかなか忙しいですけど、期日までに完成させたいと思います。。。
何もはじめてないけど、緊張してきました・・・。
URL|2007年4月 8日 17:04
9 - HILCA さん
> 質問の件ですが、細かく規定しておりません。
理解しました。満足です。
名無しさんも回答ありがとうございます
2007年4月 8日 19:07
10 - taki さん
はじめまして、(期限に間に合えば…)是非参加させていただきたいと思っている者です。
ルールについて少し確認させてください。
細かいデザイン・レイアウトはコーダーとしての提案を加味するのはあり!と言うことですが、
テキストデータはオリジナルのままにするべきでしょうか?
たとえば、トップページの最新情報の「My Space~」×2回などもそのまま入力すればよいのでしょうか?
お忙しいところすみませんがよろしくお願いします。
間に合うかわかりませんが楽しみにしています!
2007年4月 9日 20:03
11 - まめっこ さん
takiさん
> トップページの最新情報の「My Space~」×2回
テキスト自体に特に意味はなさそうなので、"複数行の表示もありえる"ということを言いたいのではないでしょうか。
同様にほかのテキストも、段落などを表したいだけで、それ自体には意味はないかと思います。
というか、はじめまして!
楽しみにしてました。参加します!
2007年4月 9日 23:08
12 - 匿名希望 さん
当方ブラウザでの確認環境がwinのみです。個人参加での両方の環境を用意するのは少々ハードルが高いのでもしブラウザエミュレーターをご存知のようであれば教えていただけますか?
よろしくお願いいたします。
2007年4月 9日 23:41
13 - hira さん
>kazu さん
はいー、頑張ってください。
>taki さん
まめっこさんの仰る通りです。
複数行になった場合の処理を表すために行っております。
複数行になった場合に、日付の下にテキストが来るとの来ないのでは、組み方が大きく変わってくると思いますので。
>まめっこ さん
ご回答していただき、ありがとうございます。
あ、はじめまして。
はいー、頑張ってください!
>匿名希望 さん
特に知らないというのもありますが、ぐぐったりmixiのコミュなどでも同様の質問は良く見かけますので、ご自身で探してみるのが良いと思います。
少々厳しいかもしれませんが、調べ癖は必須だと思いますので、その様にお願いします。
2007年4月10日 01:04
14 - 渦 さん
こんにちは。hiraさん進行・準備お疲れ様でした!!
さっそくPSD拝見いたしました。いろんな意味で腕が震えます。
私も挑戦させていただきます。有意義な機会をありがとうございます(^^)
URL|2007年4月10日 17:26
15 - やまざき さん
> リンクは相対パスで指定してください。
いじわるな指摘ですが、これ、各 HTML ファイルからの相対パスってことですよね ?
相対パスというと二通りの捉え方があるので...
ドキュメントルートからの相対パス、とかね。
先ほど発表されたのを知りました。
約 10日、放課後作業でどこまでできるかなぁ...
URL|2007年4月10日 21:52
16 - taki さん
まめっこさん、hiraさん、テキストの件ありがとうございました。
参加できるようにがんばってみたいと思います :)
2007年4月11日 00:18
17 - ひら@管理人 さん
>やまざき さん
ボクが無知なので教えて頂きたいのですが、
二通りの捉え方とはどのような意味でしょうか?
また、ドキュメントルートからの相対パスとはなんでしょうか?
2007年4月11日 09:01
18 - negi さん
はじめまして。コンテストに興味津々の者なんですが、もしかして、参加者じゃないと入賞者(上級者)の方たちのデータを見ることができないルールでしょうか?
2007年4月11日 15:04
19 - ひら@管理人 さん
>negiさん
えーっと、敢えてココは秘密で。
2007年4月11日 15:10
20 - やまざき さん
> 二通りの捉え方とはどのような意味でしょうか?
ref.
> 調べ癖は必須だと思いますので、
(意地悪でごめんなさい。)
私の理解している範囲で解説すると、以下のようになります。
よく src="/index.html" を絶対パス src="../../index.html" は相対パスという言い方をしますが、厳密には絶対パスとは http:// から FQDN 込みで記述したことを意味すると理解しています。
つまり、/index.html で指定しても「相対パス」と言えるのです。
ref.
http://www.kanzaki.com/docs/html/htminfo-uri.html#relative
http://www.web-ware.org/cgi/npindex/22/open_view.html
ただ、(個人的な感覚値ですが) 世の中の認知で言えば src="/index.html" あるいは src="http://example.com/index.html" を絶対パス、src="../index.html" を相対パスと捉えているのが一般的でしょう...
こういう公の場では正しい情報が書かれている方が望ましいかなぁと思いまして。
念のため確認ですが、管理人さんの意図としては src="../index.html" で指定して欲しいということですよね ?
URL|2007年4月12日 10:48
21 - やまざき さん
何度も失礼します。別件でコメントです。
meta の author や CSS の著作権はどういう扱いにする予定ですか ? copyright, rights ...
CC とか、オープンソースとかそんな扱いですか ?
このコンテストって参加者にとってはある意味 "ノウハウを晒す" 行為だと思うので、ソースの扱いについても主催側の意図、見解を述べておいたほうが良いと思います。
ウェブなので、いつでも見られてるよってことかもしれませんが...
ですが
> もしかして、参加者じゃないと入賞者(上級者)の方たちのデータを見ることができないルールでしょうか?
というあたりは結構重要だと思います。参加者の利権も守られるよう配慮いただけると安心できます。
ちょっと気になりましたのでコメントさせていただきました。
是非とも回答ください。
URL|2007年4月12日 10:56
22 - hira@管理人 さん
>やまざきさん
なるほど。勉強になりました。
エントリーに補足しておきます。
ありがとうございました。
2007年4月12日 11:58
23 - すーじー さん
はじめまして、こんにちは。
コーディングコンテスト、参加させていただこうと思っています。
ところでデザインカンプについてなんですが、先日こちらのエントリーを拝見したときは、「Fireworksのデータを用意する」というような文言があったような気がしたのですが(気のせいかな…)今は消えてます、よね?
psdファイルのみということでしょうか。
もしFireworksPNGが追加されるのであればそちらを使わ
せていただこうかなと思ったもので。
ご回答いただけると幸いです。
2007年4月12日 14:40
24 - ひら@管理人 さん
>すーじー さん
はじめまして。
このエントリーではなくて、別のエントリーで書いてます。
用意出来るのは、明日か明後日辺りで考えておりますので、Fireworksユーザーの方はもう少々お待ち下さい。
2007年4月12日 14:57
25 - すーじー さん
はっ…。別のエントリでしたね。
何かrssリーダがおかしくなってました。
大変失礼いたしました~
データお待ちしております!
2007年4月13日 10:23
26 - まめっこ さん
やまざきさん
もう見てらっしゃらないかと思いますが、少し気になっていたので絶対・相対パスについて調べてみました。
益子氏の「WEB標準の教科書(P35)」と提示されている神崎氏のページを参考にしましたが、
どちらも、
href="http://~" 絶対URI(絶対URL)
href="/~" 相対URI(相対URL)または絶対パス
href="./~" 相対URI(相対URL)または相対パス
というような説明になっています。
ですので、
> /index.html で指定しても「相対パス」と言えるのです。
こちらに関しては「スラッシュから始まるパス指定は、"相対URI"であり"相対パス"ではない」ので、
相対パス指定を指示しているhiraさんの仰っていることに勘違いを仰ぐようなミスはないかと思います。
また、「WEB標準の教科書」では「"絶対パス"と"絶対URI"は異なる」と明確にされています。
これはつまり、"URI"と"パス"は似て非なるものということになり、やまざきさんはもしかすると混同されてませんでしょうか?
以上、長文失礼しました。
2007年4月16日 15:03
27 - ごぼ さん
すみません、しょうもない質問かもしれないんですが。
作るのは2ページですよね。
productsはともかく、どうしてindexとtopと2つあるんでしょうか。
何が違うのかさんざん探してまだ解りません。
疲れきったので種明かしして下さい。
2007年4月17日 00:01
28 - hira@管理人 さん
>ごぼさん
ホントすみません。
消したと思い込んでました…
topは不要です。indexが正しいです。
大変申し訳ありませんでした。
2007年4月17日 01:05
29 - やまざき さん
> 相対パス指定を指示しているhiraさんの仰っていることに勘違いを仰ぐようなミスはないかと思います。
これは大変失礼いたしました。私の認識間違いのようですね。
自身でももう一度確認してみます。
hiraさん、申し訳ありません。
> "URI"と"パス"は似て非なるものということになり、やまざきさんはもしかすると混同されてませんでしょうか?
これはないです。
ただ、前提の理解が間違っていましたので、先のコメントは訂正させてください。
まめっこさん、的確なご指摘ありがとうございました。
URL|2007年4月17日 10:58
30 - ひら@管理人 さん
>やまざきさん
いえいえ。
ボクも色々調べてましたが、サイトによって違う説明だったりして自分が正しいとかって自信が無かったので、スッキリしました。
2007年4月17日 11:26
31 - 万葉 さん
いまさらかもしれませんが…。
index-hover(統合済み).psdの一番下に、つぶやくように
「ココの開き(margin)は、10px」とかかれているのですが他のページには書かれていません。
コピーライトの下に余白を設けるデザインなのでしょうか。それとも文字の消し忘れですか??
とりあえず余白を設ける方向で構築していますが。。
2007年4月20日 13:34
32 - hira さん
>万葉 さん
すみません、消し忘れです。
空くというより、デザイン上だと下部の余白が異様にあったので、100pxとか余白取られちゃうとアレだったので、入れた方がいいかなーと悩んでた部分の名残です。
すみません。
下部の余白に関しては、極端に空いてしまう事がなければどちらでも問題は無いので、そのようにお願いします。
2007年4月20日 13:55