[CSS]知ってると便利!「:target疑似クラス」を使ったスタイルシートのテクニックと注意点

:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。

:target疑似クラスを使ったスタイルシートのテクニックと注意点を紹介します。

サイトのキャプチャ

The :target Trick

:target以外の便利な疑似クラス・疑似要素については、下記のページを参考に。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

:target疑似クラスを使って、コンテンツを表示・非表示

まずは、:target疑似クラスを使った簡単なテクニックを見てみましょう。
コンテンツを表示・非表示するもので、例えばブログでデフォルトではコメント欄は非表示で、ユーザーがクリックするとコメントを表示するようにします。

HTML

CSS

デモのアニメーション

デモページ

:target疑似クラスを使って、ナビゲーションをスライドアウト

最近よく見かけるナビゲーションをスライドアウトさせるのも:target疑似クラスを使うと、簡単に実装できます。
ユーザーがアイコンをクリックすると、ナビゲーションがコンテンツの上にスライドして表示されます。

HTML

CSS

デモのアニメーション

デモページ

:target疑似クラスを使って、モーダルボックスを実装

:target疑似クラスをさらに使って、今度はページ全体をオーバーレイで覆うモーダルボックスも実装することができます。

HTML

CSS

デモのアニメーション

デモページ

:target疑似クラスを使って、グローバル スタイルを変更

最後のテクニックは、body要素に:target疑似クラスを適用し、ページを完全にスタイルし直したり、レイアウトを変更するテクニックです。ここではサイドバーを表示・非表示させています。

HTML

Sass

デモのアニメーション

デモページ

:target疑似クラスの注意点

anchors vs buttons」でも言及したようにa要素を使う時というのは、ユーザーがページ内で異なるページ、あるいは異なるセクションにナビゲートされる時です。ここで紹介したテクニック(最後の一つは除く)は、ナビゲートをするものです。そしてターゲットとなる要素のスタイルを定義し、表示・非表示させています。

:target疑似クラスを使う時は、2つの点に注意が必要です。

  1. ターゲットをクリックするので、ブラウザの履歴を加えます。そのため、ユーザーが「戻る」ボタンをクリックすると、ターゲット要素が意図されていないナビゲートをしてしまうことがあります。
  2. ターゲット要素を閉じるために使った場合、別の要素か#リンクのa要素にナビゲートするでしょう。もしその要素がない場合は、ページの最上部にジャンプさせられます。

:target疑似クラスを使う時にこれらの問題がなく、正確に使われるなら、そしてJavaScriptが選択肢にないなら、これらのテクニックがユーザーにインタラクションを提供する候補になり得ると思います。実装もJavaScriptを使うより簡単で、操作も快適です。
もちろん、実装はそのシナリオに依存します。

サイトのキャプチャ

The :target Trick

sponsors

top of page

©2024 coliss