【CSS Modules】:target疑似クラスの使い方
:target疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:targetクラスは、WebページのURLに含まれるフラグメント識別子（#以降の文字列）と一致するid属性を持つ要素を表すクラスです。
この擬似クラスは、ユーザーがブラウザのURLバーに直接フラグメント識別子を入力したり、ページ内のアンカーリンク（例：<a href="#section-id">）をクリックして特定のセクションへ移動した際に適用されます。具体的には、URLがhttps://example.com/page.html#chapter1のようになっている場合、ページ内の<div id="chapter1">や<h2 id="chapter1">といった要素が:target状態となり、その要素に対してCSSで定義されたスタイルが適用されます。
:targetが適用された要素は、特定の場所へ移動したことを視覚的に強調し、ユーザーに現在の位置を分かりやすく示すことが可能です。例えば、ジャンプ先の見出しの色を変えたり、背景色を変更したりする際に使用されます。この状態は、URLのフラグメント識別子が変更されるたびに、以前のターゲット要素から解除され、新しいターゲット要素に適用されます。Webサイトの長文コンテンツにおけるナビゲーションの改善や、ユーザーインターフェースの使いやすさ向上に貢献する強力なツールです。
公式リファレンス: :target
構文(syntax)
1:target { 2 background-color: yellow; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません