CSSの「:target」擬似クラスでアンカーリンクの位置を強調する

2108こんにちはウェブラボクリエイターズメモです。

文量の多いウェブページなどにおいて、目次から特定位置に飛ばす構成よく見ますよね。
ただ、ちょっと複雑なページだとイマイチどこに飛んだのかわかりにくいこともあります。

そんなお悩みを持つあなた!
アンカーリンクから飛ばした先を強調して見せることができる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

CSS

書き方自体は簡単です。
あとは見せ方に合わせて応用していきましょう。

JSのスムーススクロールでも使用する方法

:target擬似クラスとは」でも記しましたが「:target」擬似クラスはURLの末尾「~.html#section2」に一致する要素に適用されます。
一方で、滑らかにアンカー移動できるjQueryのスムーススクロールはURLの末尾にハッシュを追加しないので、この擬似クラスは適用されません。
そこで、JSの記述を工夫してスムーススクロールでも同じようなことをしてみましょう。

 

スムーススクロールの記述例

上記のような場合、下記の記述を追加します。

飛び先に「.anchor_target」クラスを追加し、スタイルを適用します。
よってCSSを下記のようにします。

「.anchor_target」の部分は適宜変えてOKですが、他とは被らないクラスにしてください。

 

これを応用し、見やすいサイトを目指してみてください。
以上、ウェブラボクリエイターズメモでした!

CSSの「:target」擬似クラスでアンカーリンクの位置を強調する はコメントを受け付けていません
  • このページを共有する