第2回コーディングコンテストに応募しました

HTML5 CSS3

CSS Nite LP9 連動 第2回コーディングコンテストちょっと前の話なのですが、CSS Nite LP9の連動企画「第2回コーディングコンテスト」に応募しました。（既に応募は締切られています）
去年に案件としてHTML5とCSS3で作ったことはあったのですが、一般公開するサイトでしたのでIE6などの後方互換を考慮する必要があり、新機能をふんだんに使った構築！というわけにはいきませんでした。ですが、今回はターゲットブラウザがSafari4とFirefox3.6と限定されたものだったので、アドバンスな仕様をフルに盛り込めると思い、腕試しもかねて応募してみました。
課題内容などの詳細は第2回コーディングコンテストの公式サイトを参照してください。

作っていて気付いたこと

今までは画像で切り出していた視覚効果をドロップシャドウやグラデーションなどのプロパティでロジカルに組み立てる必要があります。複雑に入り組んだPhotoshopレイヤーのエフェクトを数字で拾っていかないといけないので、マークアップエンジニアやコーダーといえどもPhotoshopのオペレーションに慣れていないと却って時間がかかってしまいます。また、Fireworks派の方もPSDでカンプがくるとメイクデータに合わせてPhotoshopを使わないとCSS3のアドバンスは活かすことができないように思います（逆も同じ）。レイヤーが統合されていた場合も、モノによってはグラフィックデザイナーの方にレイヤーが保持された状態のデータをもらわないといけないかもしれません。

Photoshopでグラフィックを作り込むデザイナーの方も、マークアップ＆スタイリング行程をスムーズに進めるため、レイヤー構造は分かりやすく、ノイズレイヤーを排除してカンプを完成させる必要があるようです。（デキるデザイナーの方にとってはもはや常識なのかもしれませんが）

HTML5について

正直いってフロントエンドにそれほどインパクトはないような気がします。恐れる必要はありません。セマンティク要素やアウトラインロジックなど、新しく気をつけるべきものはありますが、今のところ、クセあって悩ましげなものはないように思えます。（といいつつも私の作品は抜けていたところがあったのですが・・・）

CSS3について

ドロップシャドウ・角丸・グラデーション・複数の背景画像・ボックスディスプレイなどなど、新しくできることがたくさんあります。Photoshopとにらめっこする時間が増えてしまいますが、これも慣れの問題のような気がします。基本的なテクニックについては既にネットに情報がたくさんあるのでそちらを参考にしていただいたほうがよいかと思いますので、ここでは私が作っていて発見だったポイントを以下にあげます。

  • 複数背景は最初に指定したほうがレイヤーが上
  • -moz-box-shadowは複数指定できる。また、"inset"指定で内側につけることもできる。（-webkit-box-shadowでは無理っぽい）

例）外側に3pxのグローと内側に5pxのインナーシャドウをつける

-moz-box-shadow:0 0 3px rgba(109,195,212,0.58),inset 0 0 5px rgba(0,0,0,0.43);

shadow boxing with -moz-box-shadow | fredericiana

  • グラデーション（gradient）で背景色を指定すると、背景画像が置けなくなる（同じ要素内でグラデーションの上にアイコンを置くことができない。別要素でラップして、セレクタを分ける必要がある）

他の参加者の作品

こちらでアグリゲートされています。

第2回コーディングコンテストが締め切りになりました＋ソースコードやメモを公開いただいたブログのご紹介

締め切り後は公開OKとのことで、ソース一式をさらしている方も。すばらしい作品が多く、自分のコードがゴミのように思えてしまいましたｗ

  • :before :after などの疑似セレクタを使えば無駄なdivなどがもっと減る。文書構造とデザインのdivineが加速する
  • 高さの違うマルチカラムの高さをそろえるには display:box がベストソリューション（私は気付かずdisplay:table-cell とか使ってました・・・）
  • time要素を使って日時をマークアップ
  • HTML5からはa要素でブロック要素をラップしてもOK

参加された方のソースやブログエントリは、HTML5とCSS3のノウハウがたくさん詰まっています！これだけでもこのコンテストが行われた意味は見いだせるのではないかと思います。

このコンテストの結果は4月17日のCSS Nite LP, Disk 9「Coder's Higher」で発表されるようです。こちらには参加しないのですが、どんな作品が出てくるのか、発表が楽しみです。