From a95b39b8c86b4ef5a236125db9ec1aa3ccc7e225 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 16 Aug 2021 13:01:33 +0900 Subject: Web/CSS/caret-color を更新 (#1977) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/07 時点の英語版に同期 --- files/ja/web/css/caret-color/index.html | 97 ++++++++++++++++----------------- 1 file changed, 46 insertions(+), 51 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/caret-color/index.html b/files/ja/web/css/caret-color/index.html index 531e02d875..13be6a4506 100644 --- a/files/ja/web/css/caret-color/index.html +++ b/files/ja/web/css/caret-color/index.html @@ -3,68 +3,81 @@ title: caret-color slug: Web/CSS/caret-color tags: - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - - HTML 整形 - - HTML 色 + - CSS Property + - CSS User Interface + - Editing + - HTML Colors + - Input - Reference + - Styling HTML + - Text Editing + - caret + - caret-color - contenteditable - - テキスト編集 - - 入力 - - 編集 + - 'recipe:css-property' +browser-compat: css.properties.caret-color translation_of: Web/CSS/caret-color ---
{{CSSRef}}
-

CSS の caret-color プロパティは、 {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中ので、次に入力された文字が挿入される位置を示す視覚的なマーカーである入力キャレットの色を設定します。キャレットは {{HTMLElement("input")}} 要素や {{htmlattrxref("contenteditable")}} 属性が付いた要素に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。

+

caret-color は CSS のプロパティで、次に入力された文字が挿入される位置を示す可視マーカーである入力キャレットの色を設定します。これはテキスト入力カーソルと呼ばれることもあります。キャレットは {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。

{{EmbedInteractiveExample("pages/css/caret-color.html")}}
- -

なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 {{cssxref("cursor")}} プロパティが auto のときにテキスト上に移動した場合や、 cursor プロパティが text または vertical-text の場合に、キャレットのように見えることがありますが、キャレットではありません (カーソルです)。

-

構文

+

構文

/* キーワード値 */
 caret-color: auto;
 caret-color: transparent;
-caret-color: currentColor;
+caret-color: currentcolor;
 
 /* <color> 値 */
 caret-color: red;
 caret-color: #5729e9;
 caret-color: rgb(0, 200, 0);
 caret-color: hsla(228, 4%, 24%, 0.8);
-
-

値

+/* グローバル値 */ +caret-color: inherit; +caret-color: initial; +caret-color: revert; +caret-color: unset; + +

値

auto
-
ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、ユーザーエージェントは視認性や周囲のコンテンツとのコントラストを高めるために、 currentcolor、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。 +
ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、視認性や周囲のコンテンツとのコントラストを高めるために、ユーザーエージェントが currentcolor、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。
-

メモ: ユーザーエージェントは auto の値に currentcolor (通常はアニメーション可能) を使用することがありますが、 auto はトランジションやアニメーションで補完されません。

+

メモ: ユーザーエージェントは auto の値に currentcolor (通常はアニメーション可能) を使用することがありますが、 auto はトランジションやアニメーションでは補完されません。

{{cssxref("<color>")}}
キャレットの色です。
-

形式文法

+

公式定義

+ +

{{cssinfo}}

+ +

形式文法

{{csssyntax}} -

例

+

例

-

HTML

+

独自のキャレット色の設定

-
<input value="この入力欄は既定のキャレットを使用します。" size="64"/>
-<input class="custom" value="キャレットが独自の色です！" size="64"/>
+
HTML

+
+
<input value="このフィールドは既定のキャレットを使用します。" size="64"/>
+<input class="custom" value="キャレットが独自の色になります！" size="64"/>
 <p contenteditable class="custom">この段落は編集可能であり、
    同様にキャレットが独自の色です！</p>

 
-
CSS

+
CSS

 
 
input {
   caret-color: auto;
@@ -76,47 +89,29 @@ input.custom {
   caret-color: red;
 }
 
-
 p.custom {
   caret-color: green;
 }

 
-
結果

-
-
{{EmbedLiveSample('Example', 500, 200)}}

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}{{Spec2("CSS3 UI")}}初回定義

+
結果

 
-
{{cssinfo}}

+
{{EmbedLiveSample('Setting_a_custom_caret_color', 500, 200)}}

+
+
仕様書

+
+{{Specifications}}
 
-
ブラウザーの対応

+
ブラウザーの互換性

 
-
{{Compat("css.properties.caret-color")}}

+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
-- 
cgit v1.2.3-54-g00ecf


From d1c7d94d2464f8b52a14a7f2a90ab41a2fc1cce0 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 16 Aug 2021 13:01:50 +0900
Subject: Web/CSS/column-rule を更新 (#1978)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 2021/07/04 時点の英語版に同期
---
 files/ja/web/css/column-rule/index.html | 76 ++++++++++++++-------------------
 1 file changed, 33 insertions(+), 43 deletions(-)

(limited to 'files/ja/web/css')

diff --git a/files/ja/web/css/column-rule/index.html b/files/ja/web/css/column-rule/index.html
index cc1879d559..768c36a8d8 100644
--- a/files/ja/web/css/column-rule/index.html
+++ b/files/ja/web/css/column-rule/index.html
@@ -3,16 +3,11 @@ title: column-rule
 slug: Web/CSS/column-rule
 tags:
   - CSS
+  - CSS Multi-column Layout
   - CSS Property
-  - CSS プロパティ
-  - CSS 段組みレイアウト
-  - column-rule
-  - column-rule-color
-  - column-rule-style
-  - column-rule-width
-  - リファレンス
-  - 一括指定プロパティ
-  - 段組み
+  - Reference
+  - 'recipe:css-property'
+browser-compat: css.properties.column-rule
 translation_of: Web/CSS/column-rule
 ---
 
{{CSSRef}}

@@ -21,15 +16,13 @@ translation_of: Web/CSS/column-rule
 
 
{{EmbedInteractiveExample("pages/css/column-rule.html")}}

 
-
-
 
これは一括指定プロパティであり、一回の便利な宣言で個別の column-rule-* プロパティ ({{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, {{Cssxref("column-rule-color")}}) を設定できます。

 
 

 
メモ: 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。

 

 
-
構文

+
構文

 
 
column-rule: dotted;
 column-rule: solid 8px;
@@ -39,43 +32,48 @@ column-rule: thick inset blue;
 /* グローバル値 */
 column-rule: inherit;
 column-rule: initial;
+column-rule: revert;
 column-rule: unset;
 

 
-
column-rule プロパティは、以下に挙げる値のうち1から3つを任意の順序で指定します。

+
column-rule プロパティは、以下に挙げる値のうち 1 ～ 3 個を任意の順序で指定します。

 
-
値

+
値

 
 

  
<'column-rule-width'>

- 
{{cssxref("<length>")}} または3つのキーワード、 thin, medium, thick のうちの1つです。詳しくは {{cssxref("border-width")}} を参照してください。

+ 
{{cssxref("<length>")}} または 3 つのキーワード、 thin、medium、thick のうちの 1 つです。詳しくは {{cssxref("border-width")}} を参照してください。

  
<'column-rule-style'>

  
有効な値と詳細は {{cssxref("border-style")}} を参照してください。

  
<'column-rule-color'>

  
{{cssxref("<color>")}} 値です。

 

 
-
形式文法

+
公式定義

+
+
{{cssinfo}}

+
+
形式文法

 
 {{csssyntax}}
 
-
例

+
例

 
-
例1

+
例 1

 
-
/* "medium dotted currentColor" と同じ */
+
/* "medium dotted currentcolor" と同じ */
 p.foo { column-rule: dotted; }
 
 /* "medium solid blue" と同じ */
 p.bar { column-rule: solid blue; }
 
-/* "8px solid currentColor" と同じ */
+/* "8px solid currentcolor" と同じ */
 p.baz { column-rule: solid 8px; }
 
 p.abc { column-rule: thick inset blue; }
 

 
-
例2

+
例 2

 
 
HTML

 
@@ -97,31 +95,23 @@ p.abc { column-rule: thick inset blue; }
 }
 

 
-
結果

+
結果

 
 
{{EmbedLiveSample('Example_2')}}

 
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}}初回定義

+
仕様書

 
-
{{cssinfo}}

+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

 
-
ブラウザーの対応

+
関連情報

 
-
{{Compat("css.properties.column-rule")}}

+
    
+ 
  • 段組みレイアウト
    • 
+ 
  • {{CSSXref("column-rule-style")}}
    • 
+ 
  • {{CSSXref("column-rule-width")}}
    • 
+ 
  • {{CSSXref("column-rule-color")}}
    • 
+

-- 
cgit v1.2.3-54-g00ecf