---
title: caret (キャレット)
slug: Glossary/caret
tags:
  - Cursor
  - Glossary
  - Input
  - caret
  - insertion point
  - text cursor
  - text entry
  - text input
  - text insertion point
  - テキストカーソル
  - テキスト入力
  - テキスト挿入位置
  - 挿入位置
translation_of: Glossary/caret
---
<p><span class="seoSummary"><strong>キャレット</strong> (テキストカーソルとも呼ばれる) は、テキスト入力が挿入される場所を示すために画面に表示されるインジケーターです。</span> ほとんどのユーザーインターフェイスは、細い縦線または点滅する文字サイズの四角形を使用してキャレットを表しますが、これはさまざまです。 テキスト内のこの位置は<strong>挿入位置</strong>と呼ばれます。「キャレット」という単語は、テキストの挿入位置をマウスカーソル (マウスポインター) と区別するためのものです。</p>

<p>ウェブ上では、{{HTMLElement("input")}} 要素と {{HTMLElement("textarea")}} 要素と、{{htmlattrxref("contenteditable")}} 属性が設定されている要素の挿入位置を表すためにキャレットが使用され、要素の内容をユーザーが編集できるようにします。</p>

<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2>

<h3 id="General_knowledge" name="General_knowledge">一般知識</h3>

<ul>
 <li>Wikipedia 上の <a href="https://en.wikipedia.org/wiki/Caret_navigation">Caret navigation</a>（英語）</li>
 <li>Wikipedia 上の {{Interwiki("wikipedia", "キャレット")}}</li>
</ul>

<h3 id="CSS_related_to_the_caret" name="CSS_related_to_the_caret">キャレットに関連する CSS</h3>

<p>要素の CSS の {{cssxref("caret-color")}} プロパティを適切な {{cssxref("&lt;color&gt;")}} 値に設定することで、特定の要素の編集可能なコンテンツのキャレットの色を設定できます。</p>

<h3 id="HTML_elements_that_may_present_a_caret" name="HTML_elements_that_may_present_a_caret">キャレットを表示する HTML 要素</h3>

<p>これらの要素はテキスト入力フィールドまたはボックスを提供し、したがってキャレットを使用します。</p>

<ul>
 <li><code><a href="/ja/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
 <li><code><a href="/ja/docs/Web/HTML/Element/input/password">&lt;input type="password"&gt;</a></code></li>
 <li><code><a href="/ja/docs/Web/HTML/Element/input/search">&lt;input type="search"&gt;</a></code></li>
 <li><code><a href="/ja/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/datetime">&lt;input type="datetime"&gt;</a></code>, and <code><a href="/ja/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code></li>
 <li><code><a href="/ja/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code></li>
 <li><code><a href="/ja/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code>, and <code><a href="/ja/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code></li>
 <li>{{HTMLElement("textarea")}}</li>
 <li>{{htmlattrxref("contenteditable")}} 属性が設定された要素</li>
</ul>