CSS変数書き方例。:rootを使ってカスタムプロパティを覚える。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

CSS変数(カスタムプロパティ)の、使って覚えるシンプルな書き方例。

CSSで変数を使うと、とにかく便利。

JavaScriptやPHPなど、プログラミング言語ではごくごく基本の変数。

CSSの生みの親であるホーコン・ウィウム・リー氏によると、もともとCSSは意図的にプログラミング言語にならないようにしていたそうだ。

それが今では、時代の変化によるニーズの増加もあり、CSS変数(カスタムプロパティ)が使えるようになっている。

変数に慣れていない人でも、形式が決まっているので、習うより慣れろですぐに使える。

CSS変数(カスタムプロパティ)の、使って覚えるシンプルな書き方例。

CSS変数の指定方法と使い方。

例)

変数名は「–」(ハイフン2つ)から始まる英数字とハイフン、アンダースコアの組み合わせで、id名やクラス名のように任意で決められる。

他の人が見ても分かりやすい名前が好ましく、cssファイルの最初の方に、:root {}で指定しておくと便利。

CSS
:root {
 --white: #fff;
 --black: #000;
 --red: #f00;
 --serif: 游明朝, 游明朝体, 'Yu Mincho', YuMincho, serif;
 --sans_serif: 游ゴシック, 游ゴシック体, 'Yu Gothic', YuGothic, sans-serif;
}

その後は、以下のように使える。

h1〜h6タグの背景を真っ白、文字を真っ黒、書体を游ゴシック(ない場合はゴシック体)にしたいときのコード例。

varから始まる()の中に、上記で決めた変数名を入れる。

h1, h2, h3, h4, h5, h6 {
 background: var(--white);
 color: var(--black);
 font-family: var(--sans_serif);
}

「var」というのは「variable(変数)」の略称で、プログラミング言語でよく使われるお決まりの単語であり、この名前は変えられない。


変数の値の変更。文字色や書体を後から変えたい場合。

真っ白や真っ黒、真っ赤ではなく、若干色味を変えたり、書体をヒラギノ角ゴ(ない場合はゴシック体)に変えたくなった場合。

CSS

例)

:root {}の中だけを変更する。

:root {
 --white: #fffafa;
 --black: #240401;
 --red: #ff005b;
 --serif: 游明朝, 游明朝体, 'Yu Mincho', YuMincho, serif;
 --sans_serif: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
}

変数を使用するセレクタの方は何も変えなくても良い。

h1, h2, h3, h4, h5, h6 {
 background: var(--white);
 color: var(--black);
 font-family: var(--sans_serif);
}

上記の例ではh1〜h6タグのみだが、あちこちで文字色や背景色などを指定することができる。

section p {
 color: var(--black);
}

p.red {
 color: var(--red);
}

ul {
 background: var(--black);
 border: 1px solid var(--white);
 color: var(--white);
}

変数を使わない場合は、コピペや打ち直し、エディタの置換機能などで変更を行うことができるが、手間や誤操作が起きやすい。

変数を使えば、:root {}の箇所だけを変えれば(代入すれば)良いので楽でかつ安全だ。

変数とは、「値」を保存しておける、ヴァーチャルの「箱」のようなものであり、その名の通り、「箱」の中身は後から「変える」ことができる。

CSSの場合は、var()を使って「箱」から取り出して使う。

CSS変数(カスタムプロパティ)の、使って覚えるシンプルな書き方例。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。