CSSに変数があった!

恥ずかしいことに、1年半もWebデザインをしてきて知らなかったのですが、CSSでも変数が使えるんですね。

毎回、色を変えるときなど、エディタの機能を使って一斉変換して、余分なとこまで変換してしまって、結局1個1個変えて…みたいな面倒なことをしていましたが、変数を使えるのはありがたいですね。

それではさっそく書いていきます!

変数の書き方

変数というよりはC言語のマクロ(define)に近いなと思いました。

まずは書式はこんな感じ

:root{}がグローバル変数を宣言する用の疑似クラスになるそうです。

変数名の前には「–」を付けるだけだそう。これで、「main-color」という変数に「#fff」というカラーコードが格納され、「title-size」という変数に「20px」という値が格納された感じです。

変数を呼び出す際はvar(–変数名)という風に呼び出します。

では、実際に実装してみたいと思います。

コードはこちら!

1.HTML

2.CSS

 

以上がコードになります。

実際に実装したページはこちらになります。

⇒サンプルページ

 

今回のサンプルは変数にするありがたみがあまり実感できないコード量ですが、行数が多くなるにつれ、かなり役に立つと思います。

是非実装してみてください!

今回のブログ曲

今回の投稿中に聴いていた曲はこちら

オーディオで是非聴いてください!

カテゴリー: CSSWebデザイン

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です