第2回コーディングコンテストの反省

コーディングコンテストが行われたCSS Nite LP, Disk 9「Coder's Higher」の再演版であるCSS Nite LP, Disk 9.2(reprise)が開催されるそうなので、遅ればせながら、第2回コーディングコンテストの反省と応募作の修正をしました。

修正版のzipファイルを用意したので、興味がある方はダウンロードしてください。
2010codingcontest-reprise.zip

で、出来上がった修正版のページがこちら。
2010codingcontest-reprise/index.html

一応、実際に応募したページのリンクも用意しときます。
2010codingcontest/index.html

HTMLファイルの修正点

  • 「ほぼ全ての要素(タグ)が特定できるように」と、がんばってidとclassを指定したんですが、ばっさり削除!
  • header要素、hgroup要素、figure要素がほとんど使われてなかったので、きちんとマークアップ!
  • a要素の子要素にブロックレベル要素が配置できることを忘れてたので、そこも適切に修正!
  • その他に「やっぱりこの要素でマークアップするべきだったな」と思った部分を修正!

修正したポイントはこんな感じです。もうホントにソースがすっきりしました。

ちょっと言い訳をすると、応募作でidとclassをわざわざ指定していたのは、どんなメディアでも要素が特定できるようにするためだったんですが、印刷用の簡易スタイル(もう適当に作ったやつ)を使い回したので、結局は必要なくなったんですよね。

CSSファイルの修正点

まず、CSS3で使えるプロパティについて完全に勉強不足だったと反省。

  • text-shadowプロパティやbox-shadowプロパティにも透明度(rgba)が使えることを知らなかった!
  • border-radiusプロパティにもborder-top-left-radiusのような部分指定ができるとは知らなかった!
  • transformプロパティで要素を傾けたり反転させたりできることを知らなかった!

これらを知らなかったが為に、画像を使って再現していた部分が多かったので、使用する画像の数が大幅に削減できました。

全体的なこと

コーディングで常に気をつけているのは、まず、情報(コンテンツ)を最適な順序で適切にマークアップすること。具体的に言うと、

  1. ページ固有のメインとなる情報 - article & section
  2. 本文に関連するローカルな情報 - nav (ローカル) & aside (ローカル) & section
  3. サイト全体のグローバルな情報 - nav (グローバル) & aside (グローバル) & section

といった順番で構造化するということです。そして、もう一つはコンテンツとしての画像とデザインとしての画像をきちんと区別するということです。

今回のデザインであれば、ヘッダーにある「Movable Type.jp ドキュメント・プラグイン」のリンクや「サイト内検索」の検索フォームは「グローバルな情報」にあたる部分で、ヘッダーになくてもいいと判断したので、フッターに配置しています。

<footer id="contentinfo">
  <form action="./" id="search">
    <p>
      <input type="text" value="サイト内検索" onfocus="if(value == 'サイト内検索'){value = ''}" onblur="if(value == ''){value = 'サイト内検索'}">
      <button type="submit">検索</button>
    </p>
  </form>
  <p id="movable-type-jp"><a href="http://www.movabletype.jp/index.html">Movable Type.jp ドキュメント・プラグイン</a></p>
  <figure id="six-apart">
    <img src="./images/logo_six_apart.gif" alt="シックス・アパートのロゴマーク">
    <figcaption>シックス・アパートは、<a href="http://www.sixapart.jp/movabletype/">Movable Type</a> と <a href="http://www.sixapart.jp/typepad/">TypePad</a> 、<a href="http://www.sixapart.jp/vox/">Vox</a> の提供をおこなうブログ専業のメーカーです。</figcaption>
  </figure>
  <p id="copyright"><small>Copyright 2003-2010 Six Apart, Ltd. All rights reserved.</small></p>
<!--#contentinfo--></footer>

また、「Movable Type.jp ドキュメント・プラグイン」や検索ボタンの部分はコンテンツとしての画像ではないと判断したので、画像置換によってデザインを再現しています。

こうしたことを徹底することによって、一つのデザインに依存しない文書構造となり、「第2回コーディングコンテストで入賞しました!」で説明した、CSS3 Media Queries によるメディアごとのデザインが可能になるんです。

今回の修正で、応募作の良くなかった部分は改善できたと思うので、まぁ、良しとしましょ!