CSS Tips | 超実務コアCSSテクニック：カラー・背景 － currentColor活用

Web APP CSS
スポンサーリンク

currentColor は「その要素の文字色を再利用するためのキーワード」

currentColor は、
「この要素に今効いている color の値」を指す 特別な色キーワード です。

一言でいうと、
“文字色を、他のプロパティ（border・background・shadow など）でも使い回すための仕組み”。

これを知っていると、
色を1か所変えるだけで、ボーダー・アイコン・装飾線なども一緒に色が変わる
＝「メンテしやすい・壊れにくい CSS」になります。

ここから、CSS と Tailwind の両方で、
実務でよく使うパターンをかみ砕いて解説していきます。

currentColor の基本ルール

「color プロパティの値」が currentColor になる

ある要素に対して

.button {
  color: #2563eb;
}
CSS

と書いていたら、
その要素の currentColor は #2563eb になります。

そして、

.button {
  color: #2563eb;
  border: 2px solid currentColor;
}
CSS

と書くと、
ボーダーの色も自動的に #2563eb になります。

つまり、
色を1か所（color）にだけ書いておいて、他は currentColor で参照する
という設計ができるわけです。

例1：ボタンの文字色とボーダー色を連動させる

CSS 版

.btn-outline {
  color: #2563eb;                 /* ベースの色はここだけに書く */
  border: 2px solid currentColor; /* ボーダーは currentColor を参照 */
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: transparent;
}
CSS
<button class="btn-outline">
  currentColor ボタン
</button>
HTML

この状態で、もし色を変えたくなったら

.btn-outline {
  color: #16a34a;
}
CSS

と color だけ変えれば、
ボーダーも自動で緑に変わります。

「色を2か所書いて、片方だけ変え忘れる」という事故を防げるのが、
currentColor の一番おいしいところです。

Tailwind 版（考え方の応用）

Tailwind には currentColor を直接書くユーティリティはありませんが、
任意値で同じことができます。

<button class="text-sky-600 border-2 border-current px-4 py-2 rounded-full">
  currentColor ボタン
</button>
HTML

border-current が「ボーダー色 = currentColor」です。
text-sky-600 を text-emerald-500 に変えれば、
ボーダーも一緒に色が変わります。

例2：アイコン（SVG）を文字色と連動させる

CSS 版（SVG に currentColor を使う）

<button class="icon-btn">
  <svg viewBox="0 0 24 24" class="icon">
    <path d="M5 12h14" />
  </svg>
  <span>もっと見る</span>
</button>
HTML
.icon-btn {
  color: #0f172a;   /* ボタン全体の文字色 */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;  /* 線の色を currentColor に */
  stroke-width: 2;
  fill: none;
}
CSS

ボタンの color を変えるだけで、
テキストとアイコンの線色が一緒に変わります。

SVG で stroke="currentColor" や fill="currentColor" を使うのは、
実務でもかなり定番のテクニックです。

Tailwind 版

<button class="inline-flex items-center gap-2 text-slate-900">
  <svg viewBox="0 0 24 24"
       class="w-5 h-5 stroke-current">
    <path d="M5 12h14" stroke-width="2" fill="none" />
  </svg>
  <span>もっと見る</span>
</button>
HTML

stroke-current が「線色 = currentColor」です。
text-slate-900 を text-sky-600 に変えれば、
アイコンも一緒に青くなります。

例3：見出しの下線を currentColor で引く

CSS 版

.heading {
  color: #0f172a;
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-block;
  border-bottom: 3px solid currentColor;
  padding-bottom: 0.25rem;
}
CSS
<h2 class="heading">セクションタイトル</h2>
HTML

見出しの文字色を変えると、
下線の色も自動で変わります。

「見出しごとにテーマカラーを変える」ようなデザインでも、
color だけ指定すれば下線も追従してくれるので、
スタイルの重複が減ります。

Tailwind 版

<h2 class="inline-block text-xl font-bold text-emerald-600 border-b-4 border-current pb-1">
  セクションタイトル
</h2>
HTML

border-current を使うことで、
text-emerald-600 と同じ色の下線になります。

例4：バッジの枠線と文字色を連動させる

CSS 版

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #db2777;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
}
CSS
<span class="badge">NEW</span>
HTML

色を変えたいときは color だけ変えれば OK。
バッジの枠線と文字色が常に揃うので、
「色がチグハグになる」事故を防げます。

Tailwind 版

<span class="inline-flex items-center gap-1 text-pink-600 border border-current rounded-full px-2 py-[2px] text-xs">
  NEW
</span>
HTML

text-pink-600 を text-indigo-600 に変えるだけで、
枠線も一緒に色が変わります。

例5：currentColor を background に使う（アクセント用）

CSS 版

.tag {
  color: #1d4ed8;
  background: color-mix(in srgb, currentColor 12%, transparent);
  /* ↑ 対応ブラウザならこういう応用もできる */
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
}
CSS

まだ対応状況に注意が必要ですが、
color-mix() と組み合わせると、
「文字色を薄めた背景色」を作ることもできます。

よりシンプルにやるなら、

.tag {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12); /* 手書き */
}
CSS

のように書きつつ、
「将来的に color-mix に置き換える」設計もアリです。

currentColor を使うときの設計ポイント（ここが一番大事）

色は「意味のある1か所」にだけ書く

color にだけ具体的な色を書く。
border や stroke などは currentColor にする。

こうしておくと、
「このコンポーネントの色を変えたい」と思ったときに、
触るのは color だけで済みます。

Tailwind なら、
text-◯◯ を変えるだけで border-current や stroke-current が追従します。

「色が揃っていてほしいパーツ」に積極的に使う

文字＋ボーダー
文字＋アイコン
見出し＋下線
バッジの文字＋枠線

こういう「同じ色であってほしい組み合わせ」には、
currentColor を使うと CSS がとても素直になります。

コンポーネント単位で考えると威力が増す

ボタンコンポーネント
バッジコンポーネント
カードのヘッダー部分
アイコン付きリンク

こういった「再利用される UI 部品」に currentColor を仕込んでおくと、
テーマカラー変更・ダークモード対応などのときに、
色の修正範囲がぐっと減ります。

そのまま使える currentColor ベースのコンポーネント（Tailwind）

アウトラインボタン

<button class="inline-flex items-center gap-2
               text-sky-600 border-2 border-current
               rounded-full px-4 py-2 text-sm font-medium">
  <svg viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
    <path d="M5 12h14" stroke-width="2" fill="none" />
  </svg>
  詳しく見る
</button>
HTML

text-sky-600 を変えるだけで、
文字・ボーダー・アイコンの線色が全部揃って変わります。

まとめ

currentColor は、
「その要素に効いている文字色（color）を、他のプロパティから参照するためのキーワード」 です。

CSS では border: 1px solid currentColor;
SVG では stroke: currentColor; / fill: currentColor;
Tailwind では border-current / stroke-current などで同じ発想が使えます。

色を1か所に集約して、
他は currentColor で参照するようにしておくと、
「色を変えたいときにどこを直せばいいか」が明確になって、
デザインもコードもスッキリしていきます。

スポンサーリンク
タイトルとURLをコピーしました