CSS 変数 – スタイルシートの合理化

レクチャー 17: CSS 変数 – スタイルシートの合理化

この講義では、CSS 変数 (カスタム プロパティとも呼ばれます) と、それらがスタイルシート全体で値を再利用できるようにしてコードを簡素化する方法について学びます。

1. CSS 変数とは何ですか?

CSS 変数を使用すると、色、フォント サイズ、間隔などの値を中央の場所に保存し、スタイルシート全体で再利用できます。これにより、スタイルシート全体を検索する代わりに 1 か所の値を簡単に更新できるため、コードの保守性が向上します。

CSS 変数は -- 接頭辞を付けて定義され、var() 関数を使用してアクセスできます。

2. CSS 変数の定義

CSS 変数は通常、ドキュメントの最上位を表す :root セレクターで定義されます。

例:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

h1 {
    color: var(--secondary-color);
}

この例では:

• カスタム変数として --primary-color、--secondary-color、および --font-size を定義します。
• これらの変数は、var() 関数を使用して body スタイルと h1 スタイルで使用されます。

3. CSS 変数を使用する利点

• 再利用性: スタイルシート全体で同じ値を再利用できるため、コードの重複が減ります。
• 保守性: 色やフォント サイズを変更する必要がある場合、1 か所の変数の値を更新するだけで済みます。
• 動的更新: CSS 変数は JavaScript を使用して動的に更新できるため、インタラクティブなデザインをより柔軟に作成できます。

4. CSS 変数をオーバーライドする

特定のセレクター内の CSS 変数をオーバーライドして、コンテキスト固有の値を提供できます。

例:

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

.dark-mode {
    --primary-color: #34495e;
}

body {
    color: var(--primary-color);
}

この例では、.dark-mode クラスが適用されると、--primary-color がオーバーライドされます。これにより、異なるカラー スキーム (ライト モードとダーク モードなど) を簡単に切り替えることができます。

5.メディアクエリでの変数の使用

CSS 変数はメディア クエリとうまく連携し、画面サイズに基づいて値を調整できます。

例:

:root {
    --font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

body {
    font-size: var(--font-size);
}

この例では、小さい画面では --font-size 変数が小さくなり、モバイル デバイスでテキストが読みやすくなります。

6. CSS 変数のフォールバック値

変数がブラウザーで定義されていないかサポートされていない場合に備えて、CSS 変数のフォールバック値を指定できます。

例:

body {
    font-size: var(--font-size, 18px);
}

ここで、--font-size が定義されていない場合、ブラウザはデフォルトで 18 ピクセルになります。

7.変数とJavaScript

CSS 変数の最も強力な側面の 1 つは、JavaScript を使用して操作できることで、動的でインタラクティブなスタイルを作成できることです。

例:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

この例では、JavaScript を使用して --primary-color 変数が新しい色 (#e74c3c) に更新され、ページのスタイルが動的に変更されます。

8.実際の使用例

• テーマ: CSS 変数を使用して、Web サイトの明るいテーマと暗いテーマを作成します。
• デザイン システム: 色、間隔、タイポグラフィーの変数を使用して、一貫したデザイン システムを構築します。
• 動的インタラクション: CSS 変数と JavaScript を使用してスタイルをリアルタイムで更新するインタラクティブな要素を作成します。

結論

CSS 変数は、スタイルを管理し、コードの保守性を向上させ、動的更新を可能にする柔軟な方法を提供します。 CSS 変数をワークフローに組み込むことで、開発プロセスを合理化し、より保守しやすくスケーラブルなスタイルシートを作成できます。

LinkedIn でフォローしてください

リドイ・ハサン

以上がCSS 変数 – スタイルシートの合理化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。