『実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載の第6回目です。第5回に引き続き、福島英児が担当させていただきます。

『実践Web Standards Design』では、先行実装されているCSS3のセレクタについてもいくつか取り上げています（巻末の「Appendix.4 CSS3 で新たに定義されるセレクタ」など⁠）⁠。

「先行実装しているブラウザでなければ、閲覧者は情報を得ることができない」という場合はもちろん使用を控えるべきですが、「⁠先行実装していないブラウザでも閲覧者は充分に情報を得ることができるが、先行実装しているブラウザであればよりリッチなインターフェースを提供できる」という場合は積極的に用いても良いでしょう。

そこで、最終回となる今回は、CSS3セレクタである:target擬似クラスの使用例を、サンプルを使ってご紹介します。

CSS3の:target擬似クラスとは

:target擬似クラスは、フラグメント参照によって参照された要素を選択の対象とします。フラグメント参照とは、リンクアンカーに#から始まるid属性を付与して、文書の特定部分を参照することです。

例えば、ページ内リンクでリンクアンカーをクリックすることで、同じページ内の対象となる部分へジャンプする、というものを目にしたことがあるかと思います。

ここから分かるように、:target擬似クラスは、ユーザーによってフラグメント参照されているリンクをクリック（対象要素を参照）したときに初めて適用される、動的なセレクタです。

IEはこの:target擬似クラスに未対応で、MSDNで確認する限りバージョン8でも対応予定は無いようです。

• CSS の互換性と Internet Explorer

:target擬似クラスを利用したYellow Fade Technique

変更箇所を動的にハイライト表現するユーザーインターフェースとして「The Yellow Fade Technique」が有名ですが、フラグメント参照した際にもフェードするハイライト効果を与えると閲覧者にとって分かりやすいかもしれません。

:target {
  background: url(img/fade.gif) 0 0 repeat;
}

:target擬似クラスで対象要素の背景画像にアニメーションgifを配置させることで、参照された際にハイライトが徐々にフェードアウトする仕組みです。

ただ、OperaやSafariなどは最初の一回目のみ正常に動作するのですが、いったん背景画像が読み込まれてしまうと、それ以降はページを再読み込みしないと動作しないようです。

Firefoxでユーザースタイルシートとして指定しておくと便利かもしれません。

:target擬似クラスの応用

:target擬似クラスを応用してタブ型メニューを表現することも可能です。必要な情報のみを表示させることで表示スペースをコンパクトにできます。

li {
  float: left; /* リストを横並びに */
  list-style: none;
  text-align: center;
}

li a {
  width: 220px;
  display: block; /* リストのリンクアンカーをブロック化 */
  color: #fff;
}

li a[href="#sec1"], /* 属性セレクタを利用 */
div#sec1 {
  background-color: #ff1493; /* タブと本文の色を合わせる */
}

li a[href="#sec2"], /* 属性セレクタを利用 */
div#sec2 {
  background-color: #00bfff; /* タブと本文の色を合わせる */
}

li a[href="#sec3"], /* 属性セレクタを利用 */
div#sec3 {
  background-color: #adff2f; /* タブと本文の色を合わせる */
}

div.section {
  clear: left;
  display: none; /* 初期状態は非表示 */
}

div:target {
  padding: 5px 0;
  width: 660px;
  display: block; /* ターゲットされると表示 */
}

div.section p {
  margin: 1em;
}

:target擬似クラスとdisplayプロパティを利用することで、要素の表示・非表示をコントロールしています。

ただし、:target擬似クラスに未対応なブラウザでは情報が表示されないということに 留意し、CSSハックやコンディショナルコメントなどで未対応ブラウザには適用させない ような配慮が必要でしょう。

著者それぞれが2回ずつ、計6回に渡って記事を連載させていただきましたが、今回で一旦終了となります。書籍の内容をそのまま掲載するのではなく、新たに書き下ろした内容や、また書籍の内容をコンパクトにまとめたものまでありましたが、いかがでしたでしょうか。

この回が掲載されている頃には全国の書店にて販売が始まっていると思いますので、今回の連載の内容や書籍案内を参考に、あなたの選択肢に加えていただければ幸いです。