コハムコハムWebクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。Cases記事は上記記事を意訳したものです。※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。currentColorを使ってCSSの色のスキームを一貫して維持するのに苦労していませんか?currentColorは、定義を繰り返す必要がなくコードを簡素化するのに役立ちます。このアーティクルでは、ボーダー、テキスト、背景など、3つの強力な使用例を探ります。構文currentColorキーワードは、要素のcolorプロパティの現在の値を保持する変数です。簡単に一貫性を保つ白い背景のボタンがあり、テキストとボーダーの色を同じにしたいとします。従来は、両方のプロパティで同じ黒色を定義する必要がありました。ボーダー色にcurrentColorを使えば、テキスト色が変更されてもボーダー色がテキスト色に合わせて変更されるので、デザインの保守性が高まり、視覚的な一貫性が保たれます。様々なテーマに対応ライトテーマとダークテーマのデザインシステムを作る際、色が異なるスタイルを重複して記述する必要がありました。シームレスなホバー効果の反転テキストが明るい背景で暗くなり、暗い背景で明るくなるホバー効果の反転は一般的なデザインパターンです。*/}currentColorをCSSに取り入れることで、色のスキームの一貫性を簡単に維持でき、適応力の高いデザインを作れます。パンくずリストの地味さに別れを。10:30Webクリエイターのコハムです。地味な事務職からWeb制作会社に転職してフリーランスになりました。キンクマハムスターと2人暮らし。3©コハム引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。