スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

CSS Nite LP9 連動 第2回コーディングコンテスト

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

「1日あれば終わるかな~」と思っていましたが、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を自由に使っていい、という実務ではまずあり得ない課題でした。

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

firefoxで表示した画面

実際のソースはこちら。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に対応したら、二重に表示されてしまうかなーと思ったので。。。

とまあ、こんな感じで

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

スポンサーサイト
RSS
  • 最近記事のRSS
最新記事
カテゴリ
月別アーカイブ
コンタクト

名前:
メール:
件名:
本文:

Ads
検索フォーム
プロフィール

gryng

gryng

MEやってます。twitter

Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。