CSS 変数 – 動的でカスタマイズ可能なデザイン効果を生み出す機能は、Web 開発の分野では不可欠です。カスタム プロパティまたは CSS 変数は、この領域への手段を提供し、開発者がスタイルシート内で再利用可能な値を指定し、実行時に動的に変更できるようにします。このブログ投稿では、CSS 変数の動的な機能を強調する実践的な例を使用して CSS 変数を検討します。

CSS 変数について
スタイルシートの再利用可能な値は、CSS 変数を使用して定義し、全体で使用できます。これらは、グローバルな可用性のために、通常は :root 擬似クラス内で、 - プレフィックスとその後に続く名前を使用して宣言されます。これらの変数は、フォント、色、幅、高さなどの値を保存するために使用できます。これらの変数は、CSS コードで定義されると、他のファイル間で使用することもできます。(続きを読む)

これは CSS 変数の定義方法です:

:root {
  --main-color: #3498db;
}

この例では、-main-color という名前の変数を定義し、その値は #3498db です。これを :root 擬似クラス内で宣言しました。これにより、CSS コードのどこからでも変数にアクセスできるようになります。

CSS 変数の使用方法
定義したら、var() 関数を使用して CSS コードにアクセスすることで、CSS コード内のどこでも CSS 変数を使用できます。

Var():

CSS 変数 var() を使用すると、カスタム プロパティの値を入力して、別のプロパティの値の一部を置き換えることができます。

構文:

var(--custom-property);

例 ：

.element {
  color: var(--main-color);
}

この例では、-main-color 変数を使用して要素のテキストの色を設定しています。後でメインの色を変更する場合は、変数の値を更新するだけで、変数が使用されているすべての要素に自動的に反映されます。

1.ダイナミックなテーマカラーの作成
出力

テーマの色が動的に変化する Web ページをデザインしたい状況を考えてみましょう。ボタンをクリックすると、ページ全体の配色が変更されるのを確認できるオプションをユーザーに提供できるようにしたいと考えています。 CSS 変数がこれをどのように可能にするかを見てみましょう。(CSS 変数について詳しく読む)

HTML:

  
Dynamic Theme - CSS Variables
  
Change Theme Color

  

CSS:

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

JavaScript:

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

この例は、ボタンとヘッダーのある Web ページを示しています。ボタンとヘッダーの背景色は、–primary-color CSS 変数を使用してカスタマイズされます。デフォルト値は #3498db です。 JavaScript スクリプトは、ボタンをクリックするとランダムな 16 進数のカラー コードを作成し、これが –primary-color 変数の新しい値として割り当てられます。その結果、ボタンとヘッダーのテーマカラーが動的に変化するため、ユーザーは興味深いインタラクティブなエクスペリエンスを得ることができます。

結論
Web 開発では、CSS 変数はスタイルを管理する多用途かつ効果的な方法を提供します。再利用可能な値を定義し、それらを動的に適用することで、開発者はより保守しやすくカスタマイズしやすい Web サイトを作成できます。 CSS 変数は、テーマ、応答性、アニメーションなど、オンライン プロジェクトのスタイル機能を向上させる広範なツールセットを提供します。デザインでそれらを最大限に活用するには、CSS ワークフローへの統合を開始してください!(CSS 変数について詳しく読む)