やあ、こんにちは。CSSの世界へようこそ。
コードを書いていると、どうしても「どうやって動的な動きを作ろうか？」と悩みますよね。「JavaScriptを勉強しなきゃダメかな……」なんて肩に力を入れているあなたに、今日はとっておきの魔法をお教えしましょう。
実はCSSだけで、ページ内の特定の場所を「パッ」と強調したり、簡単なタブ切り替えのような演出ができるんです。それが今回紹介する `:target`（ターゲット）擬似クラスです。
—
`:target` って、一体なにもの？
WebサイトのURLの末尾に「#（ハッシュ）」がつくのを見たことはありますか？ 例えば `example.com/#section1` のように。
この `#` の後ろにある「section1」というキーワード（フラグメント識別子と呼びます）が指し示す場所、つまり「今、URLで指定されて呼び出されている場所」を指すのが、この `:target` なんです。
わかりやすく例えるなら、「図書館の検索機で本を探したとき、該当する棚がピカッと光る」ようなイメージです。あなたがURLという検索窓に特定のIDを入力すると、CSSがそれに応えて「ここですよ！」と教えてくれるわけですね。
さっそくコードを書いてみよう
百聞は一見にしかず。まずは最小限のコードで、どんな動きをするか見てみましょう。
私たちについて
ここに注目が集まります！
/ CSS部分：ターゲットになった時だけスタイルを変える /
about {
padding: 20px;
background-color: #f0f0f0;
transition: 0.3s; / ふわっと色が変わるようにします /
}
/ ここが魔法の場所！ /
about:target {
background-color: #ffeb3b; / ターゲットになったら黄色く光らせる /
border: 2px solid #fbc02d;
transform: scale(1.05); / 少し大きくして存在感を出す /
}
どうでしょう？ リンクをクリックした瞬間に、そのエリアが強調されましたよね。JavaScriptを一行も書かずに、ブラウザが勝手に「今、ここを見ていますよ」と反応してくれるんです。
—
現場で役立つ「ちょっとしたコツ」
この `:target`、実はただ強調するだけじゃもったいないんです。現場のエンジニアは、よくこんな工夫をしています。
1. アコーディオンメニューを作る
「閉じるボタン」と「開くボタン」を用意して、URLのハッシュを切り替えることで表示・非表示を制御するテクニックです。
- 非表示の要素を `display: none;` にしておく
- `:target` になった時だけ `display: block;` にする
これだけで、スマホのFAQページや、ちょっとしたツールチップをCSSだけで作れてしまいます。
2. 「閉じる」の仕組みも忘れずに
`:target` はURLにハッシュが残るため、戻るボタンで前のページに戻れなかったり、変なハッシュが残ったりすることがあります。
そんな時は、リンクの飛び先を `href=”#”` に設定した「閉じるボタン」を配置しておきましょう。これだけで、ユーザーはいつでも元の状態に戻れるようになります。
—
つまずきやすいポイント：大丈夫、怖くないですよ！
初心者の方がよくつまずくのが、「あれ、色が戻らない？」という現象です。
`:target` は、「今、そのIDがURLに含まれている間はずっと」有効です。つまり、別の場所をクリックして別のハッシュに移動しない限り、その要素はずっと強調されたままになります。
「ずっと光りっぱなしだと困るな……」という場合は、以下のように工夫してみてください。
- 別の場所をクリックするとハッシュが空になるような設計にする
- CSSの `animation` を使って、数秒後に自然と色が消えるように工夫する
もしうまくいかなくても、それは「コードが間違っている」のではなく、「ブラウザの仕様と仲良くなるためのステップ」だと思ってくださいね。
—
最後に：CSSは「仕組み」を楽しむもの
CSSの面白いところは、複雑なロジックを組まなくても、Webというプラットフォームが持っている「場所を指し示す」という機能を、デザインとして活用できる点にあります。
`:target` は、決して派手な機能ではありません。でも、ユーザーが「今どこを見ているのか」を視覚的に伝える、とても優しくて親切な機能です。
ぜひ、あなたのプロジェクトのちょっとしたボタンや、見出しの強調に使ってみてください。小さな「動き」が、あなたのサイトをグッとプロっぽく、そして使いやすく変えてくれるはずです。
何か分からないことがあったら、いつでも聞いてくださいね。応援しています！
コメント