CSS3から追加された擬似クラス:tragetを使ったタブ形式のPhoto Gallery。 :targetとはリンク先に指定された要素が、リンク先から呼び出されたときのスタイルを 定義することができます。 分かり易くいうと、よく使われている:foverはマウスが要素の上にあるときのスタイル を定義できるが、:targetはリンク先をクリックした時にリンク先のスタイルを定義 するものです。:targetが無い場合はjavascriptのonClickを使って実現していたことを、 :targetによりCSSで実現できるようになっています。但しIE8では機能しません。

＜HTML＞

<div id="screen">
	<h1>タブ形式のPhoto Gallery</h1>

	<dl id="page-1" class="page">
		<dt class="tab"><a href="#page-1">花</a></dt>
		<dd class="content">
			<img src="http://www.geocities.jp/sample/flower.jpg" width="620" height="430" alt="">
			<p>紫がきれいな花です。とてもみずみずしいです。</p>
		</dd>
	</dl>

	<dl id="page-2" class="page">
		<dt class="tab"><a href="#page-2">鳥</a></dt>
		<dd class="content">
			<img src="http://www.geocities.jp/sample/bard.jpg" width="620" height="430" alt="">
			<p>名前はわかりませんがきれいで品のある鳥です。</p>
		</dd>
	</dl>

	<dl id="page-3" class="page">
		<dt class="tab"><a href="#page-3">あざらし</a></dt>
		<dd class="content">
			<img src="http://www.geocities.jp/sample/seal.jpg" width="620" height="430" alt="">
			<p>かわいいアザラシの子供です。</p>
		</dd>
	</dl>
</div>