文書の 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;
}これをもとにユーザースタイルシート作って「はてなダイアリー」とかの脚注をコントロールしちゃうぞーとか思ったら、はてなの場合は、ターゲットとなる要素が脚注自体ではなく、脚注番号だった。もう全然無理。
Comments
こんにちは。動体視力の弱いわたしは、この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ファイルをダウンロードさせていただいて、すこしずづソースを（自分で表現したいソース用に）書き換えながら検証してみるのですが、やっぱり途中でハイライトが無効になってしまうのです。う～む・・・。
うーん、CSS なのか JS なのか、問題の切り分けが出来ていないようなので、なんともアドバイスが出来なくて申し訳ないのですが、少なくとも拙サンプルでは外部 JS にしても問題なく動きます。
>すこしずづソースを（自分で表現したいソース用に）書き換えながら検証してみるのですが、やっぱり途中でハイライトが無効になってしまうのです。
その辺りを調べてみるしか無いですねぇ。
初めまして。定期的に読ませていただいてます。
どうでもいいことですが、Hatenaの脚注に関しては事前にUserJSで脚注番号の'name'や'id'属性を親要素のp.footnoteに付け替える作業を挟んでみてはいかがでしょう？
そうすれば、.footnote:target で何かできるような気がします。
もう誰かが別のスマートな解決法を見つけているかも知れませんが……。
自分で試しもせず書いてしまいました。
コメントありがとうございます :-)
そうですね、やはり解決するには JavaScript を使うしかないでしょうね。
ただ残念なことに、自分はそこら辺はまったくダメなんです :-P
なるほどそうでしたか。
親要素を辿れない分、ピュアCSSで動的な制御を行うのは中々に骨の折れる作業ですが、発想は大好きです。
これからも参考にさせていただきます。