CSSで変数(カスタムプロパティ)まとめ

CSSで同じ値を複数個所で使用できるカスタムプロパティのまとめです。

## 定義

oneクラス内で有効
```
.one {
	--text-color: #333;
}
```

グローバルに有効<br>
:root疑似クラスで定義
```
:root {
	--text-color: #333;
}
```

大文字小文字は区別されます。

## 使用

```
.one {
	color: var(--text-color);
}
```

```
.two {
	color: var(--text-color);
}
```

## 未定義の場合のフォールバック

```
.three {
	color: var(--text-color,#333);
}
```
もし、--text-colorが定義されていなかったら#333を使用する。

## カスタムプロパティの入れ子

```
:root {
	--color-dark1: #000;
	--color-dark2: #888;
	--dark-gradation: linear-gradient(var(--color-dark1),var(--color-dark2));
}
```

```
.three {
	background-image: var(--dark-gradation);
}
```

## CSSメディアクエリ使用例

```
<style>
@media print,screen {
	.one {
		--text-color: #f00;
		color: var(--text-color);
	}
}
@media screen and (max-width: 699px) {
	.one {
		--text-color: #0a0;
	}
}
</style>
<h1 class="one">あいうえお<h1>
```

## JavaScriptで値を取得

インラインスタイルから値を取得
```
element.style.getPropertyValue('--text-color');
```

あらゆる場所の変数を取得
```
getComputedStyle(element).getPropertyValue('--text-color');
```

## JavaScriptで値を設定

インラインスタイルに値を設定
```
element.style.setProperty('--text-color', '#555');
```

## JavaScript使用例

```
<style>
.one {
	--text-color: #f00;
	--text-size: 20px;
	color: var(--text-color);
	font-size: var(--text-size);
}
</style>
<h1 class="one">あいうえお<h1>
<script>
const h1 = document.querySelector('h1');

//GET
const textColor = getComputedStyle(h1).getPropertyValue('--text-color');
console.log(textColor);	//#f00
//GET
const textSize = getComputedStyle(h1).getPropertyValue('--text-size');
console.log(textSize);	//20px

//SET
h1.style.setProperty('--text-color', '#00a');
//GET
const textColor2 = h1.style.getPropertyValue('--text-color');
console.log(textColor2);	//#00a

//SET
h1.style.setProperty('--text-size', '50px');
//GET
const textSize2 = h1.style.getPropertyValue('--text-size');
console.log(textSize2);	//50px
</script>
```

CSSで変数(カスタムプロパティ)まとめ

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他