📌

CSS Tips - currentColor を使ってテキストと同じ色を指定しよう

phi@rabee

2021/01/06に公開

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 も少しずつ紹介していけたらと思っています.

Rabee Tech blogPublication

Discussion

catnose

currentColorはSVGでよく使いますね。Zennのアイコンには、基本的にfill="currentColor"が指定されています。

<svg><path fill="currentColor" /></svg>

みたいにしておくと、テキストとアイコンの色が合うようになるので楽なのですよね。アイコン以外では一度も使ったことがないですが…。

phi@rabee

Zennのアイコンには、基本的にfill="currentColor"が指定されて...

そんな身近なところでw

svg という発想なかったです！
確かに fill や stroke で色々と活用できそうですね。
ありがとうございます☺️

alkn203

こんにちは。本文中のデモのリンク先が本記事のURLになっています。以下のrunstantプロジェクトではないかと。https://runstant.com/phi/projects/6ef9907c

phi@rabee

ご指摘ありがとうございます!
修正しましたー!!

そのうち phina.js の記事も書いていけたらと思ってます^^ 今年こそはw

alkn203

今年こそはw
私も何か書いてみたいと思います。