私たちは、お客様のプライバシーを大切にします

私たちは、お客様のブラウジング体験を向上させ、パーソナライズされた広告やコンテンツを提供し、当社のトラフィックを分析するためにクッキーを使用しています。「すべてのクッキーを受け入れる」をクリックすると、当社のクッキーの使用に同意したことになります。

同意に関する設定をカスタマイズ

当社は、お客様を効率的にナビゲートし、特定の機能を実行できることを目的としてクッキーを使用しています。以下の各同意項目の下に、すべてのクッキーの詳細情報が記載されています。

「必須」に分類されるクッキーは、サイトの基本的な機能を有効にするために不可欠であるため、お客様のブラウザに保存されます。

また、当社は、お客様による本サイトの利用状況を分析し、お客様の好みを保存し、お客様に関連するコンテンツや広告を提供するために、サードパーティーのクッキーを使用しています。これらのクッキーは、お客様の事前の同意がある場合にのみ、お客様のブラウザに保存されます。

お客様は、これらのクッキーの一部、または全部を有効または無効にすることができますが、一部のクッキーを無効にすると、お客様のブラウジング体験に影響を与える場合があります。

常に効にする

必須クッキーとは、安全なログインの提供や同意設定の調整など、このサイトの基本機能を有効にするために必要なクッキーです。これらのクッキーは、個人を特定できるようなデータを保存することはありません。

表示するクッキーがありません。

機能クッキーは、ソーシャルメディアプラットフォームでのウェブサイトのコンテンツの共有、フィードバックの収集、その他のサードパーティの機能など、特定の機能の実行をサポートします。

表示するクッキーがありません。

分析用クッキーは、訪問者がウェブサイトとどのように関わっているかを理解するために使用されます。これらのクッキーは、訪問者数、直帰率、トラフィックソースなどの指標に関する情報を提供することをサポートします。

表示するクッキーがありません。

パフォーマンスクッキーは、ウェブサイトの主要なパフォーマンス指標を理解し、分析するために使用され、訪問者に優れたユーザー体験を提供することをサポートします。

表示するクッキーがありません。

広告クッキーは、訪問者が以前に訪れたページに基づいてカスタマイズされた広告を提供し、広告キャンペーンの有効性を分析するために使用されます。

表示するクッキーがありません。

プログラミング

:target CSS エフェクトの活用

最終更新： 23/04/2025
1 分の読み

CSS の :target 擬似クラスを使用した UI エフェクトの作成について、JavaScript を使用せずに実現する方法に関する完全な解説を行います。この技術は、ページ内リンクを用いたインタラクティブなエフェクトを提供し、JavaScript を使用しなくても、ユーザーインターフェースをダイナミックに変更できる便利な手法です。

1. :target 擬似クラスとは

:target 擬似クラスは、ユーザーがページ内の特定のアンカーリンク（#hash）をクリックした際に、該当する要素にスタイルを適用できるCSSの機能です。この擬似クラスを使用することで、ページのリロードや JavaScript の処理なしに、要素にインタラクティブなスタイルを与えることができます。

関連記事

#hash は、URL のフラグメント識別子（通常はページ内のID）に基づいています。たとえば、#about というリンクがクリックされた場合、

のような要素がターゲットとなり、CSS でその要素にスタイルを変更することができます。

2. 基本的な使用方法

HTML の構造

まず、基本的な HTML を作成します。ここでは、いくつかのセクションを作成し、それぞれにリンクを配置します。

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>:target 擬似クラスの例title>
  <link rel="stylesheet" href="style.css">
head>
<body>
  <nav>
    <ul>
      <li><a href="#section1">セクション 1a>li>
      <li><a href="#section2">セクション 2a>li>
      <li><a href="#section3">セクション 3a>li>
    ul>
  nav>

  <div id="section1" class="section">セクション 1div>
  <div id="section2" class="section">セクション 2div>
  <div id="section3" class="section">セクション 3div>
body>
html>

この HTML は、3つのセクションと、各セクションへのリンクが含まれています。ユーザーがリンクをクリックすると、ブラウザの URL にフラグメント（例：#section1）が追加され、そのセクションにスクロールしてきます。

CSS の設定

