CSS3 :target擬似クラスでイメージギャラリー
最近CSSネタも出尽くした感じで自分でもなかなかこれ面白いよ、と書ける新鮮なネタもないので、海外のサイトで見かけて面白かったものをご紹介。
普段クリックして画像を差替えるイメージギャラリーっぽいものを作る際はjavascriptを使ったりする事が多いんだけど、こちらの記事でCSS3の「 :target」を利用したイメージギャラリーの話が書いてありました。
>>Making an image gallery with :target - CSS3 . Info
内容はimgに対してまずposition:absolute;を指定しておいて、各リンクをクリックした時に:targetの該当img要素に対してz-indexで最前面に配置する、というもの。
ソースやサンプルページはそちらにあるので、そっちを見たほうが早いと思うんだけど、:target擬似クラスって意外と使い道あるのかも、とか思った。（各ブラウザにちゃんと実装されたら、の話だけど。）
擬似クラスと擬似要素
意味は理解できてるものの、たまに言葉がごっちゃになる（私だけか）擬似クラスと擬似要素。それぞれもう一度簡単におさらいしとく。
>>参考：CSS2.1 Selectors （5.10 擬似要素 及び 擬似クラス）
>>参考：CSS3 6. 単純選択子
擬似クラス、擬似要素はドキュメントツリーで表せる範囲外の情報、単純なセレクタで表す事のできない部分を選択することができるもの。
仕様書等には小難しく書いてあるけど、簡単に言い換えてみると「この場合のこの部分だけこういうスタイル付けたいのにそれをCSSだけでピンポイントに指定するの難しいよー」ってな時に、html汚さなくても、js使わなくても、擬似クラス又は擬似要素を使えばCSSで指定できる選択範囲がちょっと広がるぜ、ってこと。
以下、仕様書とか参考サイトを見ながら1つずつおさらいして簡単に用途をまとめたもの。
- 擬似クラス
- 特定のタイミングでの状態とか、要素が持ってる特長とかを選択できる。
| 擬似クラス名 | 対象 | 備考 |
|---|---|---|
| :link | 未訪問のa要素のリンク | CSS1～ リンク擬似クラス |
| :visited | 訪問済のa要素のリンク | |
| :hover | マウスが対象要素の上に置かれてる時 | CSS1及び2～ 利用者行為擬似クラス 他にも「動的」とか 「ダイナミック」とかの 言い方もある。 |
| :active | 対象要素上でマウスのボタンを押して離すまでの間 | |
| :focus | 対象要素にフォーカスされてる時（フォームとか） | |
| :lang（） | lang(言語)で指定した言語部分 | CSS2～ |
| :target | フラグメント識別子を持ってるurlリンクでターゲット対象にされた要素 | CSS3 |
| :enabled | ある要素が有効な時（フォームとか） | CSS3 UI要素に対しての 状態擬似クラス |
| :disabled | ある要素が無効な時（フォームとか） | |
| :checked | ラジオボタン、チェックボックスがチェックされた状態の時 | |
| :indeterminate | ラジオボタン、チェックボックスがチェックされてるかどうか不確定の状態の時 | |
| :root | ドキュメントルートの要素 | CSS3 |
| :nth-child(n) | 親要素のn番目の子要素 | CSS3 |
| :nth-last-child(n) | 親要素の最後から数えてn番目の子要素 | CSS3 |
| :nth-of-type(n) | 親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素 | CSS3 |
| :nth-last-of-type(n) | 親要素の中で兄弟関係にある同じ種類の要素の中最後から数えてn番目の要素 | CSS3 |
| :first-child | ある親要素の最初の子要素 | CSS2～ :nth-child(1)と同じ |
| :last-child | ある親要素の最後の子要素 | CSS3 |
| :first-of-type | 親要素の中で兄弟関係にある同じ種類の要素の中の最初の要素 | CSS3 :nth-of-type(1)と同じ |
| :last-of-type | 親要素の中で兄弟関係にある同じ種類の要素の中の最後の要素 | CSS3 :nth-last-of-type(1)と同じ |
| :only-child | 兄弟を一つも持たない、その親の唯一の子である要素 | CSS3 :first-child:last-child :nth-child(1) :nth-last-child(1)と 同じだけど固有性は低い |
| :only-of-type | 同じ要素の兄弟が一つもない要素 | CSS3 :first-of-type :last-of-type :nth-of-type(1) :nth-last-of-type(1)と 同じだけど固有性は低い |
| :empty | 子要素を一つも持たない要素 | CSS3 テキストのノードを含む |
| :contains() | テキストの内容が与えられた部分文字列を含む要素 | CSS3 内容擬似クラス 引数は文字列 静的なメディアタイプに限定 |
| :not() | 「なになにではない（否定）」の要素 | CSS3 引数として単純選択子をとる |
一番上に書いたイメージギャラリーで使われてる「:target」の例で言うと、普通に考えて「そのリンクがアクティブになった瞬間ターゲットとなる要素をどうこうする」っていうのは単純な要素を指定しただけのCSSではどうにもならないが、「:target」擬似クラスを使えばその「アクティブになった時、ターゲットをどうする」というのがピンポイントで指定できる。
- 擬似要素
- ある要素の一行目、とか１文字目とかを選択できる。ある要素の前後に内容を生成したりもできる。
| 擬似要素名 | 対象 | 備考 |
|---|---|---|
| ::first-line | ある要素の最初の行 | CSS1～ |
| ::first-letter | ある要素の最初の文字 | CSS1～ |
| ::selection | 現在選択、強調されている、要素の一部 | CSS3 UI要素の断片擬似要素 |
| ::before | ある要素の前に生成される内容 | CSS2 |
| ::after | ある要素の後に生成される内容 | CSS2 |
もっとちゃんとした詳しい解説
擬似クラス、擬似要素に関してはいろんなページに情報があるけど、個人的にはこちらのWWW WATCHさんのまとめが日本語の解説で一番分かりやすいと思いました。勉強になりまくりんぐ。
>>CSS セレクタに関するおさらい 2 | WWW WATCH
>>CSS セレクタに関するおさらい 3 | WWW WATCH
:nth-child(n)辺りの引数関連の部分も仕様書の邦訳ページより文体が分かりやすくて頭に入りやすかったです。:nth-child(n)周りの指定、早く普通に使えるようになってほしいなぁ。jsは苦手なのでCSSだけでなんとかしたい・・・。
上記サイトのページやその他を拝見して分かったつもりになってたけど、改めて自分でまとめて書いてみると以外とコレなんだっけーみたいなの結構ありますね。実際に実務で使ったことないからっていうのもあると思うけど。先は長い・・・。
各ブラウザの対応について
CSS3で擬似クラスと擬似要素の区別のための「::（コロン2つ）」については「実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips」によると、IE7ではこの::記法に対応してないので、:filrt-line擬似要素や: first-letter擬似要素を使用する際はコロン1つの方がいいかも、とのこと。IE6はコロンが1つ書かれてたらそれは擬似要素として認識するので2つあってもいいみたい。（P.100より）
各ブラウザの対応についてはこちらの記事でまとめられてる表が参考になりました。
>>hxxk.jp - IE 7 正式版を含む各種ブラウザの CSS Selectors testsuite の検証結果のまとめ
こんなサンプルもありましたよん
以前拝見して、いつか使いたいと思った:target擬似クラスのお話にこんなのもありました。
>>Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
分かりやすい度が高くて好きです。
1つ疑問なんだけど、例えばある特定部分を分かりやすくするために背景色をつけたとして、その背景色をもし消したいケースなんかが発生したらどうすんの？っていう件についてなんだけど、
>>サンプルページ（Fxとか対応してるブラウザでないと見れないけど）
※私だけかもしれないけどWinのSafari3で見るとなぜか落ちるので注意。
上のサンプルではLucky bag::blogさんと同じような方法で背景色を消すリンクを付けてるんだけど、他に方法ってないんだろうか。なんかスマートじゃない気もしてる。このあたりが限界か・・・。どっちみちIEやOpera対策としてjs併用になるなら（以下省略・・・）
とにかくブラウザに実装されたら使い道はいろいろありそう！っていうのが今の感想。
余談：どっちの漢字が正しいのか知らない
ところで「擬似」と「疑似」、どっちが正解なの・・・？なんかサイトによって違うところがあった。意味は一緒っぽいからどっちでもいいんかな。
（追記）:target擬似クラスを使ったプルダウンメニュー
CSS-EBLOGのえどさんが:target擬似クラスを使ったプロダウンメニューのサンプルを公開されていました。こちらのブログにトラックバックを送ってくださった模様なんですが、どうもキャッチできなかったので、記事内からリンクさせて頂きます。（届きました！ありがとうございます。）
>>:target擬似クラスを使ったプルダウンメニュー | CSS-EBLOG
Javascriptのonclickの代替えとして使えるかも？というサンプルが紹介されています。オシャレな感じ！
<< overflow を使用したボックス背景のこと | よく使うhtmlとCSSのソースセット >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/187
CSS3 :target擬似クラスでイメージギャラリー へのトラックバック一覧
» :target擬似クラスを使ったプルダウンメニュー 送信元 CSS-EBLOG
windowsのメニューバーのメニューのような動きをCSSのみで実現します。
Trackback time : 2008.02.15
コメント (5)
記事と直接関係ないコメントですみません。
この記事に、トラックバックを送ろうとしてエラーになったのですが、こちら側の問題でしょうか？
トラックバックが機能していないのかな、と思ったのでコメントさせてもらいました。
投稿者: えど | 2008年02月15日 12:32
>えどさん
えとーすみません。
こちらの方へは届いてないみたいです。もしよろしければ再度送信して頂いてもよろしいでしょうか？
・・・どうでもいい海外からのトラバは鬼のように届くのに（泣）
とりあえず記事内からリンクさせていただきました。
すみません＞＜
投稿者: Red | 2008年02月15日 12:42
あ・・すみません、そういうつもりでコメントしたわけではなかったのですが・・^^;
不具合とかって、なかなか自分で気づけないのでいちおう、と思ってコメントしました。
もう一度、こちらからトラックバックを送ってみますね。わざわざありがとうございました！
投稿者: えど | 2008年02月15日 13:37
>えどさん
あ、いや、えと、サンプル拝見して素敵だなーと思ったので、これはリンクしたいと思って追記しちゃいましたｗ
ｷﾀ━━━━(°Д°)━━━━!!!!
ちょうどこの返信書いてたらトラバきましたよん！よかった。私のトラバ機能ちゃんと動いてた！やっほー(n' ∀ ') η
投稿者: Red | 2008年02月15日 13:47
Redさん>>
あ、なるほど。そういうことだったんですね^^;
気に入っていただけたようでよかったです(*'')
トラックバックは、もう一度コピーしなおしたらいけました・・。
一応見比べたんですが、違いはなく・・。でも無事に届いたようでよかったです(;´д｀)
投稿者: 匿名 | 2008年02月15日 15:47