[HTML5+CSS3]　第二回コーディングコンテスト　に参加してました

締切後のソース公開OKらしいんで晒しておきます。

応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。
連休中のいい暇つぶしになりました。
イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は４日くらい。
例によってMooToolsをしこたま多用してます。

完成したのはこれ

ボタンにはCSS3のtransitionとグラデーションをフル活用してます。
このプロパティ面白いんだけど手打ちは地獄を見れるぜ…！
transition.cssのカオスさは必見かもしれない。

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。

工程スクショ

Chromeの神プラグインWebページショットで制作経過を撮影してみた。

製作中に気づいた事など

要素を均等に横並びにするdisplay:boxが意外と使えない

横並びしたくないブロック要素がdisplay:boxの中にあるとそれまで横並びになってしまう。
つまり下のソースだとh1までboxの影響を受けるので

<section>
	<h1>タイトル</h1>
	<section>中身</section>
	<section>中身</section>
	<section>中身</section>
</section>

以下のようにdisplay:boxの為だけに要素を追加しなければならない。

<section>
	<h1>タイトル</h1>
	<div>
		<section>中身</section>
		<section>中身</section>
		<section>中身</section>
	</div>
</section>

エーそんなの気持ち悪い…と思って完成ソースでは下の方にあるプラグインディレクトリ～ユーザーコミュニティのリンクを並べてる所にしか使ってない。
（メニューボタンはtransition.cssに書いてあるのでwebkitだけbox使う）
displayがinline以外なら問答無用で影響を受けるので、CSSだけでは回避する事が出来なかった。
JavaScriptでbox用のdiv要素作るって手くらいしか浮かばないが、
このh1に対する回避策がCSSだけでできたら便利なプロパティだと思う。

backgorund-imageの複数指定

画像だけでなくgradientも複数同時使用出来る。gradientはアニメーションが可能だ。
複数指定した場合は左が一番上、右に行くほど下に重なる。

:root {
	background-color:#dbe6ec;
	background-image:url(../images/bg_gradation.png), url(../images/bg_html.png);
	background-repeat:repeat-x, repeat;
	background-position:left top, left top;
}

#masthead #global-navi a {
	background-image:linear-gradient(top,
	                 rgba(84, 134, 167, 0.68),
	                 rgba(44, 64, 77, 0.34)),
	 		 url(../images/global-navi_slash.png);
	
	background-image:-moz-linear-gradient(top,
	                 rgba(84, 134, 167, 0.68),
	                 rgba(44, 64, 77, 0.34)),
	 		 url(../images/global-navi_slash.png);
	
	background-image:-webkit-gradient(linear, left top, left bottom,
	                 from(rgba(84, 134, 167, 0.68)),
	                 to( rgba(44, 64, 77, 0.34))),
	 		 url(../images/global-navi_slash.png);
	
}

transitionについて

WebkitブラウザとOpera限定のプロパティtransitionではアニメーション効果がつけられる。

	transition        : background 0.5s;
	-webkit-transition: background 0.5s; 
	-o-transition     : background 0.5s;

こいつが結構曲者だった。

まず、アニメーションさせるように指定したプロパティが統一されていないと動かなくなるらしい。
どういうことかというと、下記検索テキストエリアCSS（抜粋）ではtransitionでbackgroundを指示しているのだが、
アニメーションさせるbackgroundのimage、colorのどちらか１つでも欠けてると止まってしまう。
これは:hoverと:focusにあるbackground-colorをコメントアウトしてみるとわかりやすいと思う。

#masthead #search input[type=text] {
	
	background-color:#16272a;

	background-image:linear-gradient(top,
	                 rgba(255, 255, 255, 0.72),
	                 rgba(255, 255, 255, 0.81));
	
	background-image:-moz-linear-gradient(top,
	                 rgba(255, 255, 255, 0.72),
	                 rgba(255, 255, 255, 0.81));
	
	background-image:-webkit-gradient(linear, left top, left bottom,
	                 from(rgba(255, 255, 255, 0.72)),
	                 to(rgba(255, 255, 255, 0.81)));
	
	border:1px solid rgba(255, 255, 255, 0.81);
	
	transition        : background 0.5s;
	-webkit-transition: background 0.5s; 
	-o-transition     : background 0.5s; 
}

#masthead #search input[type=text]:hover,
#masthead #search input[type=text]:focus{
	background-color:#8eb3ba;
	background-image:linear-gradient(top,
	                 rgba(255, 255, 255, 0.82),
	                 rgba(255, 255, 255, 0.91));
	
	background-image:-moz-linear-gradient(top,
	                 rgba(255, 255, 255, 0.82),
	                 rgba(255, 255, 255, 0.91));
	
	background-image:-webkit-gradient(linear, left top, left bottom,
	                 from(rgba(255, 255, 255, 0.82)),
	                 to(rgba(255, 255, 255, 0.91)));
}

変化が少ない指定をした場合はエフェクトかかってないように見える。
ナビゲーションメニューがそのいい見本で、hoverの背景色を#ffffffなどにするとモワッと変化するようになる。

背景画像とpositionに変化をつけた場合には指定方向への移動アニメーションになる。
これはこれで使い方次第で面白い効果になりそう。

あと、ブラウザによってエフェクトのスピードが違う。レンダリング処理速度の違いなのかな？ChromeはOperaよりも早い。
早すぎるからメニューボタンのtransitionが効いてないように見えてハマったのは良い思い出です。

その他所感

やろうと思えば何でもCSS3でやれる。でも上で書いたdisplay:boxなんかがそうだけど、
CSSを使うために本来必要のないソースを追加しなければならないっていうのもあるし、
素直に画像使った方が見た目がいいじゃんっていうのもある。（これはNewとFreeのバッヂをCSS3で書いて痛感した）
新しいことを覚えると何でもかんでも使いたくなってしまうのが人の性だけれども、
それではXHTMLを覚えたての初心者がDIVまみれになるのとそう変わらんし
なにより本末転倒なので、実際にサイト作る時は取得選択して使いどころを間違わないようにするのが大事だと思った。
コンテスト的には乱れ打ちしといた方がいいのかもしれないけどｗ

途中なんどかレイアウト崩壊起こしてイチから書き直す作業を３回くらいやったんだけど、
バリデーターにかけても分からなかった原因がHTML5タグのスペルミスだったっていうのにはかなり凹まされた(笑)
こういう便利なものを作っている人を提出してから見つけてしまうし…もうアホかと。もうちょっと環境を整えてからやるんだったなー。

その後発見した穴色々

「ライセンスについて」の高さ揃え忘れ
Movable Type 関連情報の文字色が白くない
検索ボックスラベルのz-index指定忘れ
Chromeのナビゲーションのフォントサイズ指定忘れ
アイコンの尻切れ
フッターの.aboutのposition親指定忘れ
contentプロパティでurlが使えた

結果

入賞してたヽ（´∀｀）ノ

後で見て穴の多さにかなり(ﾉ∀`)ｱﾁｬｰだったんだけどイヤッフゥー。
穴が無かったら賞とってたに違いない！ので、次参加する時はもっとがんばりたい。

仕様

面倒臭がりな自分のため、

統一したソースコードで表現出来ないことはJavaScriptで補うか潔く切り捨てる。
HTML5への移行またはXHTMLへロールバックしても使いまわせるCSS。
JavaScriptの管理も面倒だからファイル１枚あればいい。
説明書が書ける。

みたいな考え方で作った手抜き用スケルトンテンプレートがベースになってます。