CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのpointer-eventsプロパティとは？使い方をコード例で解説

pointer-eventsプロパティとは

CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。

このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。

  • auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。
  • none：要素がポインターイベントに反応しなくなります。クリックやホバーが無効になり、背後にある要素がイベントを受け取ります。

pointer-eventsプロパティのコード例

以下は、pointer-eventsプロパティを使用したCSSのコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.pointer1 {
    font-size: 20px;
    padding: 10px;
    pointer-events: none;
}
.pointer2 {
    font-size: 20px;
    padding: 10px;
    pointer-events: auto;
}
</style>
</head>
<body>
<h1>Pointer-events property example</h1>
<div class="pointer1">
Go to <a href="https://www.wikipedia.org">wikipedia.org</a>
</div>
<div class="pointer2">
Go to <a href="https://www.google.com/">google.com</a>
</div>
<h2>Hover over the above links to see pointer events</h2>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSのpointer-eventsプロパティとは？使い方をコード例で解説

2つ目のリンク（google.com）にマウスカーソルを合わせると、ポインターが表示され、クリックも可能です。これはpointer-eventsプロパティにautoが設定されているためです。

一方、1つ目のリンク（wikipedia.org）にはnoneが設定されているため、ホバーしてもカーソルが変化せず、クリック操作も無効になります。このように、pointer-eventsプロパティを使えば、特定の要素だけを操作対象から外すことができ、オーバーレイ表示や装飾要素の配置などにも役立ちます。

  1. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>

  2. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し