From 97f6b86b98e012430a2b8622148b837701f6bda7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 28 Aug 2021 10:49:14 +0900 Subject: Web/CSS/@media/any-pointer を更新 (#2148) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Web/CSS/@media/any-pointer を更新 * 翻訳忘れの部分を修正 --- files/ja/web/css/@media/any-pointer/index.html | 105 ------------------------- files/ja/web/css/@media/any-pointer/index.md | 86 ++++++++++++++++++++ 2 files changed, 86 insertions(+), 105 deletions(-) delete mode 100644 files/ja/web/css/@media/any-pointer/index.html create mode 100644 files/ja/web/css/@media/any-pointer/index.md diff --git a/files/ja/web/css/@media/any-pointer/index.html b/files/ja/web/css/@media/any-pointer/index.html deleted file mode 100644 index 63866a9862..0000000000 --- a/files/ja/web/css/@media/any-pointer/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: any-pointer -slug: Web/CSS/@media/any-pointer -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/any-pointer ---- -
{{cssref}}
- -

CSS の any-pointer メディア特性は、ユーザーが (マウスなどの) 何かのポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べるために使用することができます。

- -
-

メモ: 第一のポインティングデバイスの正確性を調べたい場合は、代わりに pointer を使用してください。

-
- -

構文

- -

any-pointer 特性は、以下の一覧の中から一つのキーワード値で指定します。

- -
-
none
-
利用できるポインティングデバイスがありません。
-
coarse
-
正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。
-
fine
-
正確性が高いポインティングデバイスが、少なくとも一つ含まれています。
-
- -
-

メモ: 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 none はポインティングデバイスがない場合のみ一致します。

-
- -

例

- -

この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、粗いポインターを持つユーザーには大きなチェックボックスを生成します。

- -

HTML

- -
<input id="test" type="checkbox" />
-<label for="test">Look at me!</label>
- -

CSS

- -
input[type="checkbox"]:checked {
-  background: gray;
-}
-
-@media (any-pointer: fine) {
-  input[type="checkbox"] {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 15px;
-    height: 15px;
-    border: 1px solid blue;
-  }
-}
-
-@media (any-pointer: coarse) {
-  input[type="checkbox"] {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 30px;
-    height: 30px;
-    border: 2px solid red;
-  }
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.at-rules.media.any-pointer")}}

- -

関連情報

- - diff --git a/files/ja/web/css/@media/any-pointer/index.md b/files/ja/web/css/@media/any-pointer/index.md new file mode 100644 index 0000000000..3610b1d54c --- /dev/null +++ b/files/ja/web/css/@media/any-pointer/index.md @@ -0,0 +1,86 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - '@media' + - CSS + - メディアクエリー + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/any-pointer +--- +
{{cssref}}
+ +**`any-pointer`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#media_features)で、ユーザーが (マウスなどの) *何らかの*ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。 + +> **Note:** *第一の*ポインティングデバイスの正確性を調べたい場合は、代わりに [`pointer`](/ja/docs/Web/CSS/@media/pointer) を使用してください。 + +## 構文 + +`any-pointer` 特性は、以下の一覧の中から一つのキーワード値で指定します。 + +- `none` + - : 利用できるポインティングデバイスがありません。 +- `coarse` + - : 正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。 +- `fine` + - : 正確性が高いポインティングデバイスが、少なくとも一つ含まれています。 + +> **Note:** 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 `none` はポインティングデバイスがない場合のみ一致します。 + +

例

+ +この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、精度の低いポインターを持つユーザーには大きなチェックボックスを生成します。大きなチェックボックスは小さなチェックボックスよりも後に宣言されているので優先されます。 + +### HTML + +```html + + +``` + +### CSS + +```css +input[type="checkbox"]:checked { + background: gray; +} + +@media (any-pointer: fine) { + input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + width: 15px; + height: 15px; + border: 1px solid blue; + } +} + +@media (any-pointer: coarse) { + input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + width: 30px; + height: 30px; + border: 2px solid red; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`pointer` メディア特性](/ja/docs/Web/CSS/@media/pointer) -- cgit v1.2.3-54-g00ecf