pointerとhoverメディアクエリの使い方
pointerとhoverのCSSメディアクエリで入力デバイスの精度を検出します。マウス、タッチ、スタイラスの入力を区別し、適応型UIデザインを実現します。
Media Queries
詳細な説明
pointerとhoverメディア機能
これらのメディア機能により、ユーザーの主要入力デバイスの能力に基づいてUIを適応させることができます。
pointer機能
| 値 | 意味 | 典型的なデバイス |
|---|---|---|
| fine | 正確なポインティング | デスクトップ、ノートPC |
| coarse | 不正確なポインティング | スマートフォン、タブレット |
| none | ポインティングデバイスなし | キーボードのみ |
@media (pointer: coarse) {
.btn { min-height: 44px; min-width: 44px; }
}
@media (pointer: fine) {
.btn { min-height: 32px; }
}
hover機能
@media (hover: hover) {
.card:hover {
transform: translateY(-4px);
}
}
@media (hover: none) {
.card:active {
background-color: var(--accent);
}
}
実用的なガイドライン
pointer: coarseを使用してタッチターゲットを最低44px（WCAG推奨）に拡大hover: hoverでホバー依存のインタラクション（ツールチップ、ドロップダウンメニュー）を制御- タッチのみ＝モバイル、非タッチ＝デスクトップとは想定しない
ユースケース
適応型インターフェースを構築するUI開発者は、pointerとhoverクエリを使用して、モバイル向けの適切なサイズのタッチターゲットとホバーインタラクションを備えたコンパクトなデスクトップUIを作成します。