タイトル・URLをコピー
記事タイトルCSSで変数を使う方法【サンプルコード付き】(初心者向け)
記事URLhttps://digitor.jp/textbook/css-variable/
記事タイトルCSSで変数を使う方法【サンプルコード付き】(初心者向け)
記事URLhttps://digitor.jp/textbook/css-variable/
POINTこの記事をざっくり言うと
CSS変数の意味がわかる。
CSS変数の使用方法がわかる。
CSS変数を使用する時の注意点がわかる様になる。
こんにちは!
最近、WEB制作の勉強をして少したったけど、 「CSS変数って何・・?」
「どんな場面で変数を使うの・・?」「CSSで変数を使用してみたい・・」
そんな風に考えている、初心者WEB製作者の方も多いのではないでしょうか?
今回は、初心者WEB制作者の方向けに「変数の意味」「CSS変数の使い方」「CSSで変数を使用する時の注意点」を中心に解説します。
変数とは
変数とは、数字や文字を格納しておく箱の様なものです。
一度定義した変数は、何度でも使いまわす事ができ、変数の中身(箱)を変えれば、変数を使用した箇所に変更が反映するので修正の手間を削減することができます。
例えばカラー「#ffffff」を変数を使用し「A」という箱に格納します。
「#fffff」を適用した箇所が複数あり、もし「#ff953a」にカラー変更したい場合は、変数「A」の中身を変更する事だけですみます。
指定箇所が多ければ多いほど、変数で指定しておいた方が、変数だけを修正すれば良いので、後からの変更に効率的に対応できます。
CSS変数の記述方法
CSS変数の記述方法は、グローバル変数、ーー変数名、値となります。
実際に記述していきます。
|
:root { --red: #FF0000; } |
※解説
:root→グローバル変数(宣言する事であらゆるところで使用できる変数)
––red→変数名(変数は決まっていないので、好きな変数名を使用してよい)
#ff0000→値
変数は色だけでなく、単位のついた数値や文字列なども設定できます。
変数指定例
|
:root { --main-size: 12px; --side-margin: 5px; --main-position: center; --font-line: 1.5; } |
CSS変数の呼び出し方
サンプルコード表示結果
HTMLサンプルコード
|
<div class="sample">文字</div> |
CSSサンプルコード
|
:root { --color1: #FF0000; } .sample { color: var(--color1); } |
※解説
使用したい箇所でvar(––変数名)と記述し呼び出しをおこないます。
変数で定義された文字色が適用されています。
後から変数の変更
例えば後から、#0000FFにしたい場合は、
|
:root { --colo-1: #0000FF; } |
※解説
変数を変えるだけで#0000FFに変更する事ができています。
記述が多い時は、変数だけ変えれば良いので、効率的です。
フォールバック値のセット
予備となる値(フォールバック値)をセットしておく事ができます。
フォールバック値とは、何か不具合が起き、変数が消えてしまった場合などの為に、予備の値をセットしておく事ができます。
指定の仕方は、var(––color, フォールバック値)
下記サンプルコード例で言うと、#0000FF(––color)が適用されなかった場合に、blueが適用されることになります。
フォールバック値サンプルコード
|
:root { --color-1:#0000FF; } .box { background: var(--color-1, blue); } |
変数の中で変数を使用する
変数の中に変数を入れて使用する事ができます。
サンプルコード表示結果
HTMLサンプルコード
|
<div class="sample-box">上に100px、下に50px</div> |
CSSサンプルコード
|
:root { --sample-margin-top: 100px; --sample-margin-bottom: 50px; --sample-margin: var(--sample-margin-top) auto var(--sample-margin-bottom); } .sample-box { margin: var(--sample-margin); width: 300px; height: 200px; background-color: blue; color: #ffffff; } |
※解説
まず最初に––sample-margin-topを定義、次に––marginsample-margin-bottomを定義し、変数で指定。
変数の中で––sample-margin-top、––marginsample-margin-bottomを使用し、結果、変数––sample-marginで上に100px、下に50pxのmarginが定義されます。
CSS変数の注意点
大文字と小文字
変数を定義する際、大文字、小文字は別物として扱われます。
下記サンプルコード例では「color-1」は、#0000FFが指定され。「COLOR-1」は、#008000が指定されます。
大文字、小文字サンプルコード
|
:root { --color-1:#0000FF; --COLOR-1: #008000; } |
プロパティ名を変数にできない
変数にはプロパティ名を指定することはできません。
下記のように「color」プロパティを変数に入れても、「color: red;」の指定をする事ができません。
変数にプロパティ名を入れたサンプルコード
|
:root { --bg: color; } .sample { var(--bg): red; } |
呼び出す時の単位を書き足さない
変数を定義する際は値に単位も入れてください。
①例えば下記の例では、50pxの指定が行えません。
|
.sample { --yohaku: 50; margin: var(--yohaku)px; } |
②下記の例では50pxの指定をする事ができます。
|
.sample { --yohaku: 50px; margin: var(--yohaku); } |
①と②の違いは、定義の際にpxという単位まで含めたかと、pxを書き足したかになります。単位まで含めて変数を指定しないと適用されないので注意してください。
Sassではない理由
CSSの変数ならSassで良いのではないか?そのように思われている方もいるかもしれません。
Sassでない理由は、Sassは、メディアクエリ内で変数を定義できないからです。
メディアクエリ内で変数を定義したい方は、CSS変数を使うことでメディアクリエ内でも変数を使用する事ができます。
今回は初心者向けのためSassについて詳しく解説しませんが、気になる方は下記を参照にしてみて下さい。
https://www.pc-koubou.jp/magazine/22447
変数を定義をする便利な場面
ここからは、変数を定義すると便利な場面について紹介していきます。
色
色は白色と、色1つとっても細かく種類は多いです。
また指定するたびに、微妙に違う色になってしまったり、調べなおす、作成後の変更といった場合もあるので作成するwebサイトでよく使用する色を変数に登録しておくと便利です。
色の変数登録例
|
:root { /* 色 */ --primary: #ff953a; --darkgray: #222222; --midgray: #414141; --gray: #888888; --white: #ffffff; } |
左右の余白
WEBサイトを制作する上で、左端からスタートする例は少ないです。
必ず少しの余白からスタートし、余白をどのページでも揃えることが多いです。
そのため余白の値を変数に登録しておくと便利です。
|
/* 変数 */ :root { /* 左右の余白 */ --side: 6vw; } |
メディアクリエが簡単
前述した通り、Sassではメディアクエリ内で変数を定義できないため、メディアクリエ内での、変数が使用できる、CSS変数は便利です。
メディアクリエでの登録例
|
:root{ --main-color: #ffffff; } @media (min-width:780px){ :root{ --main-color: #FF0000; } } |
まとめ
今回は、初心者WEB制作者の方向けに「変数の意味」「CSS変数の使い方」「CSSで変数を使用する時の注意点」を中心に解説してきました。
最後にポイントをまとめます。
変数とは、「数字や単語を入れておく箱」の様なもので、一度定義した変数は、何度でも使いまわす事ができ、変数の中身を変えれば、変数を使用した箇所に変更が反映するので修正の手間を削減することができます。
1.CSS変数の記述方法
:root {
––変数名: 値;
}
2.CSS変数の呼び出し方法
.sample {
var (––変数名)
}
3.CSS変数の注意点
・大文字と小文字に注意する。
変数を定義する際、大文字、小文字は別物として扱われます。
・プロパティ名を変数にできない
変数にはプロパティ名を指定することはできません。
・呼び出す時の単位を書き足さない
変数を定義する際は値に単位も入れてください。
4.変数を定義をする便利な場面
・色
・左右の余白
・メディアクエリ内
いかがだったでしょうか?
変数を使用することで作業効率の改善につながる場面があります。
これを機会に使用してみて下さい。
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルCSSで変数を使う方法【サンプルコード付き】(初心者向け)
記事URLhttps://digitor.jp/textbook/css-variable/
記事タイトルCSSで変数を使う方法【サンプルコード付き】(初心者向け)
記事URLhttps://digitor.jp/textbook/css-variable/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。