CSS|カスタムプロパティ

CSSのカスタムプロパティ(CSS変数とも呼ばれる)は、制作者が定義して再利用可能な値を表す機能です。この記事では、カスタムプロパティの基本的な使い方と利点について説明します。

カスタムプロパティの定義方法

カスタムプロパティは以下のように定義します。

• 接頭辞に二重ハイフン(--)を使用する。
• 通常、:rootセレクタ内でグローバル変数として定義する。

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

カスタムプロパティの使用方法

定義したカスタムプロパティは、var()関数を使用して呼び出します。

body {
  background-color: var(--main-color);
}

カスタムプロパティのメリット

1. コードの再利用性が向上し、メンテナンスが容易になる。
2. 値の一括変更が可能になり、効率的な開発ができる。
3. テーマの切り替えやダークモードの実装が簡単になる。

JavaScriptとの連携

JavaScriptを使用してカスタムプロパティを操作することも可能です。

• getComputedStyle()とgetPropertyValue()を使用して、値を取得できる。
• setProperty()を使用して、値を変更できる。

// 値の取得
const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--main-color');

// 値の設定
document.documentElement.style.setProperty('--main-color', '#ff0000');

高度な使用方法

@propertyルールを使用することで、カスタムプロパティの型、初期値、継承の有無などを定義できます。これにより、より堅牢なカスタムプロパティの管理が可能になります。

@property --main-color {
  syntax: '<color>';
  initial-value: #3498db;
  inherits: false;
}

まとめ

カスタムプロパティを使用することで、CSSコードの管理が容易になり、動的なスタイリングも可能になります。適切に活用することで、効率的で柔軟なウェブデザインを実現できます。