大阪のホームページ制作会社。SEO対策、企画提案も。関西でドローン事業も行っております。

  • 株式会社エボルワン
  • 株式会社エボルワン
  • 株式会社エボルワン

ハッシュタグ「#evoluone」でインスタ投稿!

2018.4.19

CSSにて変数を使用する方法

忘れてしまわないようメモ。

 
CSSでも変数が使用できる、
使用することでメンテナンスがしやすくなる。(時と場所によるが)

■変数を定義

:root {
–num100: 100px;
–num200: 200px;
–mauto: 0 auto;
}

■定義したものを呼び出す

.test1 {
width: var(–num100); /* 100px */
margin: var(–mauto); /* 0 auto */
}

.test2 {
width: var(–num200); /* 200px */
margin: var(–mauto); /* 0 auto */
}

.test1 {
width: 100px;
margin: 0 auto;
}

.test2 {
width: 200px;
margin: 0 auto;
}

と数値、プロパティは同じ

ただ変数を使用しているので
メンテナンスのしやすさが格段に違う

WEB制作のご依頼はCLICK!

Facebookで共有する
0
はてなブックマークで共有する
0
twitterで共有する
0
Google+で共有する
0
MENU