網頁要素を正確に指定する: CSS :target 擬似クラスの詳細解説

CSS プロパティ target

:target は、現在アクティブなページ内で、URL フラグメント識別子が指す要素を選択するために使用される、強力な CSS 擬似クラスセレクタです。この記事では、:target の使用方法、例、実際の適用シナリオについて詳しく説明し、:target を利用して網頁要素のスタイルを正確に制御する方法を学びます。

CSS :target 擬似クラスとは？

:target は、現在の URL のフラグメント識別子に対応する要素にスタイルを適用するための CSS 擬似クラスです。

URL フラグメント識別子は、URL の末尾に # 記号と識別子名を付けて表現されます。例えば、 https://www.example.com/page.html#section2 という URL では、 #section2 がフラグメント識別子です。

ユーザーがページ内のリンクをクリックして、特定の要素にスクロールしたり、ページをリロードして特定の要素にフォーカスしたりすると、ブラウザは URL のフラグメント識別子を更新します。:target 擬似クラスを使用すると、このフラグメント識別子と一致する要素にスタイルを適用できます。

:target の基本的な使い方

:target 擬似クラスは、他の CSS セレクタと同様に使用できます。例えば、以下のように記述すると、ID が section1 の要素に背景色を黄色に設定します。


    <a href="#section1">セクション1にジャンプ</a>
    <h2 id="section1">セクション1</h2>

    <style>
      :target {
        background-color: yellow;
      }
    </style>

上記のように記述することで、ユーザーが上記のリンクをクリックして #section1 にジャンプすると、 #section1 の要素の背景色が黄色になります。

:target 擬似クラスは、ページ内ジャンプとナビゲーションの実装にも利用できます。アンカーリンクと組み合わせて、スムーズなページ内ジャンプ効果を作成できます。


    <ul>
      <li><a href="#section1">セクション1</a></li>
      <li><a href="#section2">セクション2</a></li>
    </ul>

    <div id="section1">...</div>
    <div id="section2">...</div>

    <style>
      :target {
        scroll-margin-top: 50px;
        transition: scroll-margin-top 0.5s ease;
      }
    </style>

この例では、 scroll-margin-top プロパティと transition プロパティを使用することで、ページ内ジャンプ時にスムーズにスクロールする効果を実現しています。

:target を利用した動的なコンテンツとインタラクション効果の作成

:target 擬似クラスは、URL フラグメント識別子に基づいて、特定のコンテンツを表示または非表示にすることで、動的なコンテンツとインタラクション効果を作成するためにも使用できます。

例えば、以下のように記述すると、「タブ」機能のようなものを実装できます。


    <ul>
      <li><a href="#tab1">タブ1</a></li>
      <li><a href="#tab2">タブ2</a></li>
    </ul>

    <div id="tab1" class="tab-content">...</div>
    <div id="tab2" class="tab-content">...</div>

    <style>
      .tab-content {
        display: none;
      }

      :target {
        display: block;
      }
    </style>

この例では、デフォルトではすべてのタブコンテンツが非表示になっていますが、URL フラグメント識別子と一致するタブコンテンツのみが表示されるように設定されています。

:target のブラウザ互換性

:target 擬似クラスは、主要なブラウザで広くサポートされています。ただし、一部の古いブラウザではサポートされていない場合があります。

ブラウザ	バージョン
Chrome	1.0+
Firefox	1.0+
Safari	3.1+
Opera	9.5+
Internet Explorer	9+

詳細なブラウザ互換性情報は、Can I use ウェブサイトを参照してください。

まとめ

:target 擬似クラスは、URL フラグメント識別子に基づいて要素を選択できる強力な機能です。ページ内ジャンプ、ナビゲーション、動的なコンテンツの作成など、さまざまな用途に使用できます。

:target 擬似クラスを活用して、より魅力的でインタラクティブな網頁を作成しましょう。

網頁要素を正確に指定する: CSS :target 擬似クラスの詳細解説

目次

CSS :target 擬似クラスとは？

:target の基本的な使い方

:target を使用したページ内ジャンプとナビゲーションの実装

:target を利用した動的なコンテンツとインタラクション効果の作成

:target のブラウザ互換性

まとめ

関連する質問と回答

参考資料