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

5月16日（土⁠）⁠、恵比寿スバルビル会議室にてWeb Directions Eastの「実践 CSS3 & HTML5 with Microformats ワークショップ」が開催されました。本稿では、当日の模様をお届けします。

スピーカーは、本ワークショップの事前レポートにも掲載した、John Allsopp（ジョン・アルソップ）氏。

翻訳は長谷川恭久氏、Oli Studholme（オリ・スタッドホルム）氏が担当しました。

「異なるブラウザでしっかりとした見た目を保ちつつ、最新のテクノロジーを使うテクニックを実践する」という概要のワークショップでしたが、参加者からは節目節目に技術的な質問だけでなくジョン氏の考え方に対する質問も多く上がり、非常にインタラクティブな内容のワークショップとなりました。

テキストを解析してまとめる

ページを作成する際に、ジョン氏はまず、プレーンなテキスト文章をベースにどこが何にあたるのかを解析し、それをひとつひとつの情報の塊にしていく作業から行います。ジョン氏曰く、「⁠サイトの構造化はレゴブロックを組み立てるようなもの」とのことです。

そしてその情報の塊に対して名前をつけていきます。ここではマークアップの前に一般的な名前をつけてもいいでしょう。お問合せなどありがちなコンテンツだけではなく、そのサイトオリジナルの情報にもきちんと名前をつけていきます。ここで重要なのは「テキストの情報をそれぞれにグループ分けする作業に集中すること」だと述べていました。

実際にみなさんが行っている仕事では、すでにデザインがあってそれに対してマークアップを行うというのが通常のプロセスではないでしょうか。

これに対してジョン氏は、「⁠デザインからマークアップを考えるのではなく、コンテンツからマークアップを考えてそれに対して装飾を行うというプロセスがよいのではないか」と提案しました。

実際にこういったプロセスの方が、コンテンツのために見に来る利用者のためになると考えており、このプロセスがジョン氏の理想であるとのことです。

実際にマークアップする

こうして整理されたテキスト（情報の塊）を、HTMLとして書き直していきます。その際、以下の2点が重要であることを示しました。

ピュアなHTMLのタグを使う。
それ以外で表現できないものに関してはMicroformatsなどのパターン化されているものを使用する。

クラス名については、先ほど解析した際につけた名前をそのまま使用するパターンが多いそうです。この時点では、すべてに対してマークアップをするわけではなく、細かい部分に関しては別にしておおまかにブロックを組みます。

HTMLとはコンテンツの意味を示すためのものです。そのため、「⁠まずは見た目のことを気にせずに書いてみましょう」ということも語っていました。

HTML5の代表的なタグ

続けて、HTML5の代表的なタグが解説されました。なお、以下で紹介するタグは仕様として完全に固まったものではありませんので正式な勧告時には仕様や意味付けが変更になる可能性があります。

header要素

通常ロゴやタイトルが含まれる。
header要素には、かならずh1要素などの見出し要素をいれなければならない。
header要素には、header要素、section、footer要素などを入れることができない。

footer要素

利用規約や著作権情報（コピーライト）が含まれる。
footer要素には、footer要素は入れてはいけない。

section要素

一番よく使用されると思われるタグ。ひとつのグループ、ひとつのテーマで括った情報をsection要素で囲む。その際に、考慮したいことは「そのsection要素が何のテーマかを分かりやすくするためにセクション開始後、h2要素などの見出し要素を入れる（h1要素にしなければならないわけではない⁠）⁠」とのこと。

article要素

ブロックのように独立した記事をグループ分けしたいとき使用する。
section要素との違いは、以下のとおり。
- section要素：単純な情報のグループとして分ける。
- article要素：その部分の情報だけが独立しても意味を持っているものに対して適用する。
「ひとつの情報として抜き出しても情報として成立する場合はarticle要素を利用する」ことが仕様となっているため、捕らえ方や感覚は人によって違うという問題が起きている。section要素とarticle要素は情報をグループとして分けるということでは同じだが意味が異なってくる。
※ジョン氏は「検索エンジンがインデックスするページの中で情報を抜き出す際に独立した情報なのか、それともただの構造としてのタグなのかを判断するのに適切なのではないか」と考えているそうです。全部section要素をarticle要素にしても問題はありませんが、article要素は、そのページでどの部分が重要かを表すタグになります。つまり、以下のように考えればよいのではないでしょうか。
- 情報としてarticle要素　＝　セマンテックな意味がある
- 構造としてsection要素　＝　セマンテックな意味がない（従来のdiv要素と同じ）

nav要素

ページ内のナビゲーションを示す。
もし特殊なブラウザがnav要素の中身を解析して特殊なナビゲーションとして別の見せ方を行うことができるようになれば、アクセシビリティとして有効になる。
また、検索エンジンがインデックスする際にnav要素からサイトの構造を解析することもありえる。

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と同じになり、結果、すべてのブラウザで見た目が同じになるというメリットが発生します。

プログレッシブ・エンハンスメント

事前レポートでも少し触れましたが、今回のワークショップの申し込みページはブラウザに応じてサイトの表現が多少異なっています。

「申し込み」ボタンが角丸になっていたり、「⁠申し込み」ボタンにドロップシャドウが適応されていたり、タイトルはフォントをダウンロードして表示していたり、写真をトランスフォームして回転させていたりしています。これらは、すべてCSSで再現されています（Opera 10、safari 3、Firefox 3などのモダンブラウザでそれぞれ確認してみてください⁠）⁠。

この「キチンと申し込みができる」というコンセプトが守られてさえいれば、ブラウザによって違う見た目になることはダメということではなく、そのブラウザで閲覧した場合のベストな見せ方で実装すればよいのです。

