HTMLとCSSで作ったWebページに、JavaScriptを使って動きを追加 してみましょう！
今回は、以下のようなアニメーションを実装します。
✅ ボタンをクリックするとプロフィール情報が表示される
✅ 自己紹介がフェードインする
1. JavaScriptを追加する準備
まず、script.js というファイルを作成し、HTMLに読み込ませます。
index.html に JavaScript を追加
htmlCopy<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のプロフィール</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>私のプロフィール</h1>
</header>
<section class="profile">
<img src="profile.jpg" alt="プロフィール画像">
<h2>山田 太郎</h2>
<p>Webデザイナー | フロントエンドエンジニア</p>
<button id="toggleProfile">プロフィールを見る</button>
<div id="profileDetail" class="hidden">
<p>好きな技術: HTML, CSS, JavaScript</p>
<p>趣味: 写真撮影とカフェ巡り</p>
</div>
</section>
<section class="about">
<h2>自己紹介</h2>
<p id="aboutText">こんにちは！私はWebデザインとフロントエンド開発が大好きです。HTMLとCSSを使ってシンプルで美しいWebページを作るのが得意です。</p>
</section>
<footer>
<p>© 2024 山田 太郎</p>
</footer>
<!-- JavaScriptの読み込み -->
<script src="script.js"></script>
</body>
</html>
🔹 ポイント
✅ script.js を <body> の最後に読み込む（ページが先に読み込まれるように）。
✅ <button> を追加し、クリックすると詳細が表示されるようにする。
✅ id="profileDetail" に .hidden クラスを追加（CSSで非表示にする）。
2. CSSで動きをつける準備
次に、style.css にアニメーションのスタイルを追加します。
style.css にアニメーション用のCSSを追加
cssCopy/* プロフィール詳細を最初は非表示 */
.hidden {
display: none;
}
/* フェードインアニメーション */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}
.fade-in.show {
opacity: 1;
transform: translateY(0);
}
🔹 ポイント
✅ .hidden で display: none; にして、最初は非表示に。
✅ .fade-in でフェードインの動きを作成し、JavaScriptでクラスを追加。
3. JavaScriptで動きをつける
次に、script.js にクリックしたら詳細を表示する動きを追加します。
script.js にJavaScriptを記述
jsCopydocument.addEventListener("DOMContentLoaded", function () {
// ボタンをクリックするとプロフィール詳細を表示
const toggleButton = document.getElementById("toggleProfile");
const profileDetail = document.getElementById("profileDetail");
toggleButton.addEventListener("click", function () {
if (profileDetail.classList.contains("hidden")) {
profileDetail.classList.remove("hidden");
toggleButton.textContent = "プロフィールを隠す";
} else {
profileDetail.classList.add("hidden");
toggleButton.textContent = "プロフィールを見る";
}
});
// 自己紹介をフェードインさせる
const aboutText = document.getElementById("aboutText");
aboutText.classList.add("fade-in");
window.addEventListener("load", function () {
setTimeout(() => {
aboutText.classList.add("show");
}, 500);
});
});
🔹 JavaScriptのポイント
✅ DOMContentLoaded イベントでページの読み込みが完了したらスクリプトを実行。
✅ ボタンをクリック すると hidden クラスを切り替え、詳細表示のON/OFF。
✅ ページ読み込み時 に fade-in クラスを追加し、自己紹介をフェードイン。
4. 実際に動作を確認しよう！
① ローカルで開く
index.htmlをダブルクリックしてブラウザで開く。- 「プロフィールを見る」ボタンを押して、詳細が表示されるか確認。
- ページを更新すると、自己紹介がフェードインするのを確認。
② Live Serverで確認
VSCodeのLive Server拡張機能を使うと、リアルタイムで変更を確認できます。
5. さらにカスタマイズしてみよう！
✅ ボタンの色を変える
クリック時に toggleButton の背景色を変更する。
✅ スライドアニメーションを追加
CSSの transform を使って詳細をスライド表示する。
✅ 背景を動かす JavaScriptで document.body.style.backgroundColor = "#ffebcd"; などを使う。
まとめ
JavaScriptを使って、簡単な動きを追加しました！💻✨
✅ ボタンを押すと詳細を表示/非表示
✅ 自己紹介がフェードインするアニメーションを追加
シンプルな機能ですが、Webページに動きを加えるだけでグッと魅力的になります！
ぜひカスタマイズして、オリジナルの動きを作ってみましょう！🚀
コメント