「:target疑似クラス」と「:before疑似要素」を使ってちょっとだけページ内リンクを分かりやすくする

このサイトでは、ページ内リンクで参照する場所を分かりやすくするために、「: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でお願いいたします。

comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

TrackBack URL :