レポート

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

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

特殊なセレクタ

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

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 ワークショップ」のタイトル部分は,フォントをダウンロードさせて表示させています。

写真7 フォントをダウンロードさせるための指定の方法を解説

写真7 フォントをダウンロードさせるための指定の方法を解説

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

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

まとめ

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

写真9 サイトのナビゲーションをCSSで再現

写真9 サイトのナビゲーションをCSSで再現

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

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

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

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

著者プロフィール

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

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

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