CSSの「:target」擬似クラスでアンカーリンクの位置を強調する
2021.08.20 Posted by Coding_team
こんにちはウェブラボクリエイターズメモです。
文量の多いウェブページなどにおいて、目次から特定位置に飛ばす構成よく見ますよね。
ただ、ちょっと複雑なページだとイマイチどこに飛んだのかわかりにくいこともあります。
そんなお悩みを持つあなた！
アンカーリンクから飛ばした先を強調して見せることができるCSS擬似クラス「:target」について解説します。
:target擬似クラスとは
MDN Web Docsには、以下のように書かれています。
:target は CSS の擬似クラスは、 URL のフラグメントに一致する id を持つ固有の要素 (対象要素) を表します。
引用:target – CSS: カスケーディングスタイルシート | MDN（https://developer.mozilla.org/ja/docs/Web/CSS/:target）
要は、
http://www.example.com/index.html#section2
というURLのときに
<section id=”section2″>Example</section>
という要素にスタイルが当たるということです。
使用例
以下の例において、目次をクリックした際に該当するsectionの背景を赤くしてみます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!--目次--> <ul> <li><a href="#section1">セクション1</a></li> <li><a href="#section2">セクション2</a></li> <li><a href="#section3">セクション3</a></li> </ul> <!--//目次--> <!--コンテンツ--> <section id="section1"> Example1 </section> <section id="section2"> Example2 </section> <section id="section3"> Example3 </section> <!--//コンテンツ--> |
CSS
|
1 2 3 |
section:target { background: red; } |
書き方自体は簡単です。
あとは見せ方に合わせて応用していきましょう。
JSのスムーススクロールでも使用する方法
「:target擬似クラスとは」でも記しましたが「:target」擬似クラスはURLの末尾「～.html#section2」に一致する要素に適用されます。
一方で、滑らかにアンカー移動できるjQueryのスムーススクロールはURLの末尾にハッシュを追加しないので、この擬似クラスは適用されません。
そこで、JSの記述を工夫してスムーススクロールでも同じようなことをしてみましょう。
スムーススクロールの記述例
|
1 2 3 4 5 6 7 8 |
$('a[href^=#]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); |
上記のような場合、下記の記述を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$('a[href^=#]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; //既にクラスがついてるものを削除 $('.anchor_target').removeClass("anchor_target"); //飛び先にクラスを付与 target.addClass("anchor_target"); $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); |
飛び先に「.anchor_target」クラスを追加し、スタイルを適用します。
よってCSSを下記のようにします。
|
1 2 3 4 |
section:target, section.anchor_target { background: red; } |
「.anchor_target」の部分は適宜変えてOKですが、他とは被らないクラスにしてください。
これを応用し、見やすいサイトを目指してみてください。
以上、ウェブラボクリエイターズメモでした！
関連記事こちらの記事も合わせてどうぞ。
