CSSに変数があった！
恥ずかしいことに、1年半もWebデザインをしてきて知らなかったのですが、CSSでも変数が使えるんですね。
毎回、色を変えるときなど、エディタの機能を使って一斉変換して、余分なとこまで変換してしまって、結局1個1個変えて…みたいな面倒なことをしていましたが、変数を使えるのはありがたいですね。
それではさっそく書いていきます！
変数の書き方
変数というよりはC言語のマクロ（define）に近いなと思いました。
まずは書式はこんな感じ
|
1 2 3 4 |
:root { --main-color: #fff; --title-size: 20px; } |
:root{}がグローバル変数を宣言する用の疑似クラスになるそうです。
変数名の前には「–」を付けるだけだそう。これで、「main-color」という変数に「#fff」というカラーコードが格納され、「title-size」という変数に「20px」という値が格納された感じです。
変数を呼び出す際はvar(–変数名)という風に呼び出します。
では、実際に実装してみたいと思います。
コードはこちら！
１．HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport"content="width=device-width,initial-scale=1"> <!-- SEO --> <title>Sample | Variables</title> <!-- CSS --> <link href="css/style.css"rel="stylesheet"> </head> <body> <h1>HelloWorld</h1> <p>- こんにちは世界 -</p> </body> </html> |
２．CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@charset "utf-8"; /* 変数宣言 */ :root { --main-color: #33ff33; --sub-color: #222; --text-color: #fff; --title-size:10vw; --text-size: 3vw; } body{ background:var(--sub-color); } h1{ text-align:center; font-size:var(--title-size); line-height:var(--title-size); color:var(--main-color); margin-top:35vh; } p{ text-align:center; font-size:var(--text-size); line-height:var(--text-size); color:var(--text-color); } |
以上がコードになります。
実際に実装したページはこちらになります。
今回のサンプルは変数にするありがたみがあまり実感できないコード量ですが、行数が多くなるにつれ、かなり役に立つと思います。
是非実装してみてください！
今回のブログ曲
今回の投稿中に聴いていた曲はこちら
オーディオで是非聴いてください！
