【初心者向け】CSSで要素のインタラクションを自在に操る！pointer-eventsプロパティの使い方
値
「pointer-events」プロパティには、以下の11個の値があります。
- unset
プロパティをデフォルト値にリセットします。 - inherit
親要素の「pointer-events」プロパティ値を継承します。 - visibleStroke
要素とその子要素が、描画された境界線のみが可視である場合にのみ、すべてのポインターイベントと対話します。塗りつぶしと透過領域はイベントを検出できません。 - visibleFill
要素とその子要素が、塗りつぶしのみが可視である場合にのみ、すべてのポインターイベントと対話します。描画された境界線と透過領域はイベントを検出できません。 - visiblePainted
要素とその子要素が、塗りつぶしと描画された境界線のみが可視である場合にのみ、すべてのポインターイベントと対話します。透過領域はイベントを検出できません。 - visible
要素とその子要素が、塗りつぶし、描画された境界線、または透過領域にかかわらず、すべてのポインターイベントと対話します。これがデフォルトの動作です。 - stroke
要素の描画された境界線のみがポインターイベントと対話します。塗りつぶしと子要素はイベントを検出できません。 - fill
要素の塗りつぶしのみがポインターイベントと対話します。描画された境界線と子要素はイベントを検出できません。 - painted
要素の塗りつぶしと描画された境界線のみがポインターイベントと対話します。要素の透過部分や子要素はイベントを検出できません。 - none
要素は、すべてのポインターイベントを無視します。つまり、クリック、ホバー、ドラッグなどのアクションは、この要素に対して無効になります。 - auto (初期値)
要素は、そのコンテンツとブラウザのデフォルト設定に従って、すべてのポインターイベントと対話します。
例
以下の例は、「#myElement」というIDを持つ要素をクリックできなくします。
#myElement {
pointer-events: none;
}
以下の例は、「#myElement」というIDを持つ要素の塗りつぶし部分のみがクリックできるようにします。
#myElement {
pointer-events: fill;
}
応用例
「pointer-events」プロパティは、様々な場面で役立ちます。以下はその例です。
- 視覚効果の作成
要素の一部のみをインタラクティブにすることで、興味深い視覚効果を作成することができます。 - アクセシビリティの向上
特定のユーザーにとって不要または邪魔になる可能性のある要素を無効化することで、アクセシビリティを向上させることができます。 - ドラッグ可能な要素の作成
要素をドラッグ可能にするには、「pointer-events: auto;」を設定する必要があります。 - UI階層の制御
ボタンの上に画像を配置したい場合、画像を「pointer-events: none;」に設定することで、ボタンのみがクリックできるようにすることができます。
- 「pointer-events」プロパティは、要素の子要素にも影響を与えることに注意してください。特定の子要素のみを無効化したい場合は、より具体的なセレクターを使用する必要があります。
- 「pointer-events」プロパティは、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザでは、互換性のためにベンダープレフィックス（-webkit-、-moz-、など）が必要となる場合があります。
<div class="container">
<img src="image.png" alt="画像">
<button>ボタン</button>
</div>
.container {
position: relative;
}
.container img {
width: 200px;
height: 150px;
}
.container button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
上記のコードでは、画像に「pointer-events: none;」を設定することで、クリックイベントを無効化しています。
例2：ドラッグ可能な要素の作成
この例では、div要素をドラッグ可能にします。
<div id="draggable">ドラッグしてください</div>
#draggable {
width: 100px;
height: 100px;
background-color: #ccc;
cursor: grab;
}
#draggable:active {
cursor: grabbing;
}
上記のコードでは、「#draggable」要素に「pointer-events: auto;」を設定することで、ドラッグイベントを有効化しています。
例3：アクセシビリティの向上
この例では、視覚障害者向けのスクリーンリーダーが読み上げない隠しテキストを含むボタンを作成します。
<button>ボタン <span class="sr-only">このボタンをクリックすると、アクションが実行されます。</span></button>
.sr-only {
display: none; /* 画面に表示されない */
position: absolute; /* 画面外に配置 */
height: 0; /* 高さを0にする */
width: 0; /* 幅を0にする */
overflow: hidden; /* コンテンツを隠す */
pointer-events: none; /* ポインターイベントを無効化 */
}
上記のコードでは、「.sr-only」クラスに「pointer-events: none;」を設定することで、スクリーンリーダーがボタンをクリックできないようにしています。
例4：視覚効果の作成
この例では、半透明の画像の上にテキストを重ね、画像の一部のみをクリックできるようにします。
<div class="container">
<img src="image.png" alt="画像">
<p class="text">テキスト</p>
</div>
.container {
position: relative;
}
.container img {
width: 200px;
height: 150px;
opacity: 0.5;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.container p:hover {
pointer-events: auto;
}
上記のコードでは、「.container p」要素に「pointer-events: none;」を初期設定し、マウスホバー時に「pointer-events: auto;」に変更することで、テキスト部分のみをクリックできるようにしています。
これらの例は、ほんの一例です。「pointer-events」プロパティを駆使することで、様々なクリエイティブなデザインを実現することができます。
代替手段の選択
「pointer-events」の代替手段を選択する際には、以下の要素を考慮する必要があります。
- コードの簡潔性
代替手段は簡潔で分かりやすいものである必要があります。 - アクセシビリティ
代替手段がアクセシビリティ要件を満たしていることを確認する必要があります。 - ブラウザサポート
使用しているすべてのブラウザで代替手段が確実に機能する必要があります。 - 目的
達成したい目的は何ですか？要素を完全に非インタラクティブにするのか、特定のイベントのみを無効化するのか？
代替手段の例
以下に、「pointer-events」の代替手段として考えられるいくつかの方法をご紹介します。
opacity プロパティ
#myElement {
opacity: 0;
}
z-index プロパティ
「z-index」プロパティを使用して、要素を他の要素の下に配置することで、その要素をクリックできないようにすることができます。ただし、この方法は、要素が完全に非表示にならないという欠点があります。
#myElement {
z-index: -1;
}
display プロパティ
「display」プロパティを使用して、要素を「none」に設定することで、その要素を完全に非表示にすることができます。この方法は、要素を完全に非インタラクティブにする必要がある場合に有効です。
#myElement {
display: none;
}
JavaScript
JavaScriptを使用して、ポインターイベントを検出して処理することもできます。この方法は、より柔軟な制御が可能ですが、複雑さも増します。
const element = document.getElementById('myElement');
element.addEventListener('pointerdown', (event) => {
event.stopPropagation();
});
注意点
上記で紹介した代替手段にはそれぞれ長所と短所があります。どの方法が最適かは、状況によって異なります。適切な代替手段を選択するには、上記の要素を慎重に検討する必要があります。