CSS

CSS custom properties function as reusable variables, providing consistency and flexibility in styling.

Custom properties（カスタムプロパティ）

　CSSの Custom Properties（カスタムプロパティ）は、再利用可能な変数として機能する機能です。これにより、スタイルシート内で一貫性を保ちつつ、柔軟性を持ったデザインを作成できます。

基本的な使い方

　カスタムプロパティは、"--"（ハイフン2つ）で始まる名前を持ち、値を指定することができます。例えば、以下のようなカスタムプロパティを定義できます。

:root {
	--primary-color: #007bff;
}

　上記のコードでは、:root 擬似クラスを使用してカスタムプロパティ --primary-color を定義しています。このカスタムプロパティには、主なカラーコード #007bff が割り当てられています。

　カスタムプロパティは、他のスタイルルール内で使用することができます。例えば、以下のようにカスタムプロパティを使用して要素の色を設定できます。

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

　上記のコードでは、h1 要素のテキスト色に var(--primary-color) を使用しています。これにより、--primary-color で定義されたカラーコードが適用されます。

カスタムプロパティの利点

　カスタムプロパティの主な利点は次のとおりです。

再利用性

カスタムプロパティは変数として機能し、複数のスタイルルールで同じ値を使用できます。変更が必要な場合は、カスタムプロパティの値を変更するだけで、関連するすべてのスタイルが更新されます。

メンテナンスの容易さ

サイトやアプリケーション全体で使用されるスタイルの一貫性を保つために、カスタムプロパティを使用することで、スタイルの変更や調整が容易になります。

動的なスタイリング

JavaScriptを使用してカスタムプロパティの値を変更することができます。これにより、ユーザーのアクションやアプリケーションの状態に基づいて、スタイルを動的に変更することができます。

Sample

<div>
	<p class="head">This is a heading</p>
	<p>This is a paragraph.</p>
</div>

:root {
	--primary-color: #007bff;
	--secondary-color: #6c757d;
	--font-size: 16px;
}

div {
	color: var(--primary-color);
	background-color: var(--secondary-color);
	font-size: var(--font-size);
}

p.head {
	font-size: calc(var(--font-size) * 2);
}