日本語を記入すると文字化けした話。Comment締切後のソース公開OKらしいんで晒しておきます。応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。連休中のいい暇つぶしになりました。イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず...実質的な製作期間は4日くらい。例によってMooToolsをしこたま多用してます。完成したのはこれボタンにはCSS3のtransitionとグラデーションをフル活用してます。このプロパティ面白いんだけど手打ちは地獄を見れるぜ...!transition.cssのカオスさは必見かもしれない。一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。工程スクショChromeの神プラグインWebページショットで制作経過を撮影してみた。製作中に気づいた事など要素を均等に横並びにするdisplay:boxが意外と使えない横並びしたくないブロック要素がdisplay:boxの中にあるとそれまで横並びになってしまう。下のソースだとh1までboxの影響を受けるので&lt;section&gt;&lt;h1&gt;タイトル&lt;/h1&gt;&lt;section&gt;中身&lt;/section&gt;&lt;section&gt;中身&lt;/section&gt;&lt;section&gt;中身&lt;/section&gt;&lt;/section&gt;以下のようにdisplay:boxの為だけに要素を追加しなければならない。&lt;section&gt;&lt;h1&gt;タイトル&lt;/h1&gt;&lt;div&gt;&lt;section&gt;中身&lt;/section&gt;&lt;section&gt;中身&lt;/section&gt;&lt;section&gt;中身&lt;/section&gt;&lt;/div&gt;&lt;/section&gt;エーそんなの気持ち悪い...と思って完成ソースでは下の方にあるプラグインディレクトリ~ユーザーコミュニティのリンクを並べてる所にしか使ってない。(メニューボタンはtransition.cssに書いてあるのでwebkitだけbox使う)displayがinline以外なら問答無用で影響を受けるので、CSSだけでは回避する事が出来なかった。JavaScriptでbox用のdiv要素作るって手くらいしか浮かばないが、このh1に対する回避策がCSSだけでできたら便利なプロパティだと思う。画像だけでなくgradientも複数同時使用出来る。gradientはアニメーションが可能だ。複数指定した場合は左が一番上、右に行くほど下に重なる。url(../images/global-navi_slash.png);}transitionについてWebkitブラウザとOpera限定のプロパティtransitionではアニメーション効果がつけられる。こいつが結構曲者だった。アニメーションさせるように指定したプロパティが統一されていないと動かなくなるらしい。いうことかというと、下記検索テキストエリアCSS(抜粋)ではtransitionでbackgroundを指示しているのだが、アニメーションさせるbackgroundのimage、colorのどちらか1つでも欠けてると止まってしまう。これは:hoverと:focusにあるbackground-colorをコメントアウトしてみるとわかりやすいと思う。0.91)));}変化が少ない指定をした場合はエフェクトかかってないように見える。ナビゲーションメニューがそのいい見本で、hoverの背景色を#ffffffなどにするとモワッと変化するようになる。背景画像とpositionに変化をつけた場合には指定方向への移動アニメーションになる。これはこれで使い方次第で面白い効果になりそう。あと、ブラウザによってエフェクトのスピードが違う。レンダリング処理速度の違いなのかな?ChromeはOperaよりも早い。早すぎるからメニューボタンのtransitionが効いてないように見えてハマったのは良い思い出です。その他所感やろうと思えば何でもCSS3でやれる。素直に画像使った方が見た目がいいじゃんっていうのもある。(これはNewとFreeのバッヂをCSS3で書いて痛感した)新しいことを覚えると何でもかんでも使いたくなってしまうのが人の性だけれども、それではXHTMLを覚えたての初心者がDIVまみれになるのとそう変わらんしなにより本末転倒なので、実際にサイト作る時は取得選択して使いどころを間違わないようにするのが大事だと思った。コンテスト的には乱れ打ちしといた方がいいのかもしれないけどw途中なんどかレイアウト崩壊起こしてイチから書き直す作業を3回くらいやったんだけど、バリデーターにかけても分からなかった原因がHTML5タグのスペルミスだったっていうのにはかなり凹まされた(笑)こういう便利なものを作っている人を提出してから見つけてしまうし...もうアホかと。環境を整えてからやるんだったなー。́∀`)ノ後で見て穴の多さにかなり(ノ∀`)アチャーだったんだけどイヤッフゥー。穴が無かったら賞とってたに違いない!ので、次参加する時はもっとがんばりたい。統一したソースコードで表現出来ないことはJavaScriptで補うか潔く切り捨てる。HTML5への移行またはXHTMLへロールバックしても使いまわせるCSS。JavaScriptの管理も面倒だからファイル1枚あればいい。みたいな考え方で作った手抜き用スケルトンテンプレートがベースになってます。DesignWall.。