「ページ切り替え式ギャラリー」の仕組みを解説

(Sample)

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

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

全体構造のポイント

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

<head>内のスタイル（CSS）でデザインを決定
<body>内のHTMLでページ構造を定義
<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>ここがページ１です。</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でページを分けられない

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

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

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

次に学ぶなら？

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

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

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

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