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') 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