【CSS】擬似クラスの「:target」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似クラスの「:target」の使い方について解説します。

擬似クラスの「:target」って何？？

このような方が対象です。

また、下の動画でも擬似クラスの「:target」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

擬似クラスの「:target」を使うと何ができる？

擬似クラスの「:target」を使うと、「URLのフラグメント」と等しい「id属性」を持つ要素にスタイルを当てることができます。

ふむふむ。

「URLのフラグメント」とは何か？

「URLのフラグメント」とは、URLの末尾につくことがある「#」以降の識別子のことです。

例えば、URLが「https://chibasyuta.org/#service」だとすると、末尾にある「#」以降の「service」がフラグメントです。

「フラグメント識別子」や「アンカー」とも呼ばれます。

「URLのフラグメント」は何に使われる？

「URLのフラグメント」はWebページ内の特定の場所を指し示すために使われます。

例えば、URLが「https://chibasyuta.org/#service」だと、

「https://chibasyuta.org」というWebページの中の「id属性の値にserviceを持つ場所」までスクロールした形でWebページが開かれます。

同じページ内の特定の場所へ飛ばすリンクのことは「ページ内リンク」とも呼ばれますね。

擬似クラスの「:target」の使用例！

<h1>タイトル</h1>

<ul>
    <li><a href="#n1">見出し１へ</a></li>
    <li><a href="#n2">見出し２へ</a></li>
    <li><a href="#n3">見出し３へ</a></li>
    <li><a href="#n4">見出し４へ</a></li>
    <li><a href="#n5">見出し５へ</a></li>
    <li><a href="#n6">見出し６へ</a></li>

</ul>

<h2 id="n1">見出し１</h2>
<p>てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。</p>

<h2 id="n2">見出し２</h2>
<p>てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。</p>

<h2 id="n3">見出し３</h2>
<p>てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。</p>

<h2 id="n4">見出し４</h2>
<p>てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。</p>

<h2 id="n5">見出し５</h2>
<p>てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。</p>

<h2 id="n6">見出し６</h2>
<p>てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。てきすと。</p>

:target {
    background-color: skyblue;
    border: 3px solid pink;
}

「ページ内リンク」をクリックして、ページ内を移動した際に、擬似クラスの「:target」によってその飛び先の要素を強調することで、ユーザーに飛び先を目立たせることができます。

しっかり読みたいところまで飛べたことが、一瞬で分かるね！

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#the-target-pseudo

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/:target

あわせて読みたい記事。

まとめ

擬似クラスの「:target」を使うと、「URLのフラグメント」と等しい「id属性」を持つ要素にスタイルを当てることができる。

「URLのフラグメント」とは、URLの末尾につくことがある「#」以降の識別子のこと。

「URLのフラグメント」はWebページ内の特定の場所を指し示すために使われる。

使用例としては、「ページ内リンク」をクリックして、ページ内を移動した際に、擬似クラスの「:target」によってその飛び先の要素を強調することで、ユーザーに飛び先を目立たせる、などがある。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも擬似クラスの「:target」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！