<p class="text-color">CSSのカスタムプロパティを使った配色の切り替え方法</p>
:root {
--color-red: red;
--color-blue: blue;
}
/* モバイル(デフォルト)のスタイル */
.text-color {
color: var(--color-red);
}
/* タブレット・PC用のスタイル */
@media (width >= 768px) {
.text-color {
color: var(--color-blue);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.