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

CSSの:targetセレクターでアクティブなHTMLアンカーをハイライト表示する方法

CSSで現在アクティブなHTMLアンカー（リンク先の要素）をハイライト表示したい場合は、:targetセレクターを使用します。

:targetセレクターとは

:targetは、URLのフラグメント識別子（#以降の部分）と一致するIDを持つ要素に対してスタイルを適用できる擬似クラスです。ページ内リンクがクリックされると、そのリンク先の要素が「ターゲット」となり、指定したスタイルが自動的に反映されます。JavaScriptを使わずに、クリック操作に応じた視覚的なフィードバックを実現できるのが大きな特徴です。

実装例

以下のコードを実行して、: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>

コードのポイント

  • 各リンクのhref属性には、「#tut1」〜「#tut4」というフラグメントを指定しています。
  • リンクがクリックされると、対応するIDを持つ段落がターゲットとなり、枠線・オレンジ色の背景・白色の文字というスタイルが適用されます。
  • :targetセレクターは主要なモダンブラウザで広くサポートされているため、追加のスクリプトなしで手軽にインタラクティブな演出を導入できます。
  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"