CSSカスタムプロパティの使い方について

今回は「CSSカスタムプロパティの使い方」について紹介します。

CSSカスタムプロパティを使うことで効率的にコーディングすることが出来るようになるので、是非参考にしてください!

CSSカスタムプロパティとは?

カスタムプロパティ (CSS 変数カスケード変数と呼ばれることもあります) は、 CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法 (たとえば、–main-color: black;) によって設定し、 var() 関数 (たとえば、 color: var(–main-color)😉 を使ってアクセスします。

引用:MDN

つまりCSSカスタムプロパティを使うことで、色やフォントなど同じ値を定義することができ、修正する際には変数の値を1箇所変えるだけで良いので、CSSのメンテナンスが楽になります。

CSSカスタムプロパティの使い方について

それでは、CSSカスタムプロパティの使い方を見ていきましょう!

CSSで変数を定義する

まずは以下のように変数で値を定義していきます。

変数名は自由につけても良いですが、できるだけ一目でわかる変数名にすると良いでしょう。

CSSで定義した変数を呼び出す

そして定義した変数を、varを使って呼び出していきます。

 

サンプルコードはこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

上記のように同じ値は変数でまとめておくことで、修正が1箇所で済みます!

今回は色で説明しましたが、他にもフォントや幅も変数で定義することができるので、是非試してみてください。

まとめ

以上が、「CSSカスタムプロパティの使い方」でした。

より詳しく知りたい方は、MDNのサイトを覗いてみてください。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事