文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、 CSS 3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :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; }

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