CSS Variables（カスタムプロパティ）が超便利！

2018年6月28日

簡単に言うと変数が使えるようになる機能です
あらかじめよく使う値を変数に入れておけば、CSS内で自由に呼び出して使うことができます。

ブラウザの対応状況はCan I use
残念ながらIE11が非対応（2017.11現在）なので、業務利用はまだ先になりそう

目次

CSS Variables 基本的な使い方
カスタムプロパティでフォントの色を指定する
calcでカスタムプロパティを使用する

CSS Variables 基本的な使い方

変数を指定してから、使用する値の場所で呼び出す

CSS

  1. :root {
  2. --base-color: #ccc;
  3. }
  4. .base {
  5. color: var(--base-color);
  6. }

変数はセレクタに対して定義する
サイト全体で使用するような場合は「:root」に定義し
使用箇所を限定する場合はclassやタグに定義します

変数を指定する際は、先頭に「--」ハイフンを２つをつけ
呼び出す際は、「var(--○○)」をプロパティの値に記述します

カスタムプロパティでフォントの色を指定する

まずはCSSを↓のように

CSS

  1. :root {
  2. --font-color: grey;
  3. }
  4. .blue {
  5. --font-color: blue;
  6. }
  7. .red {
  8. --font-color: red;
  9. }
  10. p {
  11. color: var(--font-color);
  12. }

HTMLを記述

HTML

  1. <div>
  2. <p>grey</p>
  3. <div class="blue">
  4. <p>blue</p>
  5. <p class="red">red</p>
  6. </div>
  7. <p>grey</p>
  8. </div>

ブラウザがカスタムプロパティに対応していれば、それぞれの色でテキストが表示されます

grey

blue

red

grey

calcでカスタムプロパティを使用する

実際に使用しそうな場面としては、コンテンツの幅と、カラム数を指定するような場合でしょうか
指定してみます

CSS

  1. :root {
  2. --content-width: calc(100% - 2em);
  3. --content-column: 3;
  4. }
  5. .wrap-box {
  6. width: var(--content-width);
  7. display: -webkit-flex;
  8. display: flex;
  9. -webkit-flex-wrap: wrap;
  10. flex-wrap: wrap;
  11. margin: auto;
  12. border: 1px solid #ccc;
  13. }
  14. .wrap-box li {
  15. width: calc((100% - 20px) / var(--content-column));
  16. border: 1px solid #ccc;
  17. box-sizing: border-box;
  18. margin-bottom: 5px;
  19. margin-left: 5px;
  20. }
  21. .wrap-box li:nth-child(-n + 3) {
  22. margin-top: 5px;
  23. }
  24. .wrap-box li:nth-child(3n) {
  25. margin-right: 5px;
  26. }

HTML

HTML

  1. <ul class="wrap-box">
  2. <li>A</li>
  3. <li>B</li>
  4. <li>C</li>
  5. <li>D</li>
  6. <li>E</li>
  7. </ul>
  • A
  • B
  • C
  • D
  • E

まとめ

ごちゃごちゃした使い方もできますが、最も便利だと思うのはやはり
変数なので使いまわすことができること。
長さやサイズ、色などを複数のクラスで使いまわせるのは
非常に便利！
早く仕事で使えるようにならないかな〜

CSS, web制作CSS3, HTML5, jquery, コーディング

Posted by アツシオクムラ