・currentColorって何？
こんな疑問にお答えします。
CSSには「currentColor」という値が存在します。
実はこれ、colorと同じ値が使える変数みたいなものなんですよね。
知っていると便利で役立つ値です。
使い方も簡単だよ！
ということで、この記事では「currentColorで色を指定」について解説していきます！
currentColorで色を指定する使い方
目次
【解説】currentColorで色を指定する使い方【コード】
「currentColor」は簡単に言うと、同要素に使われてるcolorの値を使えるということです。
ようはcolorの値が入った変数みたいなもの。
ちなみに親要素のcolorを継承して指定することも可能です。
コード例がこちら↓
.sample {
color: #ff8800;
border: 2px solid currentColor;
}この場合「currentColor」に入る値は、「#ff8800」になります。
ちなみに先述したように、親要素のcolorを継承して使用も可能です。
<div class="parent">
<p class="parent__text">テキストです。</p>
<p class="parent__text">テキストです。</p>
</div>.parent {
color: green;
.parent__text {
border-bottom: 2px solid currentColor;
}
}この場合の「currentColor」には、親要素で指定したcolorの「green」が入ります。
こんな感じでcolorの値を簡単に使用することができます。
便利な使い方としては、colorの値と同様に色を変更したい場合ですね。
例えばボタンアニメーションとか。
.test-btn {
color: #ff8800;
border: 2px solid currentColor;
transition: color 0.5s ease;
}
.test-btn:hover {
color: #000066;
}上記コードだとボタンをホバーしたらcolorが変わりますよね。
ただ「currentColor」で指定した値も変わるので、borderの色も一緒に変更します。
コードの記述量が減りますし、colorを変更したいときの修正工数も減るため便利ですよね。
【解説】currentColorで色を指定する使い方【サンプルあり】
実際に「currentColor」を使ったサンプルを作成してみました！
See the Pen currentColorで色を指定 by jito-coder (@jito-coder) on CodePen.
<div class="test-btn">
サンプルボタン
</div>
<div class="parent">
<p class="parent__text">下線の色は親要素の色をcurrentColorを使って指定しています。下線の色は親要素の色をcurrentColorを使って指定しています。</p>
<p class="parent__text">下線の色は親要素の色をcurrentColorを使って指定しています。下線の色は親要素の色をcurrentColorを使って指定しています。</p>
</div>/* color部分以外は省略 */
.test-btn {
color: #ff8800;
border: 2px solid currentColor;
transition: color 0.5s ease;
}
.test-btn:hover {
color: #000066;
}
.parent {
color: green;
background-color: #f0f0f0;
}
.parent .parent__text {
border-bottom: 2px solid currentColor;
}colorと同じ値をボーダーに使いたいとき、親要素のcolorを使いたいときに「currentColor」が役立ちますね。
ボタンアニメーションの記述が楽になります！
【解説】currentColorで色を指定する使い方【サンプルあり】：まとめ
- 「currentColor」は同要素に使われてるcolorの値を使える
- 親要素のcolorを継承して指定することも可能
- ボタンアニメーションで使うとコードの記述量が減り、保守性も上がり便利
currentColorを使うときに参考にしてみてね！
