：targetPseudo-Classを使用したCSSのみのクリックハンドラー（JavaScriptなし）

多くの場合、Webサイト、特に単純なランディングページを構築しているときに、JavaScriptを導入する必要があることに気付いたときにポイントがあります。ただし、CSSは、多くの場合、私たちが認めている以上のことを行うことができます。ここでは、CSSのみを使用してクリックハンドラーを作成する方法を見ていきます。 🔥

HTMLとCSSのランディングページを作成していて、「もっと見る」が必要だと判断したとします。テキストのセクションを表示するボタン。クリックイベントについて考えるとすぐに、通常はJavaScriptという1つの単語につながります。

Web開発者として、私たちのほとんどはJavaScriptに多くの時間を費やしています-そしてそれは素晴らしいことです！ただし、CSSだけでできることはたくさんあり、知らないこともあります。 💅

CSS疑似クラス：target

CSSには、さまざまな状態の要素のスタイルを設定するのに役立つ疑似クラスがたくさんあります。たとえば、ボタンにカーソルを合わせたり、アクティブにしたり、フォーカスしたりしたときに、ボタンのスタイルを設定できます。

ただし、聞いたことのない疑似クラスの1つは、:target疑似クラスです。

:target疑似クラスは、要素のIDが現在のURLの一部と一致する場合に、その要素を選択するために使用されます。

要素のIDはいつURLと一致しますか？

要素のIDをURLに表示する一般的な使用例は、アンカータグ（<a>）を使用して現在のページの特定の場所にジャンプする場合です。たとえば、個人のWebサイトの場合、ページの上部に[連絡先]ボタンがある場合があります。クリックすると、ユーザーがフッターに移動して、すべての連絡先情報が表示される可能性があります。

アンカータグを使用してページ上の位置をジャンプする

以前に<a>タグを使用したことがある場合は、href属性に精通している可能性があります。たとえば、 Alligator.io などのWebサイトにリンクしようとしている場合は、次のようにHTMLにリンクを作成します。

<a href='https://alligator.io'>
  Click me! 🐊
</a>

ただし、たとえば、ユーザーが現在のページにとどまり、フッターにジャンプするようにしたい場合は、フッターにIDを設定し、そのIDをhref値に使用するだけです。 <a>タグ。

<a href='#footer'>
  Go to the footer!
</a>

ユーザーがこのフッターリンクをクリックすると、ページがフッターにジャンプし、現在のURLが次のように更新されます。

https://www.imawebsite.com/#footer

フッター要素のIDが現在のURLの一部になりました。言い換えれば、それがターゲットです！ 🤓

：targetを使用したクリックハンドラーの作成

HTMLでターゲットを作成する方法がわかったので、そのターゲットを使用してJavaScriptなしでクリックハンドラーを作成するにはどうすればよいでしょうか。ありがたいことに、CSSはほんの少ししかかかりません！ 🌈

「もっと見る！」を使用する上からのボタンの例では、より多くのテキストを表示するためのリンクを作成することから始めましょう。

<a href='#seeMore'>
  See more!
</a>

見たいテキストのセクションはまだ存在しないので、それも作成しましょう。

<a href='#seeMore'>
  See more!
</a>

<section id='seeMore'>
  <p>
    Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button.
  </p>
</section>

「もっと見る！」をクリックするとボタンをクリックすると、URLが次のように更新されます。

https://www.imawebsite.com/#seeMore

現在の問題は、#seeMoreセクションが、まだ表示されていないはずなのに、ユーザーに表示されることです。 🙈

これまでに必要なHTMLはこれですべてなので、クリック時にテキストブロックを表示するためのCSSを追加しましょう。

まず、まだ表示されていないテキストを非表示にしましょう。

<style>
  #seeMore {
    display: none;
  }
</style>

これで、#seeMoreセクションのテキストは、読み込み時または[もっと見る]をクリックしたときに表示されなくなりました。ボタン。これが:targetスタイリングの出番です。 :target疑似クラスを使用して、「もっと見る」ときにスタイルを更新してみましょう。ボタンがクリックされます。

<style>
  #seeMore {
    display: none;
  }

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

それは文字通りそれと同じくらい簡単です！ロード時に、テキストセクションは表示されません。「もっと見る！」をクリックするとすぐにボタンをクリックすると、URLに#seeMoreが追加され、#seeMoreセクションがターゲットになります。 #seeMoreがターゲットになると、:targetスタイルが適用され、テキストが表示されます。 🥳

：targetを使用して表示を切り替えます

そもそも要素が表示されていなかった場合は、要素を再度非表示にするオプションが必要になる可能性があります。

幸いなことに、HTMLをあと1行で（CSSなしで！）それを行うことができます💪

上記と同じ例を使用して、「テキストを非表示」ボタンを含むようにHTMLを展開してみましょう。

<a href='#seeMore'>See more!</a>

<section id='seeMore'>
  <p>
    Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button.
  </p>

  <a href='#'>Hide text</a>
</section>

テキストセクションに新しい<a>タグがあることに注意してください。ユーザーが「もっと見る！」をクリックしたときにのみ表示される要素にあるため、「テキストを非表示」ボタンは、非表示のテキストが表示された場合にのみ表示されます。つまり、非表示にするテキストがない限り、ユーザーはテキストを非表示にするためのボタンを表示する必要はありません。

「テキストを非表示」ボタンのhrefの値は「＃」です。これは、URLを更新して#seeMoreを含まないようにするためです。「テキストを非表示」ボタンをクリックすると、URLが次のように更新されます。

https://www.imawebsite.com/#

URLが更新されると、#seeMoreはターゲットではなくなり、#seeMore:targetスタイルは適用されなくなります。したがって、テキストのブロック（[テキストを非表示]ボタンを含む）は、display: none;スタイルの適用に戻ります。

つまり、URLを更新すると、元々表示されていなかったテキストが表示されない状態に戻ります。正式にテキストを切り替える方法があります！ ✨

使用する場合の例：target

:target疑似クラスを実際にいつ使用するかわからない場合は、次の方法の例をいくつか示します。

ハンバーガーアイコンをクリックして、サイトのナビゲーションメニューを表示します。ナビゲーションを閉じるためのアイコンを含めます。
アイコンをクリックして、モーダルを表示します。（注：モーダルを使用する場合は、モーダルにアクセスできることを確認してください。 🤓）
クリックされたときに、ナビゲーションバーで現在選択されているタブのスタイルを更新します。

ブラウザのサポート

:target疑似クラスのブラウザーサポートは素晴らしく、IE8をサポートしていない限り、基本的に心配する必要はありません。ただし、いつものように、使用できますかを確認してください。 🚀