無料の面白動画・画像・ゲームの特集ブログ｜ふらぶろ

CSS Nite LP9というWeb制作関連のセミナーイベントと連動して行われた「第2回コーディングコンテスト」で優秀賞をいただきました！

応募作品はこちら ≫ ウェブサイト管理の新標準。 Movable Type 5

以下、気になったところ、苦労したところ、僕の作品の変わってるところなどページの上のほうから適当に。(※見難かったので書き方を変えてみました)

対象外ブラウザへの対応

情報が正しく伝わればOKとのことだったので、html5.jsでHTML5に対応していないブラウザでも新要素を要素と解釈してくれるようにした上で、IE7以前ではCSSを読み込まないようにしました。IE8、Opera、Chromeは割と普通に見れたので特に対策はしませんでした。

Safari4がbox-shadowのinsetに未対応

少なくとも僕の環境(WindowsXP)のSafari4最新版では、box-shadowのinsetが未対応だったので、box-shadowのinsetを使えばすんなりいけそうなところでも、別の方法でデザインを再現しました。
←こういうところ

ページ上部の太線

border-topとbox-shadow:inset、header::beforeのbackground-colorとbox-shadow:outsetなどを使っている方が多かったようですが、前者はSafari4に対応できないため、後者はbox-shadowの両端が丸くなってしまうため(余分に幅を取ってoverflowで消すというやり方も考えましたがソースが汚くなるため)、header::beforeのbackground-imageに半透明のグラデーションを指定することでデザインを再現しました。

bodyセクションに対するheader

HTML5.jpの「見出しとセクション」の「見出しとサイト全体の見出しを区別する」という項目の「ページがサイト全体に共通する見出しでスタートする場合」を参考にしました。サイト内検索はサイト全体に対するナビゲーションであるのに対し、ページ内リンクはそのページ内でのナビゲーションであるため、bodyセクションに対するheader要素の中にページ内リンクは含めまずに、「ウェブサイト管理の新標準。」を見出しとするarticleセクションに含めました。

サイト内検索のテキストボックスとボタン

いろいろ悩んだのですが、グラデーションや影だけでなくレイヤーの合成モードまで違っていたりなどとても複雑になっていたので、画像で再現することにしました。CSS3でできないところだけ画像にした場合と、完全に画像で再現した場合と2パターン作ってみたのですが、画像の容量も対して変わらずメンテナンス性も高いことから完全に画像で再現したほうにしました。ちなみに、テキストボックスのほうではborder-imageを使ってこちらの画像を縦横に引き伸ばしています。

サイト内検索のinput内に表示されるテキスト

placeholder属性を使いたかったのですが、実際に「サイト内検索」と表示してくれたのはSafari4だけで、しかも余計な×印が入っていてデザインを再現できなかったので、今までどおりにvalue属性に「サイト内検索」と入れ、onfocusでvalue属性を空にするように組みました。

ページ内リンクのクリック時にできる内側の影

サイト内検索のテキストボックスと同様に、border-imageで丸い影の画像を縦横に引き伸ばしています。影の下地が青いグラデーションになっていたので、丸い影は半透明になっています。

拡大リンク付きの画像

本文から参照されるべき画像と判断し、figure要素でそれぞれマークアップしました。「～画面（キャプチャ）を拡大する」というテキストはリンク先の説明と判断し、title属性に入れてimg::afterで表示しました。

レンジと矢印の付いたリンク

各セクションに対する関連ドキュメントへのリンクということで、footer要素でマークアップしました。

「Movable Type 5 の新機能」や「ビジネスブログ導入事例」に出てくるキャプチャ

クリックできるようにしようか迷ったのですが、位置的にも「画像を拡大するリンク」と紛らわしいのでクリックできないようにしました。本文から参照されるべき画像ということで、figure要素でマークアップしました。そう考えると、例えば「テーマ機能」のキャプチャは「テーマ機能」という見出しのセクション内にあるべきなので、HTML上では見出し→本文→キャプチャ画像にし、表示されたときにはキャプチャ画像→見出し→本文になるように、paddingとposition:absoluteの併用で無理やりキャプチャ画像を上にずらしました。

hgroupの使いどころ

あくまでhのgroupなので、h*要素が単独の場合には使用せず、「ライセンスについて」の「Movable Type 5」「ビジネス向け」のように複数のhn要素でタイトル－サブタイトルのようなものを作るときのみに使用しました。

お知らせの一覧

お知らせは日時という順番のあるリストなのでolでマークアップし、その中に「いつ」の「お知らせ」なのかをそれぞれdt、ddとした定義リストを入れました。

お知らせの重要マーク

重要なのは重要マークではなくお知らせ内容自体なので、重要マークをstrong要素でマークアップするのではなく、お知らせ内容自体をstrong要素でマークアップした上で、視覚的に分かりやすくするための装飾としてstrong::before{content:”重要”;}のように重要マークをつけました。

お知らせのシックス・アパートマーク、ProNetマーク

「いつ」の「お知らせ」なのかに対して、「どこ」からの「お知らせ」なのかという対応関係になるので、同様に「どこ」をdtとしました。(参考：dl要素 – コンテンツのグループ化 – HTML5.jp)

ページ下部、同じ高さのブロックが横に4つ並ぶ部分

このページに対する関連ドキュメントという位置づけでfooter要素でマークアップしようとも考えたのですが、footer要素にはsectionを含められないという仕様に躓き、footer要素の中に定義リストを入れることも考えたのですが、その部分までの流れ(「ビジネスブログ導入事例」「関連製品・ソリューション」などを見出しとしたsection)に沿って、「プラグインディレクトリ」「Movable Type ドキュメント」などを見出しとしたsectionとし、4つのsectionを1つのsectionの中に入れるようにマークアップしました。

ページ下部「Movable Type 関連情報」

この部分はヘッダー部分と同様に「サイト内の全てのページに存在するフッター」と判断し、asideやsectionではなく、footerに含めました。同様に、footerの中にはsectionを入れられない(=見出しも使えない)ため、定義リストを入れ子にしてマークアップしました。

以上、主催者・審査員の皆さん、どうもありがとうございました。