「:target疑似クラス」と「:before疑似要素」を使ってちょっとだけページ内リンクを分かりやすくする
- 2009-07-13 (月) 17:23
- css



このサイトでは、ページ内リンクで参照する場所を分かりやすくするために、「:target疑似クラス」を指定しています。具体的には以下のようなCSSですね。(「:target疑似クラス」に関しては「CSS3 の target 疑似クラスで脚注を動的に表示する – lucky bag」なども参考にしてください)
*:target {
background: #e4de3f !important;
}
こうすることで、参照された要素の背景色が他と変わりますので、グラフィカルなブラウザでサイトを閲覧している方にはどこを見るべきかが分かりやすくなるでしょう。
ただ、ページ内リンクの場合、ページ自体はパッとアッと言うまに移動してしまいますので、例え色が変わってもそれでも分かりにくいと思われます。かのbAさんが開発されたという、ページがアッと言うまに移動してしまうことを防いで、スルスルーとページが動くJavaScriptを実装するということも考えられますが、CSSのみでもう少しだけ分かりやすく出来るのではないかな?ということで、さらに「:before疑似要素」を付け足してみました。以下がCSSのソースです。
*:target:before {
display: block;
color: #b30;
font-weight: bold;
content: "只今参照したリンク先は以下です。";
}
body:target:before {
display: none;
}
こうすることで、参照された要素の背景色が変わるとともに、「只今参照したリンク先は以下です。」という文言が表示されます。body要素への指定はなくても問題ないのですが、このサイトの場合ですと「ページの先頭へ戻る」のリンクがbody要素に指定したid属性を参照していますので表示をさせないように上書きしています。以下がビフォアー/アフターのスクリーンショットです。
しかし残念なことにFirefoxですと、最新のバージョン3.5でも対応していないんですねー。そもそも「:target疑似クラス」はあくまで「疑似クラス」ですので、:target:beforeと書いた場合は、.targt:beforeと書いた場合と同じような振る舞いになるのではないかなーと思っているのですが、うーむ、この辺はどうなんでしょうか。
とは言え、Safari4では動作するようですので、確認する際にはSafariでお願いいたします。
コメント(現在1件)
- エレファント 09-07-30 (木) 19:41
-
おじさんが大好きっていう子からメール来たんで行ってきましたよ!!
すごいスタイルいいなぁと思ったら雑誌でモデルやってると聞いてびっくり!!
ま、1時間後にはザー汁でキレーな肌をべっとべとにしてやったけど。笑
やっぱ若い子はいいね!!ノリで何でもさせてくれるからやりたい放題( ̄ー ̄)vニヤリッ
トラックバックとピンバックです(現在0件)。
- この記事のトラックバックURL
- http://maboroshi.biz/clearskysource/wp-trackback.php?p=137
- 以下の記事を参照します。
- 「:target疑似クラス」と「:before疑似要素」を使ってちょっとだけページ内リンクを分かりやすくする(元サイト:clear sky source)




