From d54b0e0f0a7aa80f4bb20fbdab8ee03a381c4ea2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:38:00 +0900 Subject: .html を .md に改名 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/user-select/index.html | 151 -------------------------------- files/ja/web/css/user-select/index.md | 151 ++++++++++++++++++++++++++++++++ 2 files changed, 151 insertions(+), 151 deletions(-) delete mode 100644 files/ja/web/css/user-select/index.html create mode 100644 files/ja/web/css/user-select/index.md (limited to 'files/ja/web/css/user-select') diff --git a/files/ja/web/css/user-select/index.html b/files/ja/web/css/user-select/index.html deleted file mode 100644 index 9bd2ff1c44..0000000000 --- a/files/ja/web/css/user-select/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: user-select -slug: Web/CSS/user-select -tags: - - CSS - - CSS Property - - Property - - Reference - - Selection - - 'recipe:css-property' - - user-select -translation_of: Web/CSS/user-select ---- -
{{CSSRef}}
- -

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

- -
/* キーワード値 */
-user-select: none;
-user-select: auto;
-user-select: text;
-user-select: contain;
-user-select: all;
-
-/* グローバル値 */
-user-select: inherit;
-user-select: initial;
-user-select: unset;
-
-/* Mozilla 特有の値 */
--moz-user-select: none;
--moz-user-select: text;
--moz-user-select: all;
-
-/* WebKit 特有の値 */
--webkit-user-select: none;
--webkit-user-select: text;
--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 はこの問題を修正し、最終的な動作が仕様書に合うようにすることを選択しています。

-
- -

構文

- -
-
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 に名称が変わります。

-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

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

CSS

- -
.unselectable {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.all {
-  -moz-user-select: all;
-  -webkit-user-select: all;
-  -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")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/user-select/index.md b/files/ja/web/css/user-select/index.md new file mode 100644 index 0000000000..9bd2ff1c44 --- /dev/null +++ b/files/ja/web/css/user-select/index.md @@ -0,0 +1,151 @@ +--- +title: user-select +slug: Web/CSS/user-select +tags: + - CSS + - CSS Property + - Property + - Reference + - Selection + - 'recipe:css-property' + - user-select +translation_of: Web/CSS/user-select +--- +
{{CSSRef}}
+ +

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

+ +
/* キーワード値 */
+user-select: none;
+user-select: auto;
+user-select: text;
+user-select: contain;
+user-select: all;
+
+/* グローバル値 */
+user-select: inherit;
+user-select: initial;
+user-select: unset;
+
+/* Mozilla 特有の値 */
+-moz-user-select: none;
+-moz-user-select: text;
+-moz-user-select: all;
+
+/* WebKit 特有の値 */
+-webkit-user-select: none;
+-webkit-user-select: text;
+-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 はこの問題を修正し、最終的な動作が仕様書に合うようにすることを選択しています。

+
+ +

構文

+ +
+
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 に名称が変わります。

+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

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

CSS

+ +
.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.all {
+  -moz-user-select: all;
+  -webkit-user-select: all;
+  -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")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf