CSS3【:target擬似クラス】

6月18日、「Firefox」v3の正式版がついに公開されましたね！
みなさんは、もうご使用されてますか？
WEB業界はどんどん進化していくので、みなさんもついていくのが必死かもしれませんが 取り残されないようについていきましょう！

今回はCSS3のお話です。
CSSにもバージョンがあって現在のページの多くがCSS2を採用しております。
現在策定中のCSS3ではどのような事ができるのでしょうか？
wikiペディアをみてみると・・・

Cascading Style Sheets, level 3 (CSS3) CSS3では全体がモジュール化され、ユーザーエージェントがどのモジュールに対応し、どのモジュールに対応しないか自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。現在、どのモジュールも勧告には至っていない。
ん～なんだか難しそうですね。
とにかく、CSS2以上にできる事が増えそうです。
では、実際試してみたいと思います。

今回は、「:target擬似クラス」についてご紹介したします。
このtarget擬似クラスは、現在firefox2にすでに実装されておりますので、 firefox2を使用して再現したいと思います。

「:hover擬似クラス」は、みなさんおなじみの「マウスがロールオーバーした時」の設定ですよね。
では、「:target擬似クラス」はどのようなものかと言うと、 よく皆さんが使用しているもので例えると、 クリックしたら画像が入れ替わるイメージギャラリーなど を作成した事ありませんか？

いままでJavascriptやFLASHを使用していたと思いますが、これが「:hover擬似クラス」 を使用すると可能になってきます。
簡単なものを作ってみました。

CSSで、画像が表示される部分をあらかじめ「display:none;」にしておきます。
クリックしたときに表示されるように「:target」 で、写真が表示されるようにします。

HTMLでは、ページ内リンクを作成し、target先に画像を指定しました。

実際の画面では・・・

クリックすると・・・