レポート

Web Directions East「実践 CSS3 & HTML5 with Microformats ワークショップ」レポート

この記事を読むのに必要な時間:およそ 3 分

HTML5の宣言

HTML5で書く場合は,以下の記述を行うだけです。互換モードの切り替えはありません。

リスト1 HTML5の宣言

<!DOCTYPE html>

HTMLの検証

また,HTML5を含めて,http://validator.nu/で検証できることに触れていました。

ブラウザ

HTML5をサポートしていないブラウザについても言及がありました。

Internet Explorer
HTML5のサポートはInternet Explorer 8からになります。つまり,article要素など新しい要素はInternet Explorer 7以下では無意味です。

この問題に対して,従来のバージョンのInternet ExplorerについてはJSでの実装が提案されています。html5.jsというライブラリを用いた場合,section要素やarticle要素;はdiv要素などに置き換えることで対応できます。

従来のInternet ExplorerでJSがオフに設定されている場合は,ユニバーサルセレクタを使用して回避できそうです。すべてのスタイルを全部上書きする方法がありますが,かなり複雑になるので実装には検討が必要でしょう。
Firefox2
実際にデザインが大きく崩れることはありませんが,セクションの中のh1まで読んで終わってしまうため,中のスタイルが表示されない問題があるようです。サポートも終わっているので無視できるグループと考えてよいでしょう。
Internet Explorerの問題も含めて自分のサイトの訪問ユーザーのブラウザを分析して,少数であるならばコストなどのバランスを考えて無視できるブラウザを判断するべきでしょう。

Microformats(マイクロフォーマット)

また,Microformats(マイクロフォーマット)についても言及がありました。Microformatsとは,ページ内の情報を閲覧者が持ち出して自分の使用しているソフトウェアやサービスにもっていきやすい環境を整えるのが目的です。

カレンダー情報やVcardの情報,場所の情報(ロケーション)を,HTML文書の中から見つけ出して,変換してくれるサイトへ送ることで1クリックでicsやVcardをダウンロードさせることができます。

Firefoxのアドオンt>
Operatorを使用すればMicroformatsの情報をツールバーに表示してくれます。
Internet Explorerでの拡張
Oomph。ツールバーではなくサイトの中で表示するタイプのツール。

そして,⁠ページの中にある情報をコピー&ペーストさせるのではなく,自分の使用しているツールへの移行をスムーズにするためにMicroformatsを便利に使ったほうがよい」ことが語られました。

hCardやhCalendarの仕様はすでにある仕様の中から名前をとった名前をそのままクラス名にしています。こうしておくことで検索エンジンもクロールの際に情報を抽出しやすくなります日本語のチートシートも参照してみてください⁠⁠。

なお,記述したマイクロフォーマットがちゃんと検出されるかどうかの確認はOptimusという,マイクロフォーマットのバリデーションで確認できます。

CSS3の独自拡張について

CSSの話では,まずブラウザごとのCSS3の実装について説明がありました。

現在,CSS3の機能は各ブラウザが独自に実装しているため,プレフィックス(-moz-,-webkit-)をつけて実装していきます。

Firefox 3-moz-*
Safari 3-webkit-*
Internet Explorer 8-ms-*
Opera-o-*

上記の表の「*」の部分にはプロパティ名が入ります。なぜこのようなプレフィックスが必要かというと,仕様として完全に固まっていない要素であるということ,そしてブラウザ側でバグがあるかもしれないがベータとして実装している場合がある,この2つが理由としてあげられます。

レイアウト

HTML5の書き方やCSS3の書き方の説明後,レイアウトの説明が行われました。

ブラウザリセット

Internet Explorerの問題がありますが,テストしきれていないベータのブラウザなどもあり,一概にデフォルトセッティングが今後も仕様が変更されない保証はありません。

このreset.cssを使用するのは非常に有効です。

カラム落ちの原因

フロートを使用してカラム落ちしてしまう原因は,各ブラウザのボックスモデルの違いによるものです。たとえば,%などで横幅の指定をしてもwidthの計算方法がブラウザごとに違います。

特にInternet Explorerの場合はborderの分,widthが100%以上になり,カラム落ちしてしまうケースが多いと思います。CSS3ではこれを防ぐ方法があります。

ボックスモデルの指定

CSS3ではbox-sizingを使用することでボックスモデルの指定ができるようになります。要素に対して width + border が実際の横幅ということを定義します。これにより,Internet Explorer 6,Internet Explorer 7ではこのスタイルが適応されないとはいえ,ほかのブラウザの挙動がInternet Explorer 6,Internet Explorer 7と同じになり,結果,すべてのブラウザで見た目が同じになるというメリットが発生します。

著者プロフィール

村田憲嗣(むらたけんじ)

株式会社ロクナナ所属。Webディベロッパー・プログラマー。

XHTML+CSS+JSといった,クライアントサイドの開発はもちろん,PHPをはじめとした動的なページ生成・DB設計を伴うシステム構築、運用に従事。また,Flash/ActionScript3コンテンツやSilverlightコンテンツの設計・開発なども行っている,Web系なんでも屋さん。