ほんっとにはじめてのHTML5とCSS3：【53】キャレットの色を変えられる caret-colorプロパティ

【53】キャレットの色を変えられる caret-colorプロパティ

最終更新日：2020年03月01日　（初回投稿日：2020年03月01日）

caret-colorプロパティは、名前の通り、キャレットの色を指定します。

「キャレット」とは、テキスト入力時に入力位置を示すもの。
たいていは、縦のラインで点滅しています。

CSS Basic User Interface Module Level 3 ではこのcaret-colorプロパティだけですが、草案中の Level 4 では、caret-shapeプロパティ（キャレットの形状）も加わり、caretショートハンドプロパティも追加されています。将来これらのプロパティ構成になるっぽいです。

本日のINDEX

参考：
・CSS Basic User Interface Module Level 3 (CSS3 UI) | W3C Recommendation
・caret-color - CSS | MDN

caret-colorプロパティの値

caret-colorプロパティは「色」を指定するので「CSS の色指定」のルールを使います。
CSS の色指定については、
[14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）をご覧ください。

caret-colorプロパティの値
キーワード	auto transparent currentColor autoがデフォルト値。たいていは currentColor（文字色）が使われますが、背景色などによってブラウザが調整することもあるそうです。その他のキーワードは、transparent（=透明色）、currentColor（=文字色）
CSSの色指定	CSSの色指定のルールで指定します。

値の継承	する	適用できる要素	すべての要素

caret-colorプロパティの指定サンプル

caret-colorプロパティでキャレットの色を変えてみたサンプルです。
テキストエリア内をクリック（またはタップ）してみてください。

サンプルのソースコードはこちら。
caret-colorプロパティはインラインで指定しています。

<textarea>caret-color: 指定なし（= auto）</textarea>
<textarea style="caret-color:red;">caret-color: red</textarea>
<textarea style="caret-color:#5ad21e;">caret-color: #5ad21e</textarea>

次回予告

次回は、::selection 疑似要素 についてちょっとメモ。
この疑似要素を使って作ったセレクタで、テキストの選択時にできる「ハイライトカラー」などを変更できます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。