CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:targetセレクターとは？ページ内リンクのジャンプ先をハイライトする方法

CSSの :target セレクターを使うと、ページ内リンク（アンカー）でジャンプした先の要素――つまり現在アクティブになっているHTMLアンカー――をハイライト表示できます。「#」付きのURLリンクを活用した目次やタブUIなどを作る際に非常に便利な擬似クラスです。

:targetセレクターの基本

:target は、URLのフラグメント識別子（「#」以降の文字列）と同じIDを持つ要素にのみスタイルを適用する擬似クラスです。たとえば「example.html#sec1」のようにアクセスすると、id="sec1" を持つ要素がターゲットと見なされ、指定したCSSが反映されます。リンクをクリックするたびにターゲットが切り替わるため、クリックに応じた動的な強調表現が可能になります。

実装例

次のコードを実行すると、:target セレクターの動作を実際に確認できます。科目名のリンクをクリックすると、ページがその項目までスクロールし、該当するチュートリアル部分がオレンジ色の背景と白い文字でハイライトされます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         :target {
            border: 2px solid #D4D4D4;
            background-color: orange;
            color: white;
         }
      </style>
   </head>
   <body>
      <p>以下の科目から好きなものをクリックしてください。</p>
      <p><a href="#tut1">数学</a></p>
      <p><a href="#tut2">Java</a></p>
      <p><a href="#tut3">C++</a></p>
      <p><a href="#tut4">C言語</a></p>
      <p>これはサンプルテキストです。</p>
      <p>これはサンプルテキストです。</p>
      <p>これはサンプルテキストです。</p>
      <p>これはサンプルテキストです。</p>
      <p>これはサンプルテキストです。</p>
      <p id="tut1"><b>数学チュートリアル</b></p>
      <p id="tut2"><b>Javaチュートリアル</b></p>
      <p id="tut3"><b>C++チュートリアル</b></p>
      <p id="tut4"><b>C言語チュートリアル</b></p>
   </body>
</html>

動作のポイント

  • リンクをクリックして該当IDの要素が表示されると、:target のスタイルが適用されます。
  • 別のリンクをクリックすると、それまでハイライトされていた要素は自動的に元の状態へ戻ります。
  • Chrome、Firefox、Safari、Edgeなど主要なモダンブラウザすべてで利用可能です。

応用のヒント

html { scroll-behavior: smooth; } を組み合わせれば、アンカーへのジャンプがスムーズスクロールになり、より快適なユーザー体験を提供できます。また、タブパネル・アコーディオンメニュー・ライトボックスなど、JavaScriptに頼らないインタラクションの実装にも応用できるので、ぜひ活用してみてください。

  1. CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法

    CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*

  2. CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説

    CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white