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

投稿日: 2022-04-20 2022-10-08
タグ: css

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

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

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

CSS疑似クラス：target

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

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

The :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>

それは文字通りそれと同じくらい簡単です！ロード時に、テキストセクションは表示されません。「もっと見る！」をクリックするとすぐにボタン、それは追加します #seeMore URLと #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> テキストセクションのタグ。ユーザーが「もっと見る！」をクリックしたときにのみ表示される要素にあるため、「テキストを非表示」ボタンは、非表示のテキストが表示された場合にのみ表示されます。つまり、非表示にするテキストがない限り、ユーザーはテキストを非表示にするためのボタンを表示する必要はありません。

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

https://www.imawebsite.com/#

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

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

使用する場合の例：target

実際にいつ使用するかわからない場合は、 :target 疑似クラス、これがあなたができる方法のいくつかの例です：

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

ブラウザのサポート

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

getdocs

13036