このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

メディア・クエリ~“pointer”メディア・フィーチャーMedia Queries Level 4 で追加

記事Jan. 16th,2019
July 30th,2021
出力デバイスのメインの入力メカニズムがポインティング・デバイスかどうかを条件とするためのメディア・フィーチャー
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

pointer”メディア・フィーチャーについて

キーワード値(“none”、“coarse”、“fine”)
タイプ 離散型

pointer”メディア・フィーチャーは文書が出力されるデバイスの入力メカニズムがポインティング・デバイスかどうかと、ポインティング・デバイスの正確さを表すメディア・フィーチャーです。

デバイスに複数の入力メカニズムがある場合には“pointer”メディア・フィーチャーはメインの入力メカニズムのみを対象とします。どの入力メカニズムがメインの入力メカニズムとなるかはユーザー・エージェントによって判断されます。

入力メカニズムがポインティング・デバイスの場合はその正確性を表すことができます。マウスのような隣り合った小さな要素をズームせずに選択できるポインティング・デバイスは正確なポインティング・デバイス(“fine”)、タッチ・スクリーンやWiiリモコンのようなモーション・コントローラーなどの隣り合った小さな要素をズームせずに選択するのが困難なポインティング・デバイスは正確でないポインティング・デバイス(“coarse”)です。表示をズームしているか否かは結果に影響しません。

ユーザー・エージェントはアクセシビリティの理由から、ユーザーが正確にポインティング・デバイスを操作することが困難な場合に、通常は“fine”とされるポインティング・デバイスであっても“coarse”もしくは“none”として扱うことができます。

入力メカニズムごとの当てはまるの値の例

以下は“pointer”メディア・フィーチャーとhover”メディア・フィーチャーの値ごとの当てはまる入力メカニズムの例です。

pointer:nonepointer:coarsepointer:fine
hover:noneキーボード入力のみのデバイス スマートフォンのタッチ・スクリーン ペン・タブレット
hover:hover*** モーション・コントローラー マウス、タッチ・パッド

指定できる値

説明
none 出力デバイスのメインの入力メカニズムはポインティング・デバイスではない
coarse 出力デバイスのメインの入力メカニズムは正確性に制約があるポインティング・デバイス
fine 出力デバイスのメインの入力メカニズムは正確性が高いポインティング・デバイス

サンプルコード

@media all and (pointer: none) {
p.sample {
background-color: #00a497; /**/
text-decoration: underline dotted;
}
}

@media all and (pointer: coarse) {
p.sample {
background-color: #e198b4; /**/
text-decoration: underline wavy;
}
}

@media all and (pointer: fine) {
p.sample {
background-color: #fabf14; /**/
text-decoration: underline dashed;
}
}
<p class="sample">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク