(Sample)

今回は、HTMLとJavaScriptを使って作成された「画像つきページギャラリー」のコードを、Web開発が初めての方にもわかりやすく解説していきます。
ボタンをクリックするとページが切り替わって、画像とテキストが変わる仕組みですね。

まるで紙芝居のようなUI(ユーザーインターフェース)ですが、なぜそれが動くのか、どんな技術が裏にあるのかを一緒に見ていきましょう!


全体構造のポイント

このHTMLは大きく分けて3つのパートで構成されています:

  1. <head>内のスタイル(CSS)でデザインを決定
  2. <body>内のHTMLでページ構造を定義
  3. <script>内のJavaScriptで動きを実現

これらが合わさって「クリックでページが切り替わるWebページ」ができています。


HTMLで「中身(コンテンツ)」を定義

ページの設計

まず注目すべきはここ:

<div id="page1" class="page active">
  <h1>ページ 1</h1>
  <img src="https://picsum.photos/600/400?random=1" alt="Random image 1">
  <p>ここがページ1です。</p>
</div>

これは1ページ分の内容を表しています。

  • id="page1":JavaScriptでこのページを特定するための名前
  • class="page active":CSSとJavaScriptの両方で使う見た目と動作のラベル

ページ2〜5も同様に、同じ構造で作られています。

h3: ボタンとカウンター

<button id="nextPageBtn">
  次のページへ (<span id="counter">1</span>/5)
</button>

  • id="nextPageBtn":JavaScriptで「このボタンが押された」と判定するための識別子
  • <span id="counter">1</span>:今表示されているページの番号を示す場所

CSSで「見た目」を整える

画面を中央に配置

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

これは「Flexbox(フレックスボックス)」というCSSの機能です。

例えで言うと、Flexboxは「内容を自動でキレイに並べてくれる整列ツール」です。
justify-contentは「横方向の中央揃え」、align-itemsは「縦方向の中央揃え」です。


JavaScriptで「動作」を実装

ページを切り替えるロジック

以下が肝心の部分です:

const pages = ['page1','page2','page3','page4','page5'];
let currentIndex = 0;

btn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % pages.length;
  document.querySelectorAll('.page').forEach(el => el.classList.remove('active'));
  document.getElementById(pages[currentIndex]).classList.add('active');
  counter.textContent = currentIndex + 1;
});

解説:

  • currentIndex:現在表示しているページ番号(0からスタート)
  • pages.length:ページの総数(この場合は5)

%(モジュロ演算子)って?

例えば:

(currentIndex + 1) % 5

これは「5で割った余り」を出します。

  • 0+1 = 1 → 1 % 5 = 1
  • 4+1 = 5 → 5 % 5 = 0

つまり、5ページ目の次はまた1ページ目に戻るという仕組みです!


状態の切り替えは「class」で制御

document.querySelectorAll('.page').forEach(el => el.classList.remove('active'));

このコードは「すべてのページの表示を一度オフに」しています。

そして、

document.getElementById(pages[currentIndex]).classList.add('active');

で「今表示したいページだけをオン」にします。


メリットとデメリット

項目内容
メリット単純な実装でページ切り替えが可能、1ファイルで完結する
デメリットページ数が多いとHTMLが肥大化する、URLでページを分けられない

例: 商品紹介ページなら向いてるけど、記事一覧のような複雑な構造には不向きです。


よく出てくる専門用語のおさらい

用語意味
HTMLWebページの構造を記述する言語。例:ページ1の内容など
CSS見た目を整える言語。例:文字の色や中央揃えなど
JavaScript動きをつける言語。例:ボタンを押したら次のページが表示される
DOM(Document Object Model)JavaScriptがHTMLを操作できるようにした構造
Flexbox要素を縦・横に並べるためのCSSの仕組み
クラス(class)CSSやJSで要素をグループ分けするラベルみたいなもの

次に学ぶなら?

このページ切り替えは「JavaScriptでDOM操作を学ぶ入り口」として最適です!

次のステップとしてはこんな内容がオススメです:

  • JavaScriptのsetTimeout()setInterval()で自動切り替えを実装してみる
  • ページごとに異なるURL(ルーティング)を付ける方法を学ぶ(SPA:Single Page Applicationの基本)

どんどん実験して、理解を深めていきましょう!わからないことがあったら、いつでも聞いてくださいね。

(Sample)

最後までお読みいただきありがとうございます。