JSでCSSを操る！JavaScriptと連携してスタイルを動的に切り替える初心者ガイド

JSと連携して動的にスタイル切替を行う方法

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

生徒

「ボタンを押したときに背景色を変えたり、メニューをパッと出したりしたいのですが、ＣＳＳだけでできますか？」

先生

「ＣＳＳだけでも少しはできますが、自由自在に動かすならＪａｖａＳｃｒｉｐｔ（ジャバスクリプト）と連携するのが一番ですよ。」

生徒

「ジャバスクリプトを使うと、何ができるようになるんですか？」

先生

「ユーザーの操作に合わせて、ＣＳＳの設定を後から付け足したり、外したりできるようになります。魔法のスイッチを作るようなイメージですね！」

1. JavaScriptを使ってスタイルを動的に変えるとは？

ウェブサイトには、大きく分けて三つの役割があります。文字や画像などの「中身」を作るＨＴＭＬ、見た目を整える「デザイン」のＣＳＳ、そして「動き」を加えるＪａｖａＳｃｒｉｐｔ（ジャバスクリプト）です。これまではＣＳＳだけでデザインを決めてきましたが、これだと一度表示されたら見た目はそのままです。

「動的に変える」というのは、サイトが表示された後に、プログラムの力で見た目を変えることを指します。例えば、画面を下にスクロールした時にヘッダーの色が変わったり、クリックした時だけ文字が大きくなったりする動きです。ジャバスクリプトは、ＨＴＭＬに対して「今のＣＳＳを脱いで、こっちの新しいＣＳＳを着て！」と命令を出す司令塔のような役割を果たします。パソコンを触ったことがない方でも、スイッチのオン・オフを切り替える操作だと思えば分かりやすいでしょう。

2. 最も基本となるクラスの付け替えテクニック

ジャバスクリプトでスタイルを変えるとき、最もプロが好んで使う方法が「クラス（ｃｌａｓｓ）の付け替え」です。これは、あらかじめＣＳＳで「変化後の姿」という名前のスタイルを作っておき、ジャバスクリプトでその名前をＨＴＭＬにくっつけたり、剥がしたりする方法です。

例えば、電灯のスイッチをイメージしてください。「点灯中」という名前のＣＳＳを用意しておき、ボタンが押されるたびにその名前をＨＴＭＬに貼り付けます。直接色や大きさをジャバスクリプトで細かく指示するよりも、名前を付け替えるだけの方が、後からデザインを修正する時にＣＳＳのファイルを見るだけで済むので、非常に効率的でミスが少なくなります。


<style>
	/* 基本の形 */
	.my-box {
		width: 200px;
		padding: 20px;
		background-color: #f8f9fa;
		border: 2px solid #dee2e6;
		transition: 0.5s; /* 変化をゆっくりにする魔法 */
	}

	/* ジャバスクリプトで後から付ける名前 */
	.is-active {
		background-color: #ffc107;
		border-color: #ff9800;
		transform: scale(1.1); /* 少し大きくする */
	}
</style>

<div id="box" class="my-box">
	<i class="bi bi-lightbulb"></i>
	ここが変化します
</div>
<button onclick="toggleStyle()" class="mt-3 btn btn-primary">切り替えスイッチ</button>

<script>
	function toggleStyle() {
		// idがboxという名前の要素を探して、is-activeという名前を付けたり消したりする
		const element = document.getElementById('box');
		element.classList.toggle('is-active');
	}
</script>

ブラウザ表示

3. スタイル属性を直接書き換えるインライン指定

もう一つの方法は、ＨＴＭＬのタグの中に直接「色を赤にして！」と書き込んでしまう方法です。これを「インラインスタイル」と呼びます。クラスの付け替えよりも強力で、どんなＣＳＳよりも優先して表示される特徴があります。パソコンの操作で例えると、決まった服を着せるのではなく、その場で直接スプレーで色を塗るような力技です。

この方法は、ユーザーが選んだ自由な色に背景を変えたい場合など、あらかじめＣＳＳで名前を決めておけない「予測できない変化」の時に役立ちます。ただし、あちこちでこれを使うと、どの命令が一番強いのか分からなくなり、管理が大変になるので、どうしても必要な時だけ使うのがコツです。プログラミング初心者のうちは、まずは前述のクラスの付け替えをメインに使いましょう。


<style>
	.direct-sample {
		padding: 20px;
		border: 1px solid #ccc;
		text-align: center;
	}
</style>

<div id="target-text" class="direct-sample">
	<i class="bi bi-palette"></i>
	直接スタイルを塗られます
</div>
<button onclick="changeRed()" class="btn btn-danger mt-2">赤にする</button>
<button onclick="changeBlue()" class="btn btn-info mt-2">青にする</button>

<script>
	function changeRed() {
		// 直接styleの中身を書き換える
		document.getElementById('target-text').style.color = 'red';
		document.getElementById('target-text').style.fontSize = '24px';
	}
	function changeBlue() {
		document.getElementById('target-text').style.color = 'blue';
		document.getElementById('target-text').style.fontSize = '16px';
	}
</script>

ブラウザ表示

4. 複数の要素を一気に操作するループ処理

一つのボタンを押した時に、画面にあるたくさんの部品を一度に変化させたいこともあります。例えば、サイト全体の「ダークモード」への切り替えです。この時、ジャバスクリプトは「画面の中にある全ての箱を見つけて、順番に新しい服を着せていく」という作業を瞬時に行います。

これを「ループ（繰り返し）処理」と言います。一つひとつ手作業で直すと大変な作業も、ジャバスクリプトなら一瞬で終わります。初心者の方がパソコンでフォルダ内のファイルを一括で名前変更するように、プログラムも「まとめて処理する」のが得意です。これにより、統一感のあるデザインの変更がスムーズに行えるようになります。

5. イベントリスナーで操作を監視する仕組み

「ボタンを押した時」や「画面を触った時」など、何かが起きた瞬間にプログラムを動かす仕組みを「イベントリスナー」と呼びます。「リスナー」という名前の通り、ユーザーが何か操作をしないか、ずっと耳を澄まして待っているようなイメージです。

マウスが要素の上に乗った時（マウスオーバー）、文字が入力された時、画面の大きさが変わった時など、ウェブサイトの中ではたくさんの「イベント」が発生しています。このイベントをきっかけにしてＣＳＳを切り替えることで、サイトはまるで生きているかのように生き生きと動き出します。ユーザーの行動に反応して見た目が変わるサイトは、使っていてとても楽しく、満足度の高いものになります。


<style>
	.hover-area {
		height: 100px;
		background: #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.3s;
	}
	.bg-success-subtle {
		background-color: #d1e7dd !important;
	}
</style>

<div id="area" class="hover-area">
	<i class="bi bi-mouse me-2"></i>
	ここに乗ってみて！
</div>

<script>
	const area = document.getElementById('area');
	
	// マウスが乗った時を「監視」する
	area.addEventListener('mouseenter', function() {
		area.classList.add('bg-success-subtle');
		area.innerHTML = '<i class="bi bi-emoji-smile"></i> いらっしゃい！';
	});
	
	// マウスが離れた時を「監視」する
	area.addEventListener('mouseleave', function() {
		area.classList.remove('bg-success-subtle');
		area.innerHTML = '<i class="bi bi-mouse me-2"></i> ここに乗ってみて！';
	});
</script>

ブラウザ表示

6. CSS変数と連携してサイト全体の雰囲気を変える

最近の流行は、ＣＳＳで「色」や「サイズ」を変数（箱）に入れておき、ジャバスクリプトでその箱の中身だけを入れ替える方法です。例えば「メインの色」という箱に「青」が入っていたらサイト全体が青くなりますが、ジャバスクリプトでその箱を「赤」に書き換えれば、一瞬でサイト中の青い部分が赤に変わります。

この方法は、ダークモードの切り替えや、ユーザーがテーマカラーを自由に選べるサイトなどでよく使われています。個別の部品を一つずついじる必要がないので、コードがとてもスマートになり、プロが書いたような洗練されたプログラムになります。未経験の方には少し難しく聞こえるかもしれませんが、「大きなペンキのバケツの中身を入れ替えるだけ」と考えれば簡単です。

7. アニメーションを制御してスムーズな動きを作る

ただパッと色が変わるだけでなく、ふわっと消えたり、スルスルと横から出てきたりする動きは、サイトの高級感を高めます。これは、ジャバスクリプトで「名前を付け替えるきっかけ」を作り、実際の動きはＣＳＳの「トランジション（変化の期間）」や「アニメーション」に任せるという分担作業で行います。

ジャバスクリプトはあくまで「開始！」の合図を出すだけで、滑らかな動き自体は得意なＣＳＳに任せるのが、今のウェブ制作の常識です。これを「ＣＳＳアニメーションのトリガー（引き金）」と呼びます。この役割分担を理解すると、パソコンの動作が重くなるのを防ぎつつ、スマホでもサクサク動く心地よいサイトが作れるようになります。

8. 画面サイズの変化に合わせて動く「JSのメディアクエリ」

ＣＳＳには画面幅で見た目を変えるメディアクエリがありますが、ジャバスクリプトにも似たような機能があります。画面が狭くなった時にだけ特別なプログラムを動かしたい時に使います。例えば、スマホの時だけ画面を左右に振るとメニューが出る、といった複雑な動きです。

ＣＳＳのメディアクエリでは対応しきれないような、「機能そのものを切り替える」場合にはジャバスクリプトの出番です。ウィンドウの幅を常に監視して、特定のサイズをまたいだ瞬間にデザインをガラッと作り替える。これこそが、どんな端末でも完璧に動くレスポンシブデザインの究極の形です。基礎を積み上げた先に待っている、とても楽しいテクニックの一つです。


<style>
	.screen-info {
		padding: 20px;
		text-align: center;
		font-weight: bold;
		background: #f1f3f5;
	}
</style>

<div id="screen-box" class="screen-info">
	<i class="bi bi-aspect-ratio"></i>
	画面の横幅をチェック中...
</div>

<script>
	function checkWidth() {
		const width = window.innerWidth; // 今の画面の幅を測る
		const box = document.getElementById('screen-box');
		
		if (width < 600) {
			box.style.backgroundColor = '#ff8787';
			box.innerText = 'スマホサイズです (' + width + 'px)';
		} else {
			box.style.backgroundColor = '#b2f2bb';
			box.innerText = 'パソコンサイズです (' + width + 'px)';
		}
	}

	// 画面の大きさが変わるたびに実行する
	window.addEventListener('resize', checkWidth);
	// ページを開いた時にも一回実行する
	checkWidth();
</script>

ブラウザ表示

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