CSS3 から使えるようになった currentColor の使い方について紹介します.
currentColor とは
currentColor とは, CSS 上で変数のように使えるキーワードで, プロパティの値に指定することで, その要素に適応されている color と同じ値を適応してくれる便利な機能です.
.target {
color: red;
border-bottom: 1px solid currentColor; /* color で指定している色が適応される */
}
もちろん border-color 以外にも background-color や box-shadow といった色を指定する箇所にはすべて使うことができます.
サンプルプログラム
実際に適応したデモを作ってみました.
使い方のイメージが掴めればと思います.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>CSS Tips - currentColor を使ってテキストと同じ色を指定しよう</title>
<style>
body {
font-size: 13px;
background-color: #f0f0f0;
}
h1 {
font-size: 15px;
}
h2 {
font-size: 14px;
}
.btn {
border: 1px solid currentColor; /* color に指定された色が適応される */
display: inline-block;
background-color: white;
padding: 4px 8px;
border-radius: 4px;
}
.box {
box-shadow: 0px 0px 4px currentColor; /* color に指定された色が適応される */
display: inline-block;
background-color: white;
padding: 4px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>CSS Tips - currentColor を使ってテキストと同じ色を指定しよう</h1>
<div>
<h2>border</h2>
<a style='color:red;' class='btn'>テキスト</a>
<a style='color:blue;' class='btn'>テキスト</a>
<a style='color:green;' class='btn'>テキスト</a>
</div>
<div>
<h2>box-shadow</h2>
<a style='color:red;' class='box'>テキスト</a>
<a style='color:blue;' class='box'>テキスト</a>
<a style='color:green;' class='box'>テキスト</a>
</div>
</body>
</html>
さいごに
今回は currentColor の使い方について紹介しました!
こういう機能があるって知ってるとどこかしらで良い使い方が見つかるかもしれませんね.
私もまだバチッとハマる currentColor の活用方法はまだ見つけられていないので良いアイデイアや
便利な活用方法あったらコメントで教えてもらえると嬉しいです.
今後もこういった CSS Tips も少しずつ紹介していけたらと思っています.
Discussion
currentColorはSVGでよく使いますね。Zennのアイコンには、基本的に
fill="currentColor"が指定されています。みたいにしておくと、テキストとアイコンの色が合うようになるので楽なのですよね。アイコン以外では一度も使ったことがないですが…。
そんな身近なところでw
svg という発想なかったです！
確かに fill や stroke で色々と活用できそうですね。
ありがとうございます☺️
こんにちは。本文中のデモのリンク先が本記事のURLになっています。以下のrunstantプロジェクトではないかと。https://runstant.com/phi/projects/6ef9907c
ご指摘ありがとうございます!
修正しましたー!!
そのうち phina.js の記事も書いていけたらと思ってます^^ 今年こそはw
今年こそはw
私も何か書いてみたいと思います。