CSS変数のデフォルト値を徹底解説！初心者でも失敗しないvar関数の設定方法

カスタムプロパティにデフォルト値を設定する書き方（var(--name, default)）

先生と生徒の会話形式で理解しよう

生徒

「CSS変数を使おうとしたら、もし名前を間違えたり定義し忘れたりしたときに、色が消えちゃわないか心配です。」

先生

「確かに、変数がうまく読み込めないとデザインが崩れてしまいますね。でも大丈夫、CSSには予備の設定を用意する仕組みがあるんですよ。」

生徒

「予備の設定ですか？それがあれば、もしもの時も安心ですね！どうやって書くんですか？」

先生

「var関数の中に、少し書き足すだけです。具体的な書き方をマスターしていきましょう！」

1. CSS変数のデフォルト値とは何かを学ぼう

CSS変数（カスタムプロパティ）を使っていると、何らかの理由で変数が正しく読み込まれないことがあります。たとえば、変数の名前を打ち間違えてしまったり、定義したはずの場所が読み込まれていなかったりする場合です。そんな時、ウェブページの色やサイズが真っ白になったり、消えてしまったりするのを防ぐために用意するのが「デフォルト値（予備の値）」です。

デフォルト値とは、いわば「保険」のようなものです。パソコン初心者の方に分かりやすく例えるなら、魔法の道具（変数）が見つからなかった時のために、「もし道具がなければ、この普通の道具を使ってね」とあらかじめ指示しておくようなイメージです。これを用意しておくことで、どんな状況でもサイトのデザインが最低限保たれるようになります。

2. 基本的な構文とカンマの役割をマスターする

デフォルト値を設定する方法はとても簡単です。普段、変数を呼び出すときに使う「var(--変数名)」という書き方の中に、情報を一つ付け加えるだけです。具体的には「var(--変数名, デフォルト値)」という風に、変数名のあとに「,（カンマ）」を打ってから、予備の色や数値を書きます。

このカンマは、パソコンに対して「ここから先は予備の情報ですよ」と教える区切り記号の役割を持っています。パソコン操作が初めての方は、キーボードの「ね」の場所にあるカンマと、ドット（ピリオド）を間違えやすいので注意しましょう。半角で正しく入力することが、プログラミングを成功させる第一歩です。


<style>
	/* 変数が定義されていない状態です */
	.safe-text {
		/* --main-colorがない場合、赤色を表示します */
		color: var(--main-color, red);
	}
</style>

<p class="safe-text">変数が定義されていなくても、デフォルト値の赤色で表示されます。</p>

ブラウザ表示

3. 実際に色を指定する具体的な書き方

次は、もう少し本格的な色の指定に挑戦してみましょう。ウェブ制作では「#000000」のような色コードを使うことが多いですが、デフォルト値にもこれを使うことができます。たとえば、メインの色を変数で指定しつつ、もし変数が読み込めなかったら「黒色（#000000）」にする、という指定が可能です。

プログラミング未経験の方は、まずは簡単な英単語の色（blueやorangeなど）から始めてみるのがおすすめです。慣れてきたら、細かい色合いを指定できる色コードに挑戦してみましょう。デフォルト値があることで、作業中にうっかり変数を消してしまっても、画面が真っ白になってパニックになることを防げます。これは「保守性」という、サイトを長く守っていくための大切な考え方です。


<style>
	:root {
		/* あえて変数をコメントアウト（無効化）してみます */
		/* --my-bg: gold; */
	}
	.header-box {
		/* 変数がないので、予備のオレンジ色が使われます */
		background-color: var(--my-bg, orange);
		color: white;
		padding: 20px;
		text-align: center;
	}
</style>

<div class="header-box">
	<h3>予備の色が活躍中！</h3>
</div>

ブラウザ表示

4. 余白やサイズの数値にデフォルト値を入れる

デフォルト値は色だけでなく、サイズや余白の数値にも使えます。たとえば、文章の周りの隙間（パディング）を変数で決めている場合、もしその変数が壊れてしまうと、文字が枠にぴったりくっついてしまい、とても読みづらいサイトになってしまいます。そんな時もデフォルト値があれば安心です。

「var(--main-gap, 15px)」のように書いておけば、もし変数が機能しなくても、最低限15ピクセルの隙間は保たれます。このように、「デザインの最低限のルール」をデフォルト値として忍ばせておくことで、プロのような、どんな環境でも崩れにくい頑丈なウェブサイトを作ることができるようになります。


<style>
	.content-box {
		/* 幅の変数がない場合、300pxになります */
		width: var(--box-width, 300px);
		/* 枠線の太さの変数がない場合、5pxになります */
		border: var(--line-thick, 5px) solid #333;
		padding: 10px;
	}
</style>

<div class="content-box">
	<p>サイズの設定にデフォルト値を使っています。変数がなくても適切な大きさが保たれます。</p>
</div>

ブラウザ表示

5. 画像の角丸やスタイルでの活用事例

画像の見た目を整える「角の丸み（ボーダーラジアス）」にもデフォルト値を活用しましょう。最近のウェブサイトでは、画像の角を少し丸くするのが流行りですが、これも変数で管理することが多いです。デフォルト値を設定しておけば、特定のページだけ変数を用意し忘れても、カチカチの四角い画像にならずに済みます。

サンプル画像を使って試してみましょう。ここでは枠線の色と角の丸みの両方に予備の設定を入れています。複数のデフォルト値を組み合わせて使うことで、万が一のトラブルにも動じない、スマートなコードが完成します。初心者の方は、一つ一つのプロパティに対して「もしこれが無かったらどう見えるか」を想像しながらデフォルト値を決めてみてください。


<style>
	.photo-style {
		/* 角の丸みがなければ100px（円形に近い）にします */
		border-radius: var(--pic-round, 100px);
		/* 枠線がなければグレーにします */
		border: 4px solid var(--pic-border, #ccc);
	}
</style>

<img src="/img/sample120-120.jpg" alt="見本" class="photo-style">
<p>画像にもデフォルト値の設定を適用しています。</p>

ブラウザ表示

6. なぜデフォルト値が必要なのか？その深い理由

「自分で変数を管理しているのだから、間違えるはずがない」と思うかもしれません。しかし、ウェブサイト制作がチーム作業になったり、時間が経って自分が書いたコードを忘れてしまったりすると、予期せぬミスが必ず起こります。また、ブラウザの種類や古いパソコンによっては、新しい設定をうまく読み込めないこともあります。

そんな時に、デフォルト値は「最後の砦」として機能します。これは単なるミス防止だけでなく、サイトの利用者に対して常に読みやすい画面を提供するという、最高の「おもてなし」でもあります。プロのエンジニアが書くコードには、必ずといっていいほどこうした予備の策が練られています。初心者から一歩踏み出し、質の高いサイトを目指すなら、このvar関数のデフォルト値は必須の知識です。

7. 入れ子構造でさらに高度なデフォルト設定

少し難しい内容になりますが、デフォルト値の場所には、なんと「別の変数」を入れることもできます。これを「入れ子（ネスト）」と呼びます。「Aという変数がなければ、Bという変数を使って。もしBもなければ、最終的に青色にしてね」という、二段構え、三段構えの指示ができるのです。

具体的には「var(--color-a, var(--color-b, blue))」という風に書きます。カッコの数が増えるので、パソコン初心者の方は入力ミスに注意が必要ですが、これが使いこなせると、非常に高度なデザイン管理が可能になります。複雑なパズルのようですが、一つずつ解き明かしていく感覚で楽しんでみてください。まずは一つのデフォルト値から始め、慣れてきたらこの多段構えにも挑戦してみましょう。

8. 入力時のエラーを未然に防ぐコツ

デフォルト値を書くときに一番多い失敗は、やはり全角と半角の間違いです。特に「,（カンマ）」を全角の「、」で打ってしまうと、パソコンは全く理解してくれません。また、変数名の前のハイフン二つ（--）を一つにしてしまうミスもよくあります。こうしたミスを防ぐには、コードを書いたあとに必ず実際の画面を確認する癖をつけることです。

もし画面が思い通りの色になっていなければ、どこかの文字が間違っているサインです。一文字ずつ「指差し確認」をするくらいの気持ちでチェックしてみましょう。また、デフォルト値を設定しているからといって、大元の変数を疎かにしていいわけではありません。基本は変数をしっかり定義し、デフォルト値はあくまで「もしもの備え」として、丁寧に記述していく姿勢が大切です。

9. メンテナンス性を高めるためのデフォルト値の選び方

最後に、どのような値をデフォルト値に選ぶべきかというヒントをお伝えします。一般的には、どんなデザインにも馴染みやすい「無難な値」を選ぶのがコツです。色であれば、白や黒、グレーなど。サイズであれば、極端に大きくも小さくもない中間の数値です。あまりに奇抜な色をデフォルト値に設定してしまうと、変数が読み込めなかった時に逆にデザインが目立って崩れてしまいます。

「目立たず、そっとデザインを支えてくれる色や数値」をデフォルト値に選ぶことで、サイトのメンテナンス性はさらに高まります。ウェブサイトは生き物のように変化していきます。数年後の自分が見ても「なんて親切なコードなんだ！」と思えるように、今のうちからデフォルト値を活用した優しいプログラミングを身につけていきましょう。

2026年最新スキルアップ・実践セミナー