コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

CSS色指定で地獄を見た人は絶対使うべし!currentColorで色をまとめてキレイに統一する3つの裏技

Master Consistent Styles with CSS currentColor: 3 Powerful Use Cases

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。


currentColorを使ってCSSの色のスキームを一貫して維持するのに苦労していませんか?currentColorは、定義を繰り返す必要がなくコードを簡素化するのに役立ちます。このアーティクルでは、ボーダー、テキスト、背景など、3つの強力な使用例を探ります。

構文

currentColorキーワードは、要素のcolorプロパティの現在の値を保持する変数です。

.mycontainer {
  color: blue;
  border: 10px solid currentcolor;
}

使用例1: 簡単に一貫性を保つ

白い背景のボタンがあり、テキストとボーダーの色を同じにしたいとします。従来は、両方のプロパティで同じ黒色を定義する必要がありました。しかし、ボーダー色にcurrentColorを使えば、テキスト色が変更されてもボーダー色がテキスト色に合わせて変更されるので、デザインの保守性が高まり、視覚的な一貫性が保たれます。

例:

.container {
  color: #FF0000; /* Red text color */
}
.container p {
  border: 1px solid currentColor; /* Border color matches text color */
}

使用例2: 様々なテーマに対応

ライトテーマとダークテーマのデザインシステムを作る際、色が異なるスタイルを重複して記述する必要がありました。currentColorとCSS変数を組み合わせれば救われます:

:root {
  --primary-color: blue; /* Define your base colour */
}
.my_element {
  color: currentColor; /* Inherits from --primary-color */
  border-color: currentColor; /* Inherits from --primary-color */
}

使用例3: シームレスなホバー効果の反転

テキストが明るい背景で暗くなり、暗い背景で明るくなるホバー効果の反転は一般的なデザインパターンです。従来は別のホバー色を定義する必要がありましたが、currentColorを使えば動的に実現できます:

.button {
  background-color: #333;
  color: lightyellow;
}
 
.button:hover {
  background-color: lightyellow;
  color: currentColor; /* Inverts to #333 on hover */
}

currentColorをCSSに取り入れることで、色のスキームの一貫性を簡単に維持でき、適応力の高いデザインを作れます。currentColorの力を解放して、よりストリームラインされた効率的なワークフローを体験しましょう! 幸せなコーディングを!

©コハム