クリックできない「透明な壁」を作る！ `pointer-events: none` の魔法を使いこなそう
こんにちは！Web制作の世界へようこそ。
HTMLやCSSを触り始めると、「このボタン、今は押してほしくないんだけどな…」とか、「このテキストの上のリンクを無効にしたい！」なんて場面に必ず遭遇しますよね。
そんな時、JavaScriptで一生懸命クリックを無効化する処理を書こうとして、「あれ、なんかうまくいかない…」と頭を抱えてしまうことはありませんか？
実は、そんなお悩みを一瞬で、しかも驚くほどスマートに解決してくれるCSSの魔法があるんです。それが今回紹介する `pointer-events: none` です。
そもそも「ポインターイベント」って何？
「ポインター」という言葉を聞くと、プレゼンで使う指示棒を思い浮かべるかもしれませんね。Webの世界では、マウスのカーソルや、スマホの指先がこれに当たります。
`pointer-events` というのは、「この要素は、マウスや指の動きをどう受け止めますか？」という設定のこと。
例えるなら、「ショーケースの中に飾られたケーキ」のようなものです。ガラス越しに見えているけれど、直接触れることはできませんよね。あの「触れられないけれど、そこにある」状態をWebで作れるんです。
こんな時に便利！「無効化」の実用例
では、どんなシーンで活躍するのでしょうか。よくある3つのパターンを見てみましょう。
1. フォームの送信ボタンを「連打禁止」にする時
「送信」ボタンを押した瞬間、何度も押せてしまうとサーバーに負荷がかかりますよね。そんな時、JSで処理を走らせるのと同時に、CSSでポチッと無効化してあげると安心です。
2. コンテンツの上に重なる「オーバーレイ」
モーダルウィンドウ（画面中央にフワッと出るお知らせなど）の背景に、薄いフィルターをかけることがありますよね。そのフィルターが邪魔で下のボタンが押せなくなったら困る…という時、フィルター側にこの設定を入れると、フィルターは存在しつつ、クリックだけ下の要素へスルーさせることができます。
3. テキストの一部だけ装飾したい時
``タグの中にアイコンを入れた時、そのアイコンだけクリックしたくない、といった微調整にも役立ちます。
コードで見てみよう
実際にどう書くのか、シンプルなコードで確認してみましょう。
/ リンクを無効化するクラス /
.is-disabled {
/ これが魔法の呪文！ /
pointer-events: none;
/ 見た目も「押せなさそう」にすると親切ですよね /
opacity: 0.5; / 少し薄くする /
cursor: default; / カーソルを通常矢印に戻す /
}
HTML側はこんな感じです。
注意点：知っておくと安心なポイント
「じゃあ、全部これを使って無効化すればいいじゃん！」と思われたかもしれませんが、ひとつだけ注意点があります。
`pointer-events: none` を使うと、「その要素をすり抜けて下の要素が反応してしまう」ことがあります。
先ほどの「ショーケースのケーキ」の例で言うと、ケーキ自体を触れないようにしたつもりでも、実はケーキをすり抜けて、その下のテーブルを触れてしまうイメージです。
もし「リンクを無効化した上で、カーソルも反応させたくない」という場合は、CSSでしっかりと `cursor: default` を添えてあげると、ユーザーが「あ、今は押せないんだな」と直感的に理解してくれるので、より優しいWebサイトになりますよ。
まとめ
`pointer-events: none` は、Web開発という料理における「隠し味」のようなもの。
- クリックさせたくない時は、魔法のCSSを一行足すだけ
- 「見た目」と「動作」を切り離して考えられるようになる
- ユーザーに「押せないこと」を視覚的に伝えるのがプロの技
最初は難しく感じるかもしれませんが、使っているうちに「ここはこれを使えば解決できるな！」とパズルのピースがハマるように分かる瞬間が必ず来ます。
もし詰まってしまったら、いつでもこの記事に戻ってきてくださいね。あなたは一人じゃないですよ！一緒に、心地よいWebサイトを作っていきましょう。
コメント