Lesson 08 ターゲット疑似クラスで移動先を明確にする - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

Webデザイン 表現&技法の 新・スタンダード

Lesson 8

ターゲット疑似クラスで 移動先を明確にする

	制作・文			平澤 隆（underHat）
＞	To Use			CSS
＞	Browser			IE 9over | Firefox 3over | Safari 4over

アンカーリンクで飛んだ際に、どこに移動したかわかりにくい場合がある。このセレクタを活用することで移動先を明確にしたり、JavaScriptを使わずにタブのような表現も可能になる。

ターゲット疑似クラスは、アンカーリンクで飛んだ際に、移動先の要素に対してス タイルが適用させることができるセレクタだ。アンカーリンクとは、【1-1】のようにシャープ（#）で始まりフラグメント識別子で終わるURLのことをいう。


【1-1】

基本的なことだが、アンカーリンクの指 定をするにはHTMLを【2-1】のように書 くことで可能だ。このように指定すること で、リンクをクリックした際に移動先の要 素にスタイルが適用される。このままで は見栄えがしないので【2-2】、CSSで簡 単に見た目を整える【2-3】【2-4】。


【2-1】HTMLソース


【2-2】スタイルがあたっていない状態


【2-3】見た目を整えた状態のページ内リンク


【2-4】CSSソース

この状態で、リンクをクリックすると通常通り移動する【3-1】。このままでは当然ながら特に変化がないため、ターゲット疑似クラスを使ってリンク先のスタイル を指定する【3-2】。この状態でリンクをクリックすると、指定した要素にスタイルが適用される【3-3】。特にコンテンツが少なく、ページ下部に移動しても移動先が画面の最上部に来ない場合は移動先がわかりにくいことがあるが、ターゲット疑似クラスを使うことでそれも防げる【3-4】。


【3-1】スタイルが当たっていない状態


【3-2】CSSソース。ターゲット疑似クラスはほかのセレクタと組み合わせて使用可能だ


【3-3】タイトル部分がほかと変わっているのが確認できる。これで、どこに移動したかが明確になった


【3-4】ターゲット疑似クラスの指定があれば、どちらのコンテンツに移動したかわかりやすくなる

ターゲット疑似クラスを応用することで、JavaScriptを使わずにタブのような見せ方も可能になる【4-1】【4-2】。これを実現するには、コンテンツ部分を最初に非表示にしておき、リンクがクリックされた際にターゲット疑似クラスによって表示させる【4-3】。この際、Internet Explorerなどのターゲット疑似クラスに未対応のブラウザでコンテンツが表示されないの を避けるため、:root疑似クラスを利用している。

タブのような見せ方の場合、フラグメント識別子がないとコンテンツが表示されなかったり、どのタブがアクティブになっているかなどを見せるのが難しいこともある。仕事で実装するときはJavaScriptと併用するとよいだろう。


【4-1】


【4-2】タブのようにすることで、表示スペースをあまり取らずに収めることができる


【4-3】CSSソース。クリックされると、display: block; が適用され表示される