次に、:target 擬似クラスを使用して、リンクをクリックした際に特定のセクションのスタイルを変更します。たとえば、ターゲットとなったセクションにハイライトを追加するエフェクトを作成します。

css
body {
  font-family: Arial, sans-serif;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333;
  padding: 10px;
  width: 100%;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 20px;
}

nav a {
  color: white;
  text-decoration: none;
}

.section {
  padding: 100px;
  margin: 20px;
  background-color: lightgray;
  margin-top: 60px; /* navの下に表示されるように調整 */
  transition: background-color 0.3s ease;
}

/* :target 擬似クラスを使用して、ターゲットセクションにスタイルを追加 */
.section:target {
  background-color: #f0e68c; /* ターゲットとなったセクションに黄色の背景色を適用 */
}

この CSS では、各セクションが :target 擬似クラスによってスタイルが変更されるように設定されています。リンクがクリックされて該当するセクションがターゲットとなると、そのセクションの背景色が変更され、ユーザーに視覚的にインタラクションの変化を示します。

実行の流れ

  1. ユーザーがナビゲーションメニューのリンクをクリックします。

  2. クリックされたリンクの href 属性に対応する id を持つセクションが画面に表示され、URL のフラグメント（#section1 など）が変更されます。

  3. :target 擬似クラスがそのセクションに適用され、スタイルが変化します（背景色が黄色に変更されるなど）。

3. アニメーションやトランジションの追加

transition プロパティを使用して、ターゲットとなったセクションにアニメーションやエフェクトを追加できます。たとえば、セクションがターゲットとなったときに、そのサイズや色がスムーズに変化するように設定することが可能です。

css
.section {
  padding: 100px;
  margin: 20px;
  background-color: lightgray;
  margin-top: 60px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.section:target {
  background-color: #f0e68c;
  transform: scale(1.05); /* ターゲットとなったセクションを少し拡大 */
}

このように、transition を使用して背景色が変わると同時に、セクションの拡大効果も加えられます。これにより、よりインタラクティブで魅力的な UI を実現できます。

4. スクロールアニメーションの活用

スクロール位置を調整するエフェクトも、:target 擬似クラスを使用して実現できます。たとえば、ターゲットとなったセクションに対して自動的にスクロールを滑らかにすることができます。CSS の scroll-behavior プロパティを使用することで、これを簡単に実装できます。

css
html {
  scroll-behavior: smooth; /* ページ内リンクのクリックでスムーズにスクロール */
}

これにより、ページ内リンクをクリックすると、ターゲットとなるセクションにスムーズにスクロールします。

5. :target の応用例

アコーディオンメニュー

:target 擬似クラスを使って、JavaScript を使わずにアコーディオンメニューを作成することもできます。以下に、アコーディオンメニューの基本的な例を示します。

html
<div class="accordion">
  <a href="#item1" class="accordion-link">アイテム 1a>
  <div id="item1" class="accordion-content">
    <p>アイテム 1 の詳細情報p>
  div>

  <a href="#item2" class="accordion-link">アイテム 2a>
  <div id="item2" class="accordion-content">
    <p>アイテム 2 の詳細情報p>
  div>

  <a href="#item3" class="accordion-link">アイテム 3a>
  <div id="item3" class="accordion-content">
    <p>アイテム 3 の詳細情報p>
  div>
div>

css
.accordion-content {
  display: none;
  background-color: #f1f1f1;
  padding: 10px;
}

.accordion-link:target + .accordion-content {
  display: block; /* 対象となるセクションを表示 */
}

ここでは、アコーディオンメニューが動作します。リンクがクリックされると、そのリンクに関連する詳細情報が表示されます。display: none をデフォルトで設定し、:target 擬似クラスを使って、リンクがクリックされたときのみ詳細情報を表示します。

6. 結論

:target 擬似クラスは、JavaScript を使わずに動的なインタラクションを実現できる強力なツールです。ページ内リンクを活用することで、ユーザーがリンクをクリックした際にインタラクティブなエフェクトを提供することができ、UI をより魅力的にするために役立ちます。アニメーションやスクロールエフェクトを追加することで、さらに洗練されたユーザー体験を提供できるでしょう。

最終更新： 23/04/2025
1 分の読み
Back to top button