お疲れ様です！るーぷのコーダー、三木です。

今回もいつも通りWeb制作初心者向けに、ちょっと便利なCSSプロパティをご紹介します！

ボタンなどに使用しているアイコンの色を変更したいとき、色違いのアイコンを用意していないでしょうか？
実はCSSだけで、画像として用意したSVGアイコンの色を変更できます。

今回のテーマ

例えば、Webサイトでよく「会社概要 →」のようなページ遷移するためのボタンがあると思います。
矢印の部分は、通常のテキストでは再現しにくいデザインもあるので、SVG画像を使用することがよくあります。
通常なら、aタグにテキストを入れたあと、擬似要素でアイコンを入れるので、以下のようなCSSになります。


.link_btn::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url(../img/cmn/arrow.svg) no-repeat center / contain;
  position: absolute;
  right: 1em;
  top: calc(50% - .5em)
}

これで矢印を表示します。
しかしここで、私が初心者のころ困ったことがありました。
それが、ボタンをホバーしたときに背景色と文字色を変更する場合です。
矢印も一緒に色を変更したいので、


.link_btn:hover::after {
  background-image: url(../img/cmn/arrow-black.svg);
}

というように、色違いのSVG画像をホバー時だけ表示すればOK。とも言えないケースがありました。

それが、transitionをかけているとき。つまり、色を瞬時にではなく、0.4秒ぐらいで滑らかに変化させたいときです。
文字色や背景色には「transition」を指定しているのに、矢印だけはパッと切り替わってしまいます。

実際にみるとこんな感じです。

【解決策】mask-imageを使う

そこでおすすめしたいのが、CSSの「mask-image」です。
mask-imageは、簡単に説明すると、pngやsvg画像の形に合わせて要素を切り抜くことができるプロパティです。

まず、先ほどのCSSを以下のように書き換えます。


.link_btn::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  /* currenColorは要素の文字色 */
  mask: url(../img/cmn/arrow.svg) no-repeat center / contain;
  /* ショートハンドで書けます。url()の部分がmask-image。 */
  position: absolute;
  right: 1em;
  top: calc(50% - .5em);
  transition: .4s;/* 忘れずに。 */
}

ポイントは、以下の2つです。

① background-color: currentColor;

通常のbackground-colorではなく「currentColor」を指定しています。
これは、その要素に指定されている文字色（color）と同じ色を使用する指定です。
つまり、ボタンの文字色が黒ならアイコンも黒、白ならアイコンも白になります！

② mask-imageでSVGを指定する

今回は「mask」というショートハンドで一括指定していますが、mask-imageを使ってSVG画像を指定しています。
SVGの形状に合わせて要素が切り抜かれるため、SVG自体の色は関係ありません。
あくまで「形」だけを利用しています。
縦横1em分の大きさの四角で塗りつぶされた擬似要素が、指定したSVGの形で切り取られたとイメージしてください。

また、currentColorで擬似要素の背景色を指定しているので、ホバー時の記述は無しです！

実際の表示はこんな感じになります。

mask-imageを使うときの注意点

とても便利なmask-imageですが、いくつか注意点もあります。
まず、「画像の形に切り抜く」ことが前提なので、透過情報が含まれているsvgやpng画像、またはwebpを使いましょう。

また、今回のように疑似要素で使用する場合は、width・heightを指定して表示領域を確保する必要があります。

ちなみに、今回のコードでは載せませんでしたが、「mask」は一部古いバージョンのブラウザでベンダープレフィックスが必要です。
「-webkit-mask」と書かないと対応できない点にご注意ください。

おわりに

今回は「mask-image」を使って、SVGアイコンの色をCSSで変更する方法をご紹介しました。
私自身、初心者の頃は今回のような色の切り替わりに悩んでいたので、この方法を知ってからはmaskを頻繁に使用しています。

今回のようなボタンでの色変更。
他には、ページ上部のメインヴィジュアル（ヒーローイメージ）にいる間だけヘッダーの背景色が透明で、アイコンを見やすい色に変更しなければならない。
といったケースにおすすめです。

CSSには、今回のように知っているだけでコーディングでの表現が広がるプロパティがたくさんあります。
皆さんもぜひ、制作の中で活用してみてください！

メルマガ登録