このような実装（の考え方）をプログレッシブ・エンハンスメントといいます。「⁠デザイナーの仕事としてプログレッシブ・エンハンスメントをクライアントにアプローチするには“⁠最先端を実装します⁠”と、提案できるのではないでしょうか。そして早期実装することにより、長期的なコストが下がるのではないでしょうか」というのがジョン氏の考え方です。

申し込みページのようにグラデーションやボタンのロールオーバー時のエフェクトなど、あくまで「味付け程度が違うだけ」です。カラム落ちしたり、コンテンツのテキスト情報が見れないなどそのページのコンセプトが達成されないというのは、プログレッシンブ・エンハンスメントの考え方ではありません。

ジョン氏からは、以下の問いとサイトの紹介がありました。

「すべてのウェブサイトがすべて同じである必要はあるか？」
（⁠Do websites need to look exactly the same in every browser?）

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

この答えの理由として、「⁠ページの訪問者（利用者）は1つのものしか見ない（ブラウザ間の違いに気付かない⁠）⁠」と「効率化」ということがあります。

ジョン氏が一番効率がよいと考えているのはCSSとHTMLでプロトタイプを作成してそれを見せることだそうです。仮にPhotoshopからページデザインのカンプを作成するとします。デザイナーに発生する作業として、最終的なプロダクトを静止画で再現しなければなりません。

もちろんクライアントに対してビジュアルとしてイメージがあったほうが一番わかりやすいのですが、最終的に完成したサイトは情報が整理されていない、当初のページのコンセプトとは異なるものができあがるのではないでしょうか。これは「ビジュアルをふくめての最終のプロダクトに見えるもの」を急あつらえで作成しているにすぎません。

その静止画を作成するためにデザイナーがリソースを使いすぎて、肝心のIA（インフォメーション・アーキテクチャ）やコンテンツの内容に目がいかなくなってしまっているのではないでしょうか。

CSS3での表現方法の例

CSS3で追加された特殊な表現方法の一部を見ていきましょう。（⁠記載しているHTML・CSSは解説用に新たに書き起こしたものです⁠）⁠。

boder-radius

申し込みページでは右上にある、「⁠申し込み」ボタンに適応されている角丸の表現です。

CSS3ではこういった角丸の表現もboder-radiusを利用するだけで可能になります。

box-shadow

同じく、「⁠申し込み」ボタンのシャドウで利用されているのがbox-shadowです。影を付けるボックスからの距離、ぼかし、色を指定します。現在、webkit（Safariなど）では複数の影を指定することができます。

特殊なセレクタ

よい見た目をつくるためにマークアップを変えるのはよくありません。以下のような特殊なセレクタを使用することが重要であると説明されました。

first-child

親要素の最初の子要素を指定します。以下の例ではul要素を指定していますが、この場合、HTMLでul要素の親要素を参照してその最初のul要素に対してのみ適用されます。

リスト2　first-childの例

ul:first-child {
  background-color: #ff0;
}

first-of-type

上記のfirst-childに加えてCSS3からはfirst-of-typeが追加されました。指定した子要素から見て最初に出現する要素に適用されます。

リスト3　first-of-typeの例

p:first-of-type {
  background-color: #ff0;
}

first-childとfirst-of-typeの違いは、first-childは親要素の中で一番最初の子要素があった場合のみに適用されるのですが、first-of-typeは指定した要素がある親要素内ではじめて出てきた要素に適用されます。

first-childとfirst-of-typeが親要素の一番最初に（はじめに）出てきた要素に適用されますが、逆に一番最後の要素に対して適用されるlast-child、last-of-typeがあります。

nth-child

nth-childは、指定したX番目の子要素を指定します。また、変数としてのnを利用することで、特定の順番で出てくる子要素に対して適用できます。

first-childと同じく、nth-childに加えてnth-of-typeというクラスも存在します。

リスト4　nth-childの例

tr:nth-child(3n+1) {
  background-color: #0ff;
}

タイポグラフィ

申し込みページの「実践 CSS3 & HTML5 with Microformats ワークショップ」のタイトル部分は、フォントをダウンロードさせて表示させています。

日本語フォントの場合はライセンスの問題がありますが、http://mplus-fonts.sourceforge.jp/などで配布されているフォントなどを使用する方法もあります。

ダウンロードさせるフォントの容量の問題もありますが、ページで使うフォントだけ選択して再圧縮することも可能です。まずはタイトルだけなど、部分的に表示させる実装がよいのではないでしょうか。

まとめ

このほか、会場ではジョン氏によるサイトのナビゲーションをロールオーバーを含めてCSSだけで再現というデモンストレーションが行われました。

会場は終始和やかなムードでしたが、質疑応答では参加者の方が自分で作成したHTML5のコードをジョン氏にチェックしてもらうなど、非常にインタラクティブな内容のワークショップでした。

CSS3、HTML5の仕様としてはまだ確定ではないものの、現時点で実装できる部分もありますし、1年後、2年後に苦労するのではなく、今から少しずついろいろ実験してみる価値はあるのではないでしょうか。

こういった様々な表現を行うにはクリーンでシンプルでなおかつセマンテックなマークアップが重要になってきます。

情報を分析し、分かりやすくHTMLに集約させて機械（検索エンジンのクローラや外部のスクリプトなど）が読めるマークアップを行うことで、現在のXMLのように情報を構造化することが可能になるHTML5と、レイアウトやスタイル・装飾をよりシンプルに美しく、そしてコストをかけずに実装できるCSS3が多くのブラウザでスタンダードになるのを楽しみにしつつ、今回のレポートを終えたいと思います。