こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。

CSSを勉強し始めの頃って、`hover`で色が変わるのを作って「おっ、動いた！」と感動したあと、次に立ちはだかる謎の機能の多さにめまいがしたりしませんか？「疑似クラス」なんて名前だけでもうお腹いっぱいになりそうですよね。

でも、安心してください。今日お話しする `:target`（ターゲット）疑似クラス は、実は私たちの身の回りのとても分かりやすい仕組みとまったく同じなんです。

今回は、難しい専門用語はなるべく置いておいて、身近な例え話と一緒にその魔法のような仕組みを紐解いていきましょう！

—

1. `:target` ってそもそも何者？（お買い物のフロアガイドに例えてみよう）

大型デパートに行ったときを想像してください。
1階の総合案内板で「5階 おもちゃ売り場はこちら」という看板を見て、エレベーターで5階に上がりました。すると、目的のおもちゃ売り場だけがピカッとライトアップされていたり、大きな矢印が向けられていたりしたら、「あ、ここが目的地だ！」とすぐに分かりますよね。

Webの世界でも、これとまったく同じことが起きるんです。

URLの末尾についている `#（ハッシュ／シャープ）` から始まる文字（これを「フラグメント識別子」や「アンカー」と言います）。例えば `https://example.com/index.html#about` の `#about` の部分です。
この `#` の後ろの言葉と、HTML側にある `id=”about”` という名前がピタッと一致したとき、「おっ、今ここがユーザーの目的地（ターゲット）に選ばれたな！」 と判定してスタイルを適用してくれるのが、`:target` 疑似クラスなんです。

JavaScriptを1行も書かずに、URLの動きだけで「ここだよ！」と要素を主役にしてあげられる、ちょっといぶし銀で便利なやつなんですよ。

—

2. 百聞は一見に如かず！シンプルなコードで試してみよう

言葉だけだと「うーん？」となるかもしれないので、実際に動くサンプルを見てみましょう。
今回は、よくある「続きを読む」や「タブ切り替え」の超簡易版を作ってみます。

以下のコードを、あなたのパソコンのメモ帳などにコピペして、拡張子を `.html` にしてブラウザで開いてみてください。

:targetの不思議な体験

下のボタンを押してみてください。URLの末尾が変わり、隠れていた箱がパッと現れますよ！

秘密のメッセージを見る
閉じる（リセット）

動きの仕組みをそっと解説

1. ページを開いた時点では、`.details-box` は `display: none;` で隠されています。
2. 「秘密のメッセージを見る」というリンクをクリックすると、ブラウザのURLが `〜/index.html#secret-box` に変わります。
3. ブラウザが「おっ、`#secret-box` が指名されたぞ」と気づき、HTML側にある `id=”secret-box”` を持った要素を探します。
4. 見つかった瞬間、CSSの `.details-box:target` が発動し、`display: block;` になって画面にフワッと現れます！

どうですか？ 「JavaScriptを書かないとこういうアコーディオンやポップアップは作れない」と思っていませんでしたか？ 実はCSSだけでも、URLの仕組みを利用してここまでスタイリッシュな表現ができるんです。

—

3. 実務や制作でつまずきやすいポイントと、優しい処方箋

現場でこの `:target` を使うとき、初心者の頃に誰もが通る「ちょっとした落とし穴」があります。あらかじめ知っておけば怖くないので、いくつかシェアしておきますね。

つまずきポイントその1：ページ内リンクをクリックしたときに、画面がカクンとジャンプしちゃう

`:target` は「URLのハッシュ（#）」に反応するため、リンクを押すとブラウザは自動的にその要素の場所までページをスクロールさせようとします。これが意図しない動きになってしまうことがあります。

• 処方箋（解決のヒント）：

CSSの `scroll-behavior: smooth;` を `html` 要素に指定してあげると、ページがピョンと急に飛ぶのではなく、スーッと優しくスクロールするようになります。これだけでもユーザー体験がグッと上がりますよ。

つまずきポイントその2：「閉じる」ボタンの作り方に悩む

一度 `:target` でパッと開いたはいいものの、「元の隠れた状態に戻す（閉じる）」にはどうすればいいの？と手が止まることがあります。

• 処方箋（解決のヒント）：

先ほどのサンプルコードにもこっそり仕込んでおいたのですが、リンク先を空っぽの `#`（例：`閉じる`）にしてあげるか、あるいは全く関係ない別の適当なIDを指定してあげると、URLのターゲットが外れるため、CSSの `:target` も解除されて元の「隠れた状態」に戻ってくれます。この「無に帰す技」、覚えておくとすごく重宝します。

—

4. チーフアーキテクトからのエール

CSSの機能って、一つひとつは「ふーん、そんなものがあるんだ」で終わりがちですが、組み合わせたりアイデアを絞ったりすると、まるで魔法の杖のように動いてくれます。

この `:target` 疑似クラスも、大規模なWebアプリを作る際にはもっと高度なルーターやJavaScriptが使われることが多いですが、「ちょっとしたポップアップ」「FAQの開閉」「簡易的なタブメニュー」 などを作る際には、軽量でバグが起きにくい最高の手法になります。

「JavaScriptがまだちょっと苦手だな……」という方でも、HTMLとCSSの基本の組み合わせだけで、ここまでリッチなインタラクションが作れるんだという自信につながれば、チーフとしてこれほど嬉しいことはありません。

まずは怖がらずに、手元のエディタでコードをいじくり回してみてください。「あ、こう動くのか！」という発見の数々が、あなたを確実に素晴らしいフロントエンドの書き手にしてくれますよ。
それでは、また次のCSSの迷宮でお会いしましょう！