カテゴリー
お問い合わせ

【CSS】二度手間とお別れ！currentColor で作るスマートなボタンホバー演出

HTML/CSS
目次

Webサイト制作で必ずと言っていいほど実装する「テキストとアイコン（矢印など）がセットになったボタン」。 ホバーした際にボタンの背景色やテキストの色を反転させるデザインは定番ですよね。

昔は、ホバー時のスタイルを指定する際、テキストの色を変えるだけでなく、アイコン用の要素（SVGのfillや擬似要素のborderなど）に対しても、わざわざ同じ色をもう一度指定し直すという手間がかかっていました。

currentColorを使えば一発解決！
CSSの currentColor という値を使えば、その要素に指定されている color（テキストの色）の値をそのまま引き継ぐことができます！ これを活用すると、親要素のテキスト色を変えるだけで、アイコンの色も自動的に連動して変わってくれるスマートな実装が可能になります。

今回は、この currentColor を使って、コードの記述量を減らしつつ保守性も高まるモダンなボタン実装の方法をご紹介します！

デモ動作

See the Pen Untitled by mikanbako (@mikanbako) on CodePen.

実装コードの紹介

【HTML】

今回は実務でよく使われる、SVGアイコンをインラインで配置したボタンを例にします。

<a href="#" class="p-btn">
  詳しく見る
  <svg class="p-btn__icon" viewBox="0 0 24 24" width="24" height="24">
    <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
  </svg>
</a>

【CSS】

.p-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  
  /* ボタンの初期カラー設定 */
  color: #1bb4d4;
  background-color: #fff;
  border: 2px solid #1bb4d4;
  border-radius: 8px;
  
  /* ホバー時のふわっとした変化 */
  transition: color 0.3s ease-out, background-color 0.3s ease-out;
}

/* SVGアイコンにcurrentColorを適用 */
.p-btn__icon path {
  fill: currentColor;
}

/* ホバー時のスタイル変更 */
.p-btn:hover {
  color: #fff;
  background-color: #1bb4d4;
}
/* ※ホバー時の .p-btn__icon path に対する色指定は不要！ */

コードの解説・こだわったポイント

SVGの fill に currentColor を指定する

/* SVGアイコンにcurrentColorを適用 */
.p-btn__icon path {
  fill: currentColor;
}

今回の最大のポイントは、SVG内のpath要素に対して fill: currentColor; を設定する部分です。 currentColor は、「現在その要素（または親要素）に適用されている color プロパティの値を参照する」というキーワードです。

ホバー時のCSSが劇的にスッキリする！

もし currentColor を使わなかった場合、ホバー時のCSSは以下のように書かなければなりません。

/* currentColorを使わない古い書き方 */
.p-btn:hover {
  color: #fff;
  background-color: #1bb4d4;
}
.p-btn:hover .p-btn__icon path {
  fill: #fff; /* アイコンの色も個別に指定し直す必要がある😭 */
}

しかし、currentColor をあらかじめ指定しておけば、.p-btn:hover で親要素の color が #fff（白）に変わった瞬間、アイコンの色も自動的に #fff に切り替わります。

これにより、CSSの記述量が減るだけでなく、後から「やっぱりボタンの色を赤に変えよう！」となった時も、修正箇所が最小限で済むため、非常に保守性の高い（メンテナンスしやすい）コードになります。

補足：参考リンク

公式ドキュメントと対応ブラウザの情報を載せておきます！ currentColor は非常に古くからある仕様なので、IEを含むほぼ全てのブラウザで安全に使用できます。

・MDN: currentColor
・Can I Use: currentColor

まとめ

今回は、currentColor を使ってボタンのテキストとアイコンの色変化を連動させる方法をご紹介しました。

「たった一行、色指定の手間が省けるだけ」と思われるかもしれませんが、こういったボタンがサイト内に何十個も存在する際に、 コードをDRY（Don’t Repeat Yourself＝繰り返しを避ける）に保ち、「一つの変更が全体に正しく連動する仕組み」を作っておくことは、フロントエンドエンジニアにとって非常に重要な視点です。

これからも、ちょっとしたCSSの便利なプロパティを積極的に活用して、よりスマートで美しいコーディングを心がけていきます！

Prev
Next

関連記事