CSS Nite LP9 第二回コーディングコンテストに参加しました[#lp9cc]

CSS Nite LP9 連動 第2回コーディングコンテストの課題を無事に提出する事ができました。

「１日あれば終わるかな〜」と思っていましたが、２日がかりの大仕事となりました。。html5もCSS3もがっつり触った事がなかったので、知らない事もたくさん。。かなり勉強になりました。

と、いうことで、恥ずかしいコードですが、提出した課題を晒したいと思います。

その前に、どんな課題だったのかを簡単におさらい。

• HTML部分
  • HTML5（参照する仕様は編集者版を想定 http://dev.w3.org/html5/spec/）
  • WAI-ARIA、RDFaなどの拡張は審査対象外（使用するのはかまいません）
  • 画像、CSS、JavaScriptは相対パス指定、リンク先は絶対パスで指定してください。
• CSS部分
  • CSS3までを利用できる
• JavaScript
  • 利用自由
  • 商用サイトとしてライセンスに違反しない限りライブラリの利用自由
• 文字コード
  • 自由
• 対応ブラウザ
  • Firefox 3.6
  • Safari 4
  • そのほかのブラウザでは情報が正しく伝わること。デザインの再現は必要ありません

html5とCSS3を自由に使っていい、という実務ではまずあり得ない課題でした。

二日かけてコーディング。こんな感じになりました。

実際のソースはこちら。Safari（chrome）かFirefoxで表示してみてください。

ソースコード

もっと時間があればな〜〜といったところもたくさんあって恥ずかしいです。。あ、ちなみにwindowsで一度も表示確認してません。笑 おうちにwindowsマシンがなくて・・・・・・

苦労したところなど。。

bodyの背景

グラデ＋ドットの画像＋上部のボーダーとその影、といういきなり鬼デザイン。背景のグラデは高さが決まっているようなので「background-size」でグラデの高さを決め打ちに。しかし固定したグラデがリピートしてしまう問題に直面。。試しに「no-repeat」を指定してみたらリピートしなくなりました。上部のボーダーの影はとりあえず諦めて先に進みました。（結局、影を表示するだけの空divをjsで生成して配置することで解決しました。）

マルチカラムレイアウト

display: box;を指定すると子要素が綺麗に並ぶらしいということだったので実際に使ってみました。floatを使うよりもシンプルで挙動も分かりやすくていいですね〜。ラクチンでした。幅の指定にやや癖があるので慣れかなーといったところ。気のせいかもしれないですが、display: boxを指定したところの上下のマージンが相殺されなくなってしまいました。気にせず進めましたが。笑

検索ボックス

検索ボックスの入力フォームに透けている「サイト内検索」のテキストがFirefoxでは未実装のまま提出してしまいました。。。Safariではinputにplaceholder="hogehoge"と指定する事で実装できました。Firefoxでも背景画像としてテキストを配置すれば同じように実装することが可能でしたが、あえてやりませんでした。たいした理由ではないですが、今後Firefoxがバージョンアップしてplaceholderに対応したら、二重に表示されてしまうかなーと思ったので。。。

とまあ、こんな感じで

いやはや、何年後かにこのソースを見ると赤面して死にたくなるんだろうけど、無事に提出できてよかったと思います。参加したことに意義がある！ということで。。。