From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/caret-color/index.html | 124 ++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 files/ja/web/css/caret-color/index.html (limited to 'files/ja/web/css/caret-color') diff --git a/files/ja/web/css/caret-color/index.html b/files/ja/web/css/caret-color/index.html new file mode 100644 index 0000000000..9ec9500f78 --- /dev/null +++ b/files/ja/web/css/caret-color/index.html @@ -0,0 +1,124 @@ +--- +title: caret-color +slug: Web/CSS/caret-color +tags: + - CSS + - CSS プロパティ + - CSS 基本ユーザーインターフェイス + - HTML 整形 + - HTML 色 + - Reference + - contenteditable + - テキスト編集 + - 入力 + - 編集 +translation_of: Web/CSS/caret-color +--- +
{{CSSRef}}
+ +

CSS の caret-color プロパティは、 {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中ので、次に入力された文字が挿入される位置を示す視覚的なマーカーである入力キャレットの色を設定します。キャレットは {{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;
+
+/* <color> 値 */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);
+
+ +

値

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

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

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

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

HTML

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

CSS

+ +
input {
+  caret-color: auto;
+  display: block;
+  margin-bottom: .5em;
+}
+
+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}}

+ +

ブラウザーの対応

+ + + +

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

+ +

関連情報

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