自己紹介スライドショーを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLファイルを作ろう

スライド表示エリア、前へ/次へボタン、ページ番号を配置しましょう。

id="slide" はJavaScriptからスライド内容を書き換えるために使います。

id="prev" と id="next" でボタンにクリックイベントを設定します。

3つのファイル（HTML, CSS, JS）は同じフォルダに置いてください。

ブラウザで開いて、空のカードとボタンが表示されることを確認しましょう。

💡 ヒント
index.html, style.css, script.js を作成します。スライド表示エリアとナビゲーションボタンを配置します。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自己紹介スライドショー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app">
    <div id="slide" class="slide"></div>
    <div class="nav">
      <button id="prev">← 前</button>
      <button id="next">次 →</button>
    </div>
    <p class="counter" id="counter"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>
2

スライドデータを配列で作ろう

自己紹介の内容を4枚以上のスライドデータとして配列で作りましょう。

オブジェクトの構造: 各スライドは title（タイトル）と content（内容）の2つのプロパティを持つオブジェクトです。

配列の中にオブジェクトを並べることで、複数のスライドデータを管理できます。

内容は自分の情報に自由に書き換えてください。

slides.length でスライドの枚数を取得できます。後のステップで使います。

💡 ヒント
各スライドをオブジェクト（title と content）にして配列に入れます。自己紹介の内容を4枚以上作りましょう。

参考: JS レッスン4: 繰り返し

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

const slides = [
  { title: "👋 はじめまして！", content: "名前：田中太郎<br>中学2年生です" },
  { title: "📚 好きな教科", content: "数学と体育が好きです！" },
  { title: "🎮 趣味", content: "ゲームとプログラミング" },
  { title: "🎯 将来の夢", content: "ゲームクリエイターになりたい！" }
];
3

スライド表示関数を作ろう

現在のスライドを表示する関数を作りましょう。ページ番号も更新します。

slides[current] で現在のスライドデータを取得し、innerHTML で表示エリアを書き換えます。

最後の showSlide() で最初のスライドを表示します（これがないと画面が空のままです）。

中間確認: ブラウザで開いて、最初のスライドが表示されることを確認しましょう。まだボタンは動きません。

💡 ヒント
現在のスライド番号を変数で管理し、innerHTML でスライドの中身を書き換えます。

参考: JS レッスン6: DOM操作

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

let current = 0;
const slideEl = document.getElementById("slide");
const counterEl = document.getElementById("counter");

function showSlide() {
  const s = slides[current];
  slideEl.innerHTML = "<h2>" + s.title + "</h2><p>" + s.content + "</p>";
  counterEl.textContent = (current + 1) + " / " + slides.length;
}
showSlide();
4

前へ/次へボタンの処理を書こう

前へ/次へボタンでスライドを切り替える処理を書きましょう。最後まで行ったら最初に戻るようにします。

% 演算子の仕組み:

(current + 1) % slides.length は「1増やして、スライド数で割った余り」です。

例: スライドが4枚のとき、current が 3（最後）→ (3+1) % 4 = 0（最初に戻る）

前へボタン: (current - 1 + slides.length) % slides.length で、0のとき最後に飛びます。

+ slides.length を足すのは、マイナスになるのを防ぐためです。

確認: 次へボタンで最後のスライドの次が最初に戻ること、前へボタンで最初のスライドの前が最後に飛ぶことを確認しましょう。

ページ番号（1/4, 2/4...）も正しく更新されていればOKです。

💡 ヒント
次へは current を1増やし、最後なら0に戻します。前へは1減らし、0未満なら最後に飛ばします。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

document.getElementById("next").addEventListener("click", function() {
  current = (current + 1) % slides.length;
  showSlide();
});

document.getElementById("prev").addEventListener("click", function() {
  current = (current - 1 + slides.length) % slides.length;
  showSlide();
});
5

CSSでデザインを整えて完成！

CSSでカードデザインを整えて完成です！自分の情報に書き換えてみましょう。

min-height: 180px をスライドエリアに設定すると、スライドの内容量が違ってもカードの高さがガタつきません。

display: flex; justify-content: center; align-items: center; でスライド内容を中央に配置します。

発展課題:

・setInterval で3秒ごとに自動で次のスライドに進むようにしてみよう

・opacity と transition でフェードアニメーションを追加してみよう

・スライドを6枚以上に増やしてみよう

・各スライドに背景色を設定してみよう

💡 ヒント
カードを中央配置し、スライドエリアに min-height を設定してガタつきを防ぎます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

* { box-sizing: border-box; margin: 0; }
body { font-family: sans-serif; background: #f0f4ff; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.app { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 32px; width: 400px; text-align: center; }
.slide { min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.slide h2 { font-size: 1.3rem; color: #3a86ff; margin-bottom: 12px; }
.slide p { color: #555; line-height: 1.6; }
.nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
button { padding: 8px 20px; border: none; border-radius: 8px; background: #3a86ff; color: #fff; cursor: pointer; }
.counter { margin-top: 12px; font-size: 13px; color: #888; }
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら