【HTML】CSS変数(カスタムプロパティ)を使おう！【CSS】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

１分で理解できるHTML/CSS講座シリーズです。

今回はCSS変数(カスタムプロパティ)の使い方について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

１分で理解できるHTML/CSS講座シリーズはじめっ！

CSS変数(カスタムプロパティ)を使おう！

:root {
  /* --変数名 : 値 */
  --my-color: red;
}

ハイフン2つをつけて定義するよ！
:rootで定義することで、CSSファイル全体で呼び出せるよ！

　　　/* var( 変数名 ) */
color: var(--my-color);

実際に動かしてみると、指定した部分のみ
文字色が赤色になっていることがわかります。

使いこなせるとコードの冗長化を防げて保守も楽になるよ！

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