ご相談・お問い合わせご相談・お問い合わせ 電話0120-800-804

CSSで変数が利用できる!CSSカスタムプロパティを利用するメリット

Webサイト
CSSで変数が利用できる!CSSカスタムプロパティを利用するメリット

CSSといえば、あくまでもHTMLの見た目を指定する静的なもので、条件やお客さまの行動に応じてスタイルを切り替えるといったアクションを与えるには、JavascriptやJQueryなどのクライアントサイドスクリプトやPHPといったサーバーサイドプログラム言語を利用することが主流でした。
 
しかし、近年においては、ウインドウの幅に合わせてデザインを切り替えるレスポンシブデザインをはじめとして、CSSだけでフレキシブルにスタイルの調整をおこなえるような仕組みが充実してきています。
 
今回ご紹介するCSSカスタムプロパティもそのひとつです。
  

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

CSSカスタムプロパティは、colorやbackgroundなどのCSSに組み込まれているプロパティのほかに、自身でプロパティを作成することができるCSSの記述方法のひとつです。
 
カスタムプロパティを作成するには、以下のように、任意に命名したプロパティに、「–」(ハイフン2つ)を付け加えることで対応します。
 
body {
–mainTextColor:#333333;
–mainTextSize:18px;
}
 
上記のような記述をすることで、それぞれスタイル情報をもった「–mainTextColor」と「–mainTextSize」という独自のプロパティが定義されます。
  

変数を作って同じデザインを使い回せる

上記で作成したカスタムプロパティは、これだけでは機能を果たすことはできません。
 
カスタムプロパティは、プログラミング言語において値を格納しておく変数という考え方を持っておくとわかりやすいでしょう。
 
カスタムプロパティは、以下のように、通常のプロパティと組み合わせて使用します。
 
body {
–mainTextColor:#333333;
–mainTextSize:18px;
}
p {
color:var(–mainTextColor);
font-size:var(–mainTextSize);
}
 
実際にホームページを作成する際には、もっと長いコードになるのですが、この際に、同じスタイルを何度も適用したいという場面は必ず出てきます。
 
カスタムプロパティを利用して変数として最初に定義しておくことで、何度も同じスタイルを書く必要がなく、可読性にも優れ、手間のかからないコーディングを実現することができます。
  

演算子を利用して計算をおこなうことができる

カスタムプロパティが便利な点はさらにあります。たとえば、注釈のフォントサイズについて、通常のフォントサイズを基準に2pxだけ小さく表示させたいという場合。
 
この場合は、以下のように記述をすれば実現可能です。
 
body {
–mainTextColor:#333333;
–mainTextSize:18;
}
p {
color:var(–mainTextColor);
font-size:calc(var(–mainTextSize)*1px);
}
p.note {
color:var(–mainTextColor);
font-size:calc(var(–mainTextSize)-2*1px);
}
 
calc関数を利用して計算する場合は、変数に単位を含めることができませんので、整数値をして宣言をしておき、最後に必要な単位で掛け算をしてあげる必要があります。
 
カスタムプロパティを利用して記述をしておくことで、全体的にスタイルの調整をしたいといったときも、最初に宣言した変数の内容を書き換えるだけで済むので、工数の大きな削減につながります。
  

CSSカスタムプロパティによってJavascriptを利用しなくても実現できる表現の幅が広がる

これまでCSSの表現を広げるために、Javascriptの活用は必須に近い要素でした。
 
しかし、カスタムプロパティによって、CSS自体が変数や四則演算の機能を持ったことにより、CSS単体でも表現の幅をかなり広げることができるようになったといえるでしょう。
 
また、Javascriptで、CSSがもつカスタムプロパティにアプローチをかけることももちろん可能です。
 
これまでと同じようにJavascriptでCSSをサポートする際も、カスタムプロパティによりよりスマートなコードの記述ができるようになったといえるでしょう。

ReEight MAGAZINE

いいねして最新情報をチェック!

矢印アイコン
無料サイト診断サービス

WEBサイトに関してお困りなことはありませんか?

私たちは制作だけではなく、SEO、マーケティング、ブランディング、など
WEBに関して総合的な知見を持ち合わせており、
WEBサイトを最大限に活用するためのノウハウを蓄積しております。
御社が抱えている事業課題を私たちならきっと解決できると考えています。

お気軽にお問い合わせください。

フォームでのお問い合わせ

メールご相談・お問い合わせ

お電話でのお問い合わせ

電話
0120-800-804受付時間10:00〜18:00

WEBサイトに関することなら
お気軽にお問い合わせください。

フォームでのお問い合わせ

お見積り依頼やご相談・ご質問は
お問い合わせフォームをご活用ください。

メールご相談・お問い合わせ

お電話でのお問い合わせ

お急ぎの方や詳しく話を聞きたい方は
お電話ください。

電話
0120-800-804受付時間10:00〜18:00
サイトマップ プライバシーポリシー Copyright © re-eight.inc. All Right Reserved.