JavaScriptで魅せる！HTMLとCSSに「動き」を与える基本

2025-10-25

静的なWebページに動きを加えると、まるで命が宿ったように感じます。

JavaScriptを理解すれば、HTMLとCSSだけでは実現できない「反応」や「演出」を自在に扱えるようも。
小さなボタンのアニメーションでも、ユーザーにとっては心地よい体験につながりますよね。

この記事では初心者の方がJavaScriptで動きを加える基本を理解し、Webデザインの幅を広げるためのステップを紹介します。

読みたい場所にジャンプ

ユーザー体験を変える「動き」の力

見た目ではなく「体験」をつくる

デザインは見た目の美しさだけでなく、使いやすさや感情にも影響を与えます。

実はJavaScriptを使ってボタンがふんわり動いたり、スクロールに合わせて要素が現れたりするだけで、ユーザーの滞在時間が伸びることがあるんです。

「動き」はユーザーとの対話のようなもので、わずかな演出がサイト全体の印象を左右します。

動きが導線をつくる

たとえばフォーム送信時のローディングアニメーションやエラー時の軽い振動など。
これらは視覚的に「今、何が起きているのか」を伝えるサインです。

デザインの一部としての動きではなく、ユーザーの行動を助ける仕組みとして意識すると、サイト全体の体験価値が高まります。

JavaScriptの基本構造を押さえる

HTML・CSSとの関係性を理解する

HTMLが「骨格」、CSSが「装飾」、そしてJavaScriptが「動き」。
この3つの関係を意識して学ぶと理解が深まります。

HTMLで構造を整え、CSSで見た目を整え、JavaScriptで動作を加える。
それぞれの役割を混同しないことが、きれいなコードを書く第一歩です。

実際に動かして覚える

JavaScriptは読むよりも、手を動かす方が身につきます。
たとえばボタンをクリックしたら文字が変わる、見出しがフェードインするといった小さな動きを実装してみましょう。
「動いた！」という体験は面白いし、楽しいですよ！

実践：簡単な動きを作ってみよう

ボタンのクリックでメッセージを表示

HTMLにボタンを配置し、JavaScriptでクリックイベントを設定します。

ボタンが押されたときにメッセージを表示するだけでも、インタラクションの基本が理解できますよ。
if文や関数を使いこなせるようになると、より複雑な動きを作り出せます。

以下にボタンのクリックでメッセージを表示させる例としてコードを紹介します。
クリックイベントにはさまざまな実装方法がありますので、あくまで一例として参考にしてください。
HTMLもCSSもJSもいろいろと触ってみてくださいね。

ボタンクリックでメッセージを表示させる例（クリックorタップで開きます）

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<meta name="robots" content="noindex,nofollow" />
		<title>クリックでメッセージ表示</title>
		<link rel="stylesheet" href="reset.css" />
		<link rel="stylesheet" href="style.css" />
	</head>
<body>

  <div class="container">
    <button class="btn js-button">クリックでメッセージを表示</button>
    <p class="message js-message"></p>
  </div>

  <script src="script.js"></script>
</body>
</html>

body {
	font-family: sans-serif;
	background-color: #f9fafb;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

.container {
	text-align: center;
}

.btn {
	padding: 12px 24px;
	font-size: 16px;
	border: none;
	background-color: #007acc;
	color: #fff;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: #005f9e;
}

.message {
	margin-top: 24px;
	font-size: 18px;
	color: #007acc;
}

const button = document.querySelector(".js-button");
const message = document.querySelector(".js-message");

button.addEventListener("click", () => {
	message.textContent = "ボタンがクリックされました！";
});

スクロールアニメーションの導入

ユーザーのスクロールに合わせて要素がふわっと現れるアニメーションは、見た目にも効果的です。
JavaScriptを使えば、画面のスクロールに合わせて特定の位置で処理を実行できます。
少し工夫するだけで、ページ全体が生き生きとした印象に変わりますね。

以下にスクロールアニメーションの例としてコードを紹介します。
スクロールアニメーションにはさまざまな実装方法がありますので、あくまで一例として参考にしてください。
HTMLもCSSもJSもいろいろと触ってみてくださいね。

スクロールアニメーションの例（クリックorタップで開きます）

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<meta name="robots" content="noindex,nofollow" />
		<title>JavaScript スクロールアニメーション</title>
		<link rel="stylesheet" href="reset.css" />
		<link rel="stylesheet" href="style.css" />
	</head>
<body>
  <header>
    <h1 class="header__title">スクロールアニメーションのデモ</h1>
  </header>
  <section class="section section__bg1">
    <h2 class="section__title fade-in">ようこそ！</h2>
  </section>
  <section class="section section__bg2">
    <h2 class="section__title fade-in">スクロールしてみてください</h2>
  </section>
  <section class="section section__bg3">
    <h2 class="section__title fade-in">ふわっと現れましたね！</h2>
  </section>
  <script src="script.js"></script>
</body>
</html>

body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

section {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.js-show {
	opacity: 1;
	transform: translateY(0);
}

.section__bg1 {
	background-color: #f3f8ff;
}
.section__bg2 {
	background-color: #e0f7f3;
}
.section__bg3 {
	background-color: #fff5e6;
}

// ふわっと表示させたい要素をすべて取得
const fadeElems = document.querySelectorAll(".fade-in");

// スクロールで要素が見えたタイミングを監視
const observer = new IntersectionObserver(
	(entries) => {
		entries.forEach((entry) => {
			// 画面に入ったらクラスを追加
			if (entry.isIntersecting) {
				entry.target.classList.add("js-show");
				// 一度アニメーションしたら監視を解除
				observer.unobserve(entry.target);
			}
		});
	},
	{ threshold: 0.2 }
);

// 監視をスタート
fadeElems.forEach((elem) => observer.observe(elem));