JavaScriptでCSS変数を操作！動的にデザインを切り替える初心者ガイド
生徒
「ボタンを押した瞬間に、サイトのメインカラーをパッと変えることってできますか？」
先生
「はい、JavaScriptを使えばCSS変数の値をリアルタイムで書き換えることができますよ。」
生徒
「JavaScriptとCSSが連携するんですね！難しそうですが、私にもできますか？」
先生
「大丈夫です。決まった合言葉を覚えるだけで、動的にデザインを操れるようになります。一緒にやってみましょう！」
1. JavaScriptでCSS変数を操作する仕組みを知ろう
これまでは、CSSファイルの中に色やサイズを書き込んで、固定のデザインを作ってきました。 しかし、ユーザーの操作（クリックやスライダーの移動）に合わせてデザインを変化させるには、「JavaScript（ジャバスクリプト）」というプログラムの力が必要になります。
JavaScriptは、ウェブページに「動き」をつけるための言語です。 このJavaScriptを使って、CSS変数が保管されている「:root」などの場所にアクセスし、その中身の値を書き換えることで、画面の色や大きさを自由自在に変更できます。 これを「動的に変更する」と呼びます。パソコン初心者の方でも、テレビのリモコンで音量を変えるような感覚で、サイトのデザインを操作できるようになります。
2. スタイルを書き換える魔法の合言葉 setProperty
JavaScriptからCSS変数を変更するときに使う、最も大切な命令が「setProperty（セット・プロパティ）」です。 直訳すると「プロパティ（設定）をセットする」という意味になります。
使い方はとてもシンプルです。まず「どの場所の変数を変えるか」を指定し、その後に「どの変数を、どんな値に変えるか」を指示します。 パソコン操作に慣れていない方にとって、プログラムの文字を入力するのは緊張するかもしれませんが、決まった型（テンプレート）に当てはめるだけなので安心してください。 この一行の命令が、あなたのウェブサイトに命を吹き込みます。
<style>
:root {
--dynamic-color: orange;
}
.box {
width: 100px;
height: 100px;
background-color: var(--dynamic-color);
margin: 20px;
transition: 0.5s; /* 変化を滑らかにします */
}
</style>
<div class="box"></div>
<button onclick="changeColor()">色を青に変える</button>
<script>
function changeColor() {
/* :root（文書全体）の変数を書き換えます */
document.documentElement.style.setProperty('--dynamic-color', 'blue');
}
</script>
3. ユーザーが選んだ色をリアルタイムに反映する
もっと高度な連携も可能です。たとえば、色を選択する「カラーピッカー」という道具を使って、ユーザーが自由にサイトの色を選べるようにしてみましょう。
入力フォームから送られてきた色のデータを、そのままCSS変数の「中身」として放り込むことができます。 これにより、サイトのテーマカラーをユーザー自身がカスタマイズできるような、非常に親切な機能が作れます。 「プログラムを書く」というより、「情報の橋渡しをする」と考えると、仕組みがスッと頭に入ってくるはずです。
<style>
:root {
--user-theme: #333333;
}
.theme-text {
color: var(--user-theme);
font-weight: bold;
}
</style>
<p class="theme-text">好きな色を選んでみてください！</p>
<input type="color" oninput="updateTheme(this.value)">
<script>
function updateTheme(newColor) {
/* ユーザーが選んだ色を即座に変数に反映 */
document.documentElement.style.setProperty('--user-theme', newColor);
}
</script>
4. スライダーを使ってサイズをぐにゃぐにゃ動かす
次は、数値の変更に挑戦です。スライダー（つまみ）を動かして、画像の大きさや文字の太さを動的に変えてみましょう。 CSS変数には、色の名前だけでなく「20px」や「150%」といった単位付きの数値も保存できます。
JavaScriptでスライダーの現在地を読み取り、それに「px（ピクセル）」という単位をくっつけてCSS変数に渡します。 マウスを動かすたびに画面内の要素が大きくなったり小さくなったりする様子は、まるで生き物のように見えて、作っていてとても楽しいものです。 パソコン操作が苦手な方でも、スライダーなら直感的に操作できるため、ユーザーにとっても優しい機能になります。
<style>
:root {
--size-val: 100px;
}
.sample-img {
width: var(--size-val);
height: auto;
border: 2px solid #ccc;
}
</style>
<img src="/img/sample120-120.jpg" alt="サンプル" class="sample-img"><br>
<input type="range" min="50" max="300" value="100" oninput="resizeImg(this.value)">
<script>
function resizeImg(newSize) {
/* 数値に単位を足して変数にセットします */
document.documentElement.style.setProperty('--size-val', newSize + 'px');
}
</script>
5. 複数の変数をまとめて一気に上書きする
一箇所だけでなく、ボタン一つで「色」「余白」「フォント」など複数の変数を同時に変更することもできます。 これを活用すれば、サイト全体のデザインをガラッと変える「テーマ切り替えボタン」が作れます。
JavaScriptの中で、複数の「setProperty」を順番に実行するだけです。 たとえば、明るい雰囲気の「ライトテーマ」から、夜でも目が疲れにくい「ダークテーマ」への切り替えなどが、この方法で実現できます。 「一つずつ丁寧に命令を出す」というプログラムの基本を忘れなければ、どんなに多くの変数でも確実に操作できるようになります。
6. 現在の変数の値をJavaScriptで読み取る方法
これまでは変数を「変える」方法を紹介しましたが、今現在の変数の値が何になっているか「調べる」こともできます。 これには「getComputedStyle（ゲット・コンピューテッド・スタイル）」という少し長い名前の命令を使います。
「現在の設定を教えて！」とパソコンに聞き出すイメージです。 たとえば、今の文字サイズを調べて、それに10ピクセル足してさらに大きくする、といった「計算を伴う変化」を作るときに役立ちます。 情報を出すだけでなく、取り出すこともできるようになると、JavaScriptとCSSの関係はより密接で強力なものになります。
7. 特定の要素だけを狙い撃ちで変更する
これまでは「:root」というページ全体に影響する場所を操作してきましたが、特定のタグ（たとえば一つのボタンだけ）を狙って変数を書き換えることもできます。
「document.getElementById」などの命令を使って、変更したい要素を特定し、その要素に対してだけsetPropertyを実行します。 これにより、他の場所には影響を与えずに、特定のパーツだけを特別に光らせたり、目立たせたりする演出が可能になります。 「全体」と「個別」の使い分けができるようになれば、あなたはもう初心者脱出です。
<style>
.special-item {
--item-border: black;
border: 5px solid var(--item-border);
padding: 10px;
margin: 10px;
}
</style>
<div id="target" class="special-item">この枠だけ色を変えます</div>
<button onclick="highlight()">ここだけ赤枠にする</button>
<script>
function highlight() {
/* 特定のID（target）がついた要素だけ変数を書き換え */
const element = document.getElementById('target');
element.style.setProperty('--item-border', 'red');
}
</script>
8. アニメーションと組み合わせて滑らかに見せる
JavaScriptで数値を変えたとき、パッと一瞬で変わるのではなく、ゆっくり「ふわぁ」と変化させたいですよね。 そんな時は、CSSの「transition（トランジション）」という設定をあらかじめ追加しておきましょう。
JavaScriptは値を一瞬で変えてしまいますが、CSS側で「変化には0.5秒かけてね」と指定しておくことで、滑らかで高級感のあるアニメーションが完成します。 プログラムの速さと、CSSの優しさを組み合わせることで、ユーザーにとって心地よい体験を作り出すことができるのです。
9. 入力時のミスを防ぐための注意点
JavaScriptを書くとき、一番気をつけたいのは「大文字と小文字の区別」です。 「setProperty」を「setproperty」と全部小文字で書いてしまうと、パソコンは「そんな命令は知りません」と拒否してしまいます。 また、変数名の「--」も忘れずに入れてください。
パソコン初心者の方は、まずは動いているコードをコピーして、色や数値だけを書き換えることから始めましょう。 少しずつ自分で打ち込む量を増やしていくのが、上達への一番の近道です。 もし動かなくても、記号一つ、スペルミス一つを直すだけで解決することがほとんどですから、諦めずに挑戦しましょう。
10. JavaScriptとCSS変数の連携が拓く未来
今回学んだテクニックは、今のモダンなウェブサイト制作では欠かせない非常に強力な武器になります。 スクロールに合わせて背景色が変わったり、クリックでキャラクターの表情が変わったりするような楽しい仕掛けも、すべてはこの基本の組み合わせから生まれます。
「プログラミングは難しそう」という先入観を捨てて、まずはこのsetPropertyという魔法を使ってみてください。 自分の書いた文字が、画面上のデザインを動かす瞬間の感動は、何物にも代えがたいものです。 一歩ずつ、楽しみながらウェブ制作の幅を広げていきましょう！
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
