Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

第2回コーディングコンテストの課題をやってみた（締め切り過ぎてたけどね）

日記 CSS

つい最近まで第2回コーディングコンテストというのがCSSNiteの企画で行われていたのですが、なんとなーく面白そうなので参加してみた。
参加したといっても、出された課題（Webページを1ページコーディングする）をやって、それを期限までにメールで送るという簡単なモノなんです。
しかし、ダラダラ・ちまちまやっていたらいつの間にか期限が過ぎていました（まぁ締め切りの6時間前にデータをダウンロードしてるようじゃ当たり前だよなぁ）。なのでせめてブログで自分なりの答えを発表しようと思った次第です。

第2回コーディングコンテストの概要

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

まず開催目的。
「これから現場で困るだろうHTML5+CSS3の技術を先取りして実装してみることで問題点を洗い出し知識として共有する。この機会を利用してこれからのスタンダードを業界に示す。」
実はこれを読んで参加してみようかと思いました。HTML5とかCSS３って、もちろん前から意識してるけど、あまり実践で使ってないんですよね。ブラウザの実装がまちまちだったりするし、それなりに覚えること多そうだし…。
これを機会に、HTML5とCSS3についてがっつり勉強しようと思ったのです。まぁ結果半分ぐらい（いや3分の1ぐらいかも…）はわかったつもりです。でも追加された要素の概要はだいたい分かりましたよ。


話がそれましたが、つぎに参加・応募方法／締め切りですが、これは先ほども書いたとおり、ページを1枚コーディングしてメールで3/22中に送る（間に合わなかった〜）。
デザインは決まっていてpsd形式のモノをダウンロードしてそれを参考にコーディングします。
コレは人によるのかもしれませんが、私はWebデザインを作っていくときにIllustratorをベースに作る人なので、正直psdからの書き起こしは慣れなかったです。
ちなみに、ブラウザでの評価はFirefox 3.6とSafari 4に対応していること、他のブラウザでは正しく情報が伝わることが条件。私は締め切り過ぎて手を抜いたこともあって、safariとfirefox以外はチェックしていません（validatorはかけたけど）。

私なりの答えはコレだ！

第2回コーディングコンテストの課題・完成形（by kudakurage）

HTML5で書くのはもちろんですが、せっかくなのでなるべくCSS3を使うようにコーディングしました。
HTML5ではheaderタグ、footerタグ、sectionタグ、navタグ、asideタグ、articleタグ、figureタグ、figcaptionタグ、timeタグなんかを使いながらマークアップしていったのですが、Section系のタグと見出しづけの辺りがかなり迷いましたね。特に、section, article, asideの使い分けはまだまだ理解できてない気もする。それにh1〜h6の見出しづけが絡んできて、何が正しいんだか自信を持っては答えられない気もします。
一応section, article, asideの説明を書いておきますと…

section…一般的なセクションを表します。〜必ず章や節といった単位で使わなければいけません。

article…ブログの投稿、ニュースサイトの記事のように、それ自身で独立したコンテンツを表します。〜そのコンテンツが、シンジケーションに値するかどうかが、article要素が適しているかどうかの基準となります。

aside…補足記事、サイドバー、広告などのように、メインのコンテンツとは関連が薄く、切り離すことができると考えられるものに使います。また、ナビゲーションのグループを1つにまとめるために使うこともできます。

（徹底解説HTML5マークアップガイドブックより引用）


新しく追加されたタグ以外にも、フォームタグに新しく追加された属性も使用しました。
form要素に使う autocomplete="on" （フォームに過去に入力したデータを覚えておき表示する機能）やinput要素のrequired属性（値が必須であることを示す。空で送信した場合エラーが出る）、placeholder属性（ユーザーに対して、そのフィールドに何を入力したらよいのか気づかせるヒントを表示する）などを具体的に使いました。ほんとはinputに新しく追加されたtypeの種類の「search」を使おうと思ったのですが、type="search"にしたときのsafariの表示がうまくカスタマイズできず、諦めました。

これ以外には、DOCTYPEやheadのmeta要素の書き方を気をつけたぐらいだと思います。



CSS3はいろいろと使いましたよ。ざっとこんな感じでしょうか。
・角丸にするborder-radius
・背景画像を複数は位置するbackground
・カラムレイアウトのdisplay:box
・背景色のグラデーションbackground:gradient()
・影付き文字のtext-shadow
・影付きボックスのbox-shadow
・疑似セレクタの:nth-child(n)や:last-childなど

ボタンの表現なんかは画像をなるべく使わずに表現してみたりしました。あとbodyの背景に画像を3枚くらい重ねて表現したりしています。
デザインのpsdをよーく見るとドロップシャドウがかかっていたり、ベベル的な表現がしてあったりしていたので、なるべく見逃さずにCSSで表現したつもりです。
それからdisplay:boxでのカラムレイアウトは楽ちんでいいですね。ただし、Firefoxでboxレイアウト内のブロックがどうしてもbox-sizing:border-box;で計算されてしまっているようで、うまく解決できなかったので（もちろん-moz-box-sizing:content-boxをかけてみたのですがダメでした）、仕方なくCSSハックで対応しました（唯一の心残り）。
そういえば、sectionやheaderなどの新規追加タグはデフォルトでblockだと思っていたのですがinline的な動作もあったので、display:blockをかけないといけなかったなぁ（分かる人教えてください）。


CSSの書き方に関しては少し雑にやった部分はありますが、HTML5のマークアップに関しては一応考えて書いたつもりです。
ここおかしーよとか、まちがってるーとかあったらコメントで教えてください。
ちなみに私の動作確認環境はMacのSafari4・Firefox3.6のみです。
時間があれば、今後HTML5やCSS3について細かく書いていこうと思います。


追記：FreeとかNewとかのバッジはborder-radiusでもできるのかなぁーなんて思ったのですぐにやってみよう。

ということで、バッジもCSS3で楽々表現できたので解説

バッジもCSS3で表現できます。
←デザインの中にこんなバッジがあったと思うんですが、これもCSS３でできた。おもいついたら5分でできた。

■HTML

<p class="freeBadge">FREE!</p>

■CSS

.freeBadge {
	width: 48px;
	height: 32px;
	padding-top: 16px;
	background-color: #ffde00;
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #da0f00;
	text-shadow: 0px 1px 1px #fff;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
}

CSSの解説しますと、border-radiusで円を描くという表現をしています。
border-radiusの半径と横幅の半分の長さが同じなら円になるんですね（width:20pxならborder-radiusは10px）。
それからFREE!の文字を円のちょうど真ん中になるように調整して、text-shadowとbox-shadowで影をおとしてあげる（FREE!バッヂの場合、text-shadowは白でベベル的に！）。
最後にtransform:rotate()で傾けて完成です！　私の場合、それをマイナスmarginなどで配置しています。

いやぁ、バッヂもCSS3で楽々表現できますね。
間違いやご意見があったらコメントくださーい。よろしくお願いいたします。