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

CSSのpointer-eventsプロパティでマウス・タッチ操作を制御する方法

CSSのpointer-eventsプロパティを使うと、要素に対してマウスやタッチによるポインター操作を許可するかどうかを細かく制御できます。リンクやボタンを一時的に無効化したい場合、オーバーレイの下にある要素をクリック可能にしたい場合などに非常に便利なプロパティです。

pointer-eventsプロパティの構文

pointer-events: auto|none;

主な値の説明

  • auto（デフォルト値）： 要素は通常どおりポインターイベントに反応します。クリック、ホバー、タップなどの操作が有効になります。
  • none: 要素はポインターイベントに一切反応しなくなります。クリックやタップが無効化され、背後にある要素がイベントを受け取れるようになります。

例1： リンクへの適用

以下の例では、2つのリンクのうち1つ目にはpointer-events: noneを、2つ目にはpointer-events: autoを設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
a {
    margin: 10vh;
    pointer-events: none;
}
a:last-of-type {
    pointer-events: auto;
}
</style>
</head>
<body>
<a href=#>ここではポインターイベント無効</a>
<a href=#>ここではポインターイベント有効</a>
</body>
</html>

出力結果

このコードを実行すると、1つ目のリンクはクリックできずカーソルも変化しませんが、2つ目のリンクは通常どおりクリックできます。

CSSのpointer-eventsプロパティでマウス・タッチ操作を制御する方法

例2： セレクトボックスへの適用

次の例では、<select>要素にpointer-events: noneを設定し、ドロップダウン操作を無効化しています。

<!DOCTYPE html>
<html>
<head>
<style>
select {
    margin: 10vh;
    pointer-events: none;
    background-color: mistyrose;
}
</style>
</head>
<body>
<select>
<option>ここではイベント無効 </option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</body>
</html>

出力結果

セレクトボックスは表示されますが、クリックしてもドロップダウンリストは開きません。

CSSのpointer-eventsプロパティでマウス・タッチ操作を制御する方法

まとめ

pointer-eventsプロパティは、要素のインタラクションを簡単にオン・オフできる便利なCSS機能です。noneを指定すればクリックやタッチを完全に無効化でき、JavaScriptを使わずにUIの挙動を制御できます。モーダル表示中の背景操作防止や、装飾用オーバーレイ要素のクリックスルーなど、さまざまな場面で活用できます。

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

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります

  2. CSSのappearanceプロパティを使ったカスタムチェックボックスの作り方

    CSSのappearanceプロパティは、要素をユーザーのOSネイティブなスタイルに合わせて表示したり、逆にデフォルトの外観を無効化して独自のデザインを適用したりできる便利なプロパティです。この記事では、appearance: none;を活用して、チェックボックスを自由にカスタマイズする方法を解説します。appearanceプロパティとは通常、チェックボックスやラジオボタンなどのフォーム部品は、ブラウザやOSが提供する標準的な見た目で表示されます。appearanceプロパティにnoneを指定すると、このデフォルトスタイルを解除できるため、背景色・角丸・影などを自由に設定したオリジナルデザイ