個別記事

前後の記事

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

この記事が属するカテゴリー
CSS

文書の 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;
}

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

2006-10-29T00:42:59+09:00 | コメント (5) | トラックバック (2) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/394

このリストは、次のエントリーを参照しています: CSS3 の target 疑似クラスで脚注を動的に表示する:

USOperaION／ε∂.∂з＼ さんからのトラックバック
[CSS][javascript]:target 疑似クラスでごにょごにょの解
CSS3 の target 疑似クラスで脚注を動的に表示する,ピュア CSS なプレゼン用スライドショー＠Lucky bag::blogでの、 IE 用... [続きを読む]
2006年11月10日 13:16
オラオラ さんからのトラックバック
links for 2006-11-14
Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する なんか出来そうなんだけど・・・実際は難しいの... [続きを読む]
2006年11月15日 06:34

コメント

もやしっこ さんからのコメント

こんにちは。動体視力の弱いわたしは、この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ファイルをダウンロードさせていただいて、すこしずづソースを（自分で表現したいソース用に）書き換えながら検証してみるのですが、やっぱり途中でハイライトが無効になってしまうのです。う～む・・・。

2006年11月05日 11:40
e-luck さんからのコメント [TypeKey Profile Page]

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

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

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

2006年11月07日 00:09
tennoji さんからのコメント

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

2006年12月12日 07:43
e-luck さんからのコメント [TypeKey Profile Page]

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

2006年12月13日 22:22
tennoji さんからのコメント

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

2006年12月14日 00:54

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)