3/3 スムーズスクロールでページ内リンクを分かりやすく [ホームページ作成] All About

CSS3の「:target疑似クラス」を使って、どこがリンク先なのかを明示する方法

リンク先の装飾が変わる

CSS3で新しく追加された「:target疑似クラス」を使うと、「ページ内リンクで移動した場合」に限定して、「リンク先になっている要素」の装飾を変更できます。例えば右図のように、「通常は黒色で表示」しつつ、「リンク先になった場合のみ赤色で表示」する、といったことも簡単に実現できます。

:target疑似クラスの使い方はとても簡単で、CSSソース内に以下のように記述するだけです。

:target {
   …… 装飾内容 ……
}

例えば、以下のようなHTMLがある場合を考えます。

<a href="#1st">第一条を見る</a>
<a href="#2nd">第二条を見る</a>
<a href="#3rd">第三条を見る</a>

<h3 id="1st">第一条</h3>
<p>この法律は、映画館等における......</p>
<h3 id="2nd">第二条</h3>
<p>この法律において、次の各号に......</p>
<h3 id="3rd">第三条</h3>
<p>映画館等において映画の上映を......</p>

最初に、a要素で作った「ページ内リンク」が3つあります。次に、h3要素で作った「リンク先（の見出し）」と、p要素で作った内容とが3セットあります。

ここで、「ページ内リンクで移動した場合」に限定して装飾を変更するには、以下のようなCSSを記述します。

:target {
   color: red;
}

上記のように記述すると、「ページ内リンクで移動した」移動先（＝id属性のある要素）の文字色を赤色に変更します。さらに、

:target + p {
   background-color: #ffffcc;
}

上記のように記述すると、「ページ内リンクで移動した」移動先（＝id属性のある要素）に隣接するp要素の背景色を淡い黄色に変更します。

このようにCSSを記述することで、リンク先がどこであるのかをハッキリと明示することができます。

スムーズスクロールと:target疑似クラスを使ったサンプル

スムーズスクロールのサンプル

冒頭でもご紹介したサンプルページを再掲しておきます。実際にブラウザで閲覧して、効果を試してみて下さい。上記のCSSソースもそのまま使っています。
→スムーズスクロールと:target疑似クラスを使ったサンプルページ

スムーズスクロールとCSSでページ内リンクを分かりやすくする

今回は、分かりやすい「ページ内リンク」を作る方法として、「ページ内リンク」にアニメーションのような効果を加えてスムーズにスクロールさせる方法と、「ページ内リンクのリンク先」になった場合にのみ装飾を変更する方法をご紹介致しました。

これらを活用することで、「移動した事実」を視覚的に分かりやすくしたり、「どこへ移動したのか」を分かりやすくしたりできます。ぜひ、活用してみて下さい。

【関連記事】