とーーーっても今更感が満載ではありますが、
第2回コーディングコンテストに応募した作品(?)を公開しておきます。
ついでに、第1回目の作品も公開しておきます。
ちなみに、賞をとることはできませんでした。
残念です。
次回、がんばります。
以下、第2回作品をコーディングしてみた感想など。
「display: -moz-box;」、「display: -webkit-box;」を初めて使った
「display: -moz-box;」、「display: -webkit-box;」を初めて使ったけど、
便利ねー。
もうじゃんじゃん使っていきたい。
【参考】
inputのplaceholder属性
inputのplaceholderを使ってみようとしました。
テキストフィールドにうっすら文字が出ていて、
focusすると消えるアレです。
けど、Safari4でしか動きません。
Firefox3.6も動いてくれればいいのに。
なので、jQueryのプラグインで実装しました。
【参考】
- HTML5 – inputタグのrequired属性などなど at HouseTect, JavaScript Blog
- フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
「header」、「footer」、「nav」、「aside」、「article」、「section」はインライン要素
「header」、「footer」、「nav」、「aside」、「article」、「section」はインライン要素らしいので、
それぞれ「display: block;」するのが良さげ。
header,footer,nav,aside,article,section {
display: block;
}
グラデーション
背景のグラデーションをCSSで表現してみました。
あと、角丸もCSSでやってみました。
【参考】