:targetは、HTMLドキュメント内でアンカーリンクのターゲットとして指定された要素にスタイルを適用するCSS擬似クラスです。URLの末尾にある#IDによってリンクされる要素が、ターゲットとして選択され、指定されたスタイルが適用されます。
:targetの値とその効果の一覧
:target: URLのフラグメント識別子によりターゲットとなる要素に適用されるスタイル。
注意点と関連情報
:targetは、リンクされた要素だけに適用され、ページの他の部分には影響を与えません。また、ターゲットとなる要素が存在しない場合は、スタイルは適用されません。
:targetが効かない理由として考えられること
正しいIDが指定されていない
:targetは、URLのフラグメント識別子（#id）と一致する要素にスタイルを適用します。対象要素にidが正しく指定されていない場合、:targetは機能しません。
対策：URLのフラグメント識別子と、対象要素のid属性が正しく一致していることを確認します。例えば、<div id="section1">という要素に対して、example.com#section1のようにリンクする必要があります。
ページがリロードされていない
:targetはフラグメント識別子によるページ内リンクがクリックされた瞬間に適用されます。リンクをクリックせずにページを直接開いただけでは、:targetは機能しません。
対策：リンクをクリックして、フラグメント識別子が正しく機能しているか確認します。ページが正しいフラグメント識別子付きでリロードされていることを確認してください。
URLのフラグメント識別子が動的に変更されている
JavaScriptなどによってURLのフラグメント識別子が動的に変更される場合、:targetが正しく反映されないことがあります。
対策：JavaScriptでフラグメント識別子を操作している場合、その変更が正しく行われているか確認し、必要に応じて手動でテストします。
表示例
CSS :target
以下の例では、:targetを使ってリンク先となった要素に特定のスタイルを適用します。リンクをクリックすると、ターゲットとなったボックスが異なる色で表示されます。
HTMLコード
<div class="css-sample-container">
<a href="#box1">ボックス1へリンク</a>
<a href="#box2">ボックス2へリンク</a>
<a href="#box3">ボックス3へリンク</a>
<div id="box1" class="css-sample-box">ボックス1</div>
<div id="box2" class="css-sample-box">ボックス2</div>
<div id="box3" class="css-sample-box">ボックス3</div>
</div>
CSSコード
.css-sample-container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.css-sample-box {
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
background-color: #e0f7fa;
}
.css-sample-box:target {
background-color: #b2ebf2;
border-color: #00acc1;
outline: 2px solid #00acc1;
}
表示結果
まとめ
- :targetは、URLのフラグメント識別子でターゲットとなった要素にスタイルを適用します。
- ターゲットとしてリンクされた要素にのみスタイルが適用され、他の要素には影響を与えません。
- 主にアンカーリンクによるページ内移動でスタイルを適用するために使用されます。