CSS3 の target 疑似クラスで脚注を動的に表示する

文書の URI の後に #foo などの識別子(id)をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。

そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target | HTML Dog の JavaScript を利用している。(Opera はダメっぽい、教えてエロイ人!)

<p>文章…<a href="#">アンカー</a>…</p>
<ol>
<li>脚注内容</li>
</ol>

とりあえず、普通にハイライト表示させるだけでも、どこに飛んだのか分かりやすくなる。

ハイライトさせるだけではつまらないんで、ol 要素でマークアップした脚注内容を非表示にしておき、脚注へのリンクをクリックすることで、脚注がウィンドウ内右上に表示させるようにしてみた。表示した脚注を閉じるには、脚注内の[脚注元へ]をクリック。

/* 脚注を非表示 */
ol.note li {
  display: none;
}

/* ターゲットされた際に画面右上に表示 */
ol.note li:target {
  border: 3px dotted #888;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  width: 15em;
  background-color: #f0fff0;
}

これをもとにユーザースタイルシート作って「はてなダイアリー」とかの脚注をコントロールしちゃうぞーとか思ったら、はてなの場合は、ターゲットとなる要素が脚注自体ではなく、脚注番号だった。もう全然無理。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/17

USOperaION/ε∂.∂з\ - [CSS][javascript]:target 疑似クラスでごにょごにょの解 (2006年11月10日 13:16)

CSS3 の target 疑似クラスで脚注を動的に表示する,ピュア CSS なプレゼン用スライドショー@Lucky bag::blogでの、 IE 用... 続きを読む

オラオラ - links for 2006-11-14 (2006年11月15日 06:34)

Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する なんか出来そうなんだけど・・・実際は難しいの... 続きを読む

Comments

もやしっこ said:

こんにちは。動体視力の弱いわたしは、このtarget擬似要素をうまくサイトに取り入れてみたいと思い、さっそく挑戦してみました。

しかしながら、、、
ハイライト用のスクリプトを、(ターゲットさせたい要素はLIからdtに置き換えて)外部JS+外部CSSで実装してみたところ、IE6ではターゲットされませんでした。HTMLの中にスクリプトを書いてみると、ターゲットされたりされなかったりと挙動不審で、いまいちその原因を特定できませんでした。

CSSでは
dt.sftarget,
dt:target {
background: #0f0;//ライム
}
というように正しく指定してあるつもりなのですが・・。もしかしたら優先順位の問題かと思い、「dl#yusen dt.sftarget」にように優先度を上げてみましたが、やはりIEでは動作せず、涙。

lucky-bag.comさんのHTML内のスクリプトには、

というような記述がありましたが、これがIEでの動作と関係しているのでしょうか? HTMLファイルをダウンロードさせていただいて、すこしずづソースを(自分で表現したいソース用に)書き換えながら検証してみるのですが、やっぱり途中でハイライトが無効になってしまうのです。う~む・・・。

e-luck said:

うーん、CSS なのか JS なのか、問題の切り分けが出来ていないようなので、なんともアドバイスが出来なくて申し訳ないのですが、少なくとも拙サンプルでは外部 JS にしても問題なく動きます。

>すこしずづソースを(自分で表現したいソース用に)書き換えながら検証してみるのですが、やっぱり途中でハイライトが無効になってしまうのです。

その辺りを調べてみるしか無いですねぇ。

tennoji said:

初めまして。定期的に読ませていただいてます。
どうでもいいことですが、Hatenaの脚注に関しては事前にUserJSで脚注番号の'name'や'id'属性を親要素のp.footnoteに付け替える作業を挟んでみてはいかがでしょう?
そうすれば、.footnote:target で何かできるような気がします。
もう誰かが別のスマートな解決法を見つけているかも知れませんが……。
自分で試しもせず書いてしまいました。

e-luck said:

コメントありがとうございます :-)
そうですね、やはり解決するには JavaScript を使うしかないでしょうね。
ただ残念なことに、自分はそこら辺はまったくダメなんです :-P

tennoji said:

なるほどそうでしたか。
親要素を辿れない分、ピュアCSSで動的な制御を行うのは中々に骨の折れる作業ですが、発想は大好きです。
これからも参考にさせていただきます。