【初心者向けCSS】UI向上のひと工夫に。「pointer-events: none;」

お疲れ様です！るーぷのコーダー、三木です。

最近体調不良で体重が10%OFFになりました！
お得ですね！やったぜ！！！！！

…ということですみません。今回のブログは手短に済ませますね…

今回のテーマ

今回は”超”初心者の時にちょっとパニックになった事象について振り返ろうと思います。

それでは、下の画像をご覧ください。

サイトを制作中、「あら？ボタンが押せねぇですわ…？」という状況が起こりました。
この場合の原因は至極単純で、背景色が透明なヘッダーが覆い被さっているからボタンが押せないんですね。

他にもコーディング中に意識しきれなかった事例はあります。

この画像の場合は、右下の「ページトップへ戻る」ボタンを配置するひと工夫として、更にdivで囲んでいたため透明な要素が覆い被さってしまいました。

【解決策】pointer-events: none;

CSSで「pointer-events: none;」をあてると、その要素は”クリックできなく”なります。

例えば電話番号のテキストを、スマホの画面幅時のみクリックできるようにしたいので、

といった使い方をよくします。

はじめの例で出した背景色透明のヘッダーの場合は、
ヘッダーに「pointer-events: none;」を指定すると、ヘッダーはクリックできずにz軸上で後ろにある要素がクリックできるようになります。

ただし↑だけでは、headerの中のロゴやナビも押せなくなるので…

このように、クリックできないと困る要素は初期値にするのを忘れない様にしましょう。

実際に使用した制作事例

最後に、「pointer-events: none;」を使用した制作事例をご紹介します。

①沖縄金魚ミュージアム様

https://okinawakingyomuseum.com/

沖縄金魚ミュージアム様のサイトはまさにヘッダーが透明です。
特にトップページではZONE紹介のセクションをはじめクリックできる要素がたくさんあるため、ヘッダーに「pointer-events: none;」を適用しました。

②株式会社なつめ農園様

https://www.natsume0729.co.jp/

株式会社なつめ農園様のサイトでは、メインビジュアルがスライドになっており且つロゴが固定されています。

スライドは自動で流れていきますが、ドラッグやスワイプでも動かせる仕様です。
そして、ロゴはずっと固定されています。

そのままでは画像をスライドしようとドラッグする際に、ロゴをクリックしてしまうことが多々あったため、
ロゴに「pointer-events: none;」を適用しました。

おわりに

今回ご紹介した様な「クリックできない」という状況は、
邪魔をしてしまっている要素が”透明”であることがほとんどなため、特に初心者のうちは気が回らない箇所です。

何度も例に出した「背景色が透明なヘッダー」ですらも画面の一番上100px前後の非常に狭い領域なため、
動作チェック中でも「後ろの要素がクリックできない」ことに気づくことは、意外と難しいです。
よく注意して、小さな気配りが行き届いたサイト制作を目指しましょう！

以上です！