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

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

HTMLファイルを作ろう

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

💡 ヒント
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）にして配列に入れます。自己紹介の内容を4枚以上作りましょう。

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

📝 模範解答を見る

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

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

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

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

💡 ヒント
現在のスライド番号を変数で管理し、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増やし、最後なら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 を設定してガタつきを防ぎます。
📝 模範解答を見る

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

* { 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; }
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら