From 0ed7c371f7ff103e19b2474e8a55c02d77e3c74d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 16 Oct 2021 23:48:25 +0900 Subject: CSS 基本ユーザーインターフェイスの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/15 時点の英語版に同期 --- files/ja/web/css/user-select/index.md | 153 +++++++++++++++------------------- 1 file changed, 66 insertions(+), 87 deletions(-) (limited to 'files/ja/web/css/user-select') diff --git a/files/ja/web/css/user-select/index.md b/files/ja/web/css/user-select/index.md index 9bd2ff1c44..5334ae5976 100644 --- a/files/ja/web/css/user-select/index.md +++ b/files/ja/web/css/user-select/index.md @@ -3,19 +3,21 @@ title: user-select slug: Web/CSS/user-select tags: - CSS - - CSS Property - - Property + - CSS プロパティ + - プロパティ - Reference - Selection - - 'recipe:css-property' + - recipe:css-property - user-select +browser-compat: css.properties.user-select translation_of: Web/CSS/user-select --- -
{{CSSRef}}
+{{CSSRef}} -

user-select は CSS のプロパティで、ユーザーが文章を範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、{{Glossary("Chrome", "クローム")}}として読み込まれたコンテンツには何の影響も与えません。

+**`user-select`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ユーザーがテキストを範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、{{Glossary("Chrome", "クローム")}}として読み込まれたコンテンツには影響を与えません。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 user-select: none;
 user-select: auto;
 user-select: text;
@@ -25,6 +27,7 @@ user-select: all;
 /* グローバル値 */
 user-select: inherit;
 user-select: initial;
+user-select: revert;
 user-select: unset;
 
 /* Mozilla 特有の値 */
@@ -35,71 +38,66 @@ user-select: unset;
 /* WebKit 特有の値 */
 -webkit-user-select: none;
 -webkit-user-select: text;
--webkit-user-select: all; /* Safari では動作しません。 "none" または
+-webkit-user-select: all; /* Safari では動作しません。"none" または
                              "text" を使ってください。さもないと、
-                             <html> コンテナーで入力可能になってしまいます。 */
+                              コンテナーで入力可能になってしまいます。 */
 
 /* Microsoft 特有の値 */
 -ms-user-select: none;
 -ms-user-select: text;
 -ms-user-select: element;
-
+``` -
-

注: user-select は継承されるプロパティではありませんが、多くの場合、初期値の auto は継承されているように見えます。 WebKit/Chromium ベースのブラウザーは、仕様書に書かれている動作に従わず、このプロパティを継承するように実装しており、いくつかの問題を発生させています。現在までに、 Chromium はこの問題を修正し、最終的な動作が仕様書に合うようにすることを選択しています。

-
+> **Note:** `user-select` は継承されるプロパティではありませんが、多くの場合、初期値の `auto` は継承されているように見えます。 WebKit/Chromium ベースのブラウザーは、仕様書に書かれている動作に従わず、このプロパティを継承するように実装して*おり*、いくつかの問題を発生させています。現在までに、 Chromium は[この問題を修正し](https://chromium.googlesource.com/chromium/src/+/b01af0b296ecb855aac95c4ed335d188e6eac2de)、最終的な動作が仕様書に合うようにすることを選択しています。 + +## 構文 + +- `none` + - : 対象要素とその子孫要素の文章は範囲選択できません。 {{domxref("Selection")}} オブジェクトはこれらの要素も含むことができることに注意してください。 +- `auto` + + - : `auto` の使用値は下記のように決められます。 -

構文

- -
-
none
-
対象要素とその子孫要素の文章は範囲選択できません。 {{domxref("Selection")}} オブジェクトはこれらの要素も含むことができることに注意してください。
-
auto
-
-

auto の使用値は下記のように決められます。

- -
    -
  • ::before と ::after の擬似要素では、使用値は none になります。
    • -
  • 編集可能な要素の場合、使用値は contain になります。
    • -
  • 上記以外で、親要素の user-select の使用値が all の場合、対象要素の使用値も all になります。
    • -
  • 上記以外で、親要素の user-select の使用値が none の場合、対象要素の使用値も none になります。
    • -
  • 上記以外の場合、使用値は text になります。
    • -
-
-
text
-
ユーザーはテキストを範囲選択できます。
-
all
-
この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。
-
contain
-
要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。
-
element{{non-standard_inline}} (IE 特有のエイリアス)
-
contain と同じです。 Internet Explorer だけが対応しています。
-
- -
-

注: CSS UI 4 では、 user-select: element が contain に名称が変わります。

+ - `::before` と `::after` の擬似要素では、使用値は `none` になります。 + - 編集可能な要素の場合、使用値は `contain` になります。 + - 上記以外で、親要素の `user-select` の使用値が `all` の場合、対象要素の使用値も `all` になります。 + - 上記以外で、親要素の `user-select` の使用値が `none` の場合、対象要素の使用値も `none` になります。 + - 上記以外の場合、使用値は `text` になります。 + +- `text` + - : ユーザーはテキストを範囲選択できます。 +- `all` + - : この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。 +- `contain` + - : 要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。 +- `element`{{non-standard_inline}} (IE 特有のエイリアス) + - : `contain` と同じです。 Internet Explorer だけが対応しています。 + +> **Note:** CSS UI 4 では、 [`user-select: element` が `contain` に名称が変わります。](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05)
-

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+

例

-

HTML

+### HTML -
<p>このテキストを選択できるはずです。</p>
-<p class="unselectable">ちょっと、このテキストの選択はできませんよ！</p>
-<p class="all">一度クリックすると、このテキスト全体を選択します。</p>
-
+```html +

このテキストを選択できるはずです。

+

ちょっと、このテキストの選択はできませんよ！

+

一度クリックすると、このテキスト全体を選択します。

+``` -

CSS

+### CSS -
.unselectable {
+```css
+.unselectable {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
@@ -112,40 +110,21 @@ user-select: unset;
   -ms-user-select: all;
   user-select: all;
 }
-
- -

結果

- -

{{EmbedLiveSample("Examples")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}{{Spec2('CSS4 UI')}}初回定義。 -webkit-user-select は user-select の非推奨のエイリアスであることも定義した。
- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.user-select")}}

-
+``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -

関連情報

+## 関連情報 - +- {{Cssxref("::selection")}} 擬似要素 +- JavaScript の {{domxref("Selection")}} オブジェクト -- cgit v1.2.3-54-g00ecf