currentColorを使ってもっと簡単に色を指定する

コーディング

こんなことがしたいことはないでしょうか。

  • SVGの色を文字の色に合わせたい
  • 背景色を文字の色に合わせたい

愚直にやると、SVGと文字や、背景色と文字に同じ色を指定すると思います。

div {
  color: #ff0000;
  background: #ff0000;
}

もしかしたらそれ currentColor を使ったら簡単になるかもしれません。

currentColor キーワードとは

currentColor キーワードは color プロパティの値を表すキーワードです。<color> 値を受け入れるプロパティで利用できます。

例えば、color: #ff000 なら、currentColor#ff0000 になります。

<div>
  Lorem Ipsum
  <div class="child"></div>
</div>
div {
  color: #ff0000;
}
.child {
  background: currentColor;
  height: 10px;
}

ユースケース

線の色を文字の色に揃えたい

border-color プロパティの初期値は currentColor なので指定は不要です。この例だとborder-colorは #ff0000 、つまり赤色になります。

div {
  color: #ff0000;
  border: 1px solid;
}

書いても同じですね。

div {
  color: #ff0000;
  border: 1px solid currentColor;
}

SVGの色を文字の色に揃えたい

currentColorキーワードはSVGでも使えてけっこう嬉しいです。アイコンなど単純な形の場合、それを文字色に合わせたいことが多いですね。

下記の例ではまるっとSVGをHTMLに書いていますが、普通は別のファイルに切り出して、importなりincludeなりするものでしょう。そんなときに、毎回色に関するパラメータを渡すとか、都度CSSで指定するということをしなくても良くなります。

<div>
  Lorem Ipsum
  <br />
  <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg">
    <circle cx="15" cy="13.75" fill="currentColor" r="12"/>
    <path d="m4 27.75h22" fill="none" stroke="currentColor" stroke-miterlimit="10"/>
  </svg>
</div>
div {
  color: #ff0000;
}

currentColorキーワードはSVG1.0よりこれらのプロパティで利用ができます。

  • fill
  • stroke
  • stop-color
  • flood-color
  • lighting-color

テーマ機能がある場合に指定を容易にしたい

Webサイトによっては、ユーザーにカラーテーマ機能を提供することがあるでしょう。ふたつみっつのテーマしかなくて、指定する箇所も少ないのだったら、手で色を指定しても良いですが、それでもできるだけ指定する箇所は少なくしたいものです。

テーマの数が何十、何百となったり、指定すべき箇所が多くなったら、もう手に負えません。そんなときに currentColor が役に立つはずです。

実際に私が関わったプロダクトでは、ユーザーが背景色と文字色を自由に指定できる機能を作りました。黒色のSVG画像がページ内にある状態で背景色が黒色に指定されたらどうするのか? それもSVGはひとつではなく何個もあるわけです。

すべてのSVGにユーザーが指定した文字色を指定するのも良いですが、そのためのコードを書き続けるのは骨の折れる仕事です。メンテナンス性も落ちるでしょう。そこで私はSVGにcurrentColorを指定する方法を選びました。

なんども同じ色を指定していることに気がついたら currentColor キーワードが使えないか、検討してみてください。

この記事を書いた人

村田 智 @murata_s
アートディレクター/デザイナー
詳しくみる→
カテゴリー
コーディング
タグ
  • CSS
  • SVG
公開日
更新日
文字数
2,042文字
© 2004-2021 Satoshi Murata.