個人サイトの見た目をカスタマイズしたい！と思ったとき、CSSを編集することでサイトのデザインを変えることができます。
自分好みのデザインにできるとサイトの運営がぐっと楽しくなりますが、CSSファイルはhtmlファイルよりもコードが長いので、どこになにが書いてあるかわかりづらい……めんどくさい……と諦めたことがある人も多いのではないでしょうか。
テキストエディタにもCSSの編集にベンリな機能がたくさんありますが、カスタマイズが多くなりがちな創作・同人サイトでは「CSS変数」を使うのがオススメです！
この記事ではCSSを少し触ったことがある方やサイトを効率化したい方に向けて、CSS変数とはなにか、CSS変数の使い方などを紹介します。
CSS変数とは？
CSSファイルで何度も使う色や数字などに設定できる変数のことを「CSS変数」といいます。正式名称はCSSカスタムプロパティ（CSS Custom Properties）ですが、CSS変数という呼び方が一般的です。
CSSファイル内であらかじめ変数を設定して、設定した色や数字が必要になったときに変数を呼び出します。
変数を設定する時は--の後に好きな名前をつけます。そして、変数を呼び出す時は、値にvar(--変数名)と入力します。
:root {
--color-text: #242424;
}
body {
color: var(--color-text); /* ← –color-textに設定した#242424を呼び出す */
}
CSS変数は何度でも呼び出すことができるので、CSSの編集がかなり楽になります。
CSS変数を入れ子にできる
CSS変数の値に別の変数を使うこともできます。
:root {
--color-text: #242424;
--color-text: var(--color-text); /* ← –color-textに設定した#242424を呼び出す */
}
グラデーションやボタンの色設定などにオススメです。
試してみよう
使ってみないとピンとこないと思うので、doで配布しているテンプレート「modern」のCSSで実際に編集してみましょう！
まず、modernのstyle.cssを開いてタグを確認します。
body {
background: #eeedf1;
color: #242424;
~ 略 ~
font-size: 15px;
font-family: ‘メイリオ’, Meiryo, ‘ヒラギノ角ゴシック’, ‘Hiragino Sans’, sans-serif;
}
CSS変数を使えるように書きかえます。例ではbodyの上になっていますが、@utf-8やクレジットコメントの下など、ファイルを開いてすぐに確認できる場所に書くのがおすすめです。
【変更後】
:root {
--color-bg: #eeedf1;
--color-text: #242424;
--font-size: 15px;
--font-family: ‘メイリオ’, Meiryo, ‘ヒラギノ角ゴシック’, ‘Hiragino Sans’, sans-serif;
}
body {
background: var(--color-bg); /* ← #eeedf1 */
color: var(--color-text); /* ← #242424 */
~ 略 ~
font-size: var(--font-size); /* ← 15px */
font-family: var(--font-family); /* ← ‘メイリオ’, Meiryo, ‘ヒラギノ角ゴシック’, ‘Hiragino Sans’, sans-serif */
}
これでバッチリCSS変数を使えるようになりました。さっそく背景の色を#c79924に変えてみましょう。
先ほどstyle.cssに書いた--color-bgのカラーコードを変更します。
:root {
--color-bg: #c79924; /* ← #eeedf1から#c79924に変更 */
~ 略 ~
}
サイトの見た目を確認します。
変更前↓
変更後↓
--color-bgの色を変えたら、<body>で呼び出される背景（background）の色も変わりました！
まとめ
CSS変数を使うと、面倒なCSSの編集がかなり楽になります。また、応用になりますが、ダークモード用のデザインを作りたいときにもCSS変数が役に立ちます。
CSS変数で効率化して、これからもサイトの運営を長く、楽しく続けてください！
a01:Arata
「あおいあらた」と読みます。普段は小説を書いています。
※コメントは最大500文字、5回まで送信できます