【保存版】もっと読むボタン＆無限スクロールの作り方をやさしく解説！（コピペでもできる！）

「記事が長くなりすぎて、読者が離脱してしまう…」
「もっと読むボタンって、どうやって作るの？」

そんな悩みを持つWeb制作者の方へ。
今回ご紹介するのは、ページ表示を最適化する「もっと読むボタン」と「無限スクロール」の作り方です。

いずれもユーザー体験を快適に保つ定番UIパーツですが、意外と正しく作るのは難しいもの。
そこで今回は、HTML・CSS・JavaScriptを使った初心者向けの丁寧な解説をお届けします！

🎬 完成イメージ

---

📂 ファイル構成（分割型）

load-more-scroll/
├─ index.html         ← HTML本体
├─ css/
│   └─ style.css      ← 見た目とレスポンシブ対応
└─ js/
    └─ script.js      ← ボタン制御／スクロール監視処理

---

STEP1 「もっと読む」ボタンで段階的に表示しよう

まずは、最初のアイテムだけを表示し、残りを非表示にしておく仕組みを作ります。

<section id="itemList">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
  <div class="item">アイテム4</div>
  <div class="item">アイテム5</div>
  <div class="item">アイテム6</div>
</section>

<button id="loadMoreBtn">もっと読む</button>

---

CSSで初期表示を制御

.item {
  display: none;
  margin: 1rem 0;
}

.item.show {
  display: block;
}

---

解説

---

次のSTEPでは、クリックするたびに一定数ずつアイテムを表示する処理を加えていきます。

---

STEP2 クリックで表示を増やすJSを追加しよう

ここでは、「もっと読む」ボタンをクリックしたときに、アイテムを一定数ずつ表示していく処理をJavaScriptで実装していきます。

以下のコードを js/script.js に記述します。

// 表示対象のアイテムを全て取得
const items = document.querySelectorAll('.item');

// ボタン要素を取得
const loadMoreBtn = document.getElementById('loadMoreBtn');

// 現在表示されている件数（初期は0）
let currentIndex = 0;

// 1回のクリックで増やす件数
const itemsPerClick = 3;

// 最初の表示処理（初期化）
showItems();

// ボタンがクリックされたら、次のアイテムを表示
loadMoreBtn.addEventListener('click', showItems);

// アイテムを表示する関数
function showItems() {
  // 次に表示すべき範囲を計算
  const nextIndex = currentIndex + itemsPerClick;

  // 対象範囲のアイテムを表示
  for (let i = currentIndex; i < nextIndex && i < items.length; i++) {
    items[i].classList.add('show'); // display: block にする
  }

  // 表示済みのインデックスを更新
  currentIndex = nextIndex;

  // すべて表示し終えたらボタンを非表示に
  if (currentIndex >= items.length) {
    loadMoreBtn.style.display = 'none';
  }
}

---

✅ 解説

これで「もっと読むボタン」で段階的に要素を表示する仕組みが完成しました。

次はこの仕組みをボタンなしで自動表示させる「無限スクロール」版に拡張していきましょう。

---

STEP3 無限スクロールの実装（Intersection Observer）

ユーザーが画面の一番下に近づいたタイミングで、次のアイテムを自動的に表示する方法です。
今回は「Intersection Observer API」を使って、監視対象エリアに入ったら処理を発火させる仕組みにします。

この先の実装こそが本番です！

「もっと読むボタン」は入門レベル。
本当に差がつくのは、無限スクロールや外部データ連携といった“応用力”です。

たとえば、スクロールするだけで自動で読み込まれる「無限スクロール」や、外部のJSON・APIからデータを取得してリスト表示する処理は、実案件でも非常に高確率で求められるスキルです。

---

✅ このスキルが身につくとどうなるか？

---

✅ この記事でできるようになること

---

✨ プロンプト付きでChatGPTにも頼れる！

自分で書けるだけでなく、ChatGPTを活用して構造的に組めるように設計しているので、一度覚えれば反復・拡張も自在です。

---

→ 読んだその日から「使える」内容に仕上げました。
今後、仕事としてコーディングを受けたい・任されたいと考えている方は、ぜひ手に取って学んでみてください！

---

次回予告｜ログイン機能（会員登録＋セッション管理）

次回は、Webアプリケーションに欠かせない「ログイン機能」の基礎を学びます。
セッション管理やパスワードの安全な扱い方など、PHPを使った実践的な内容になります。

---

✨ 定期購読のご案内

noteメンバーシップでは、以下のような特典をご用意しています！

• あなたのコードを添削＆アドバイス（HTML／CSS／JavaScript／PHP対応）
• Zoom相談での個別サポート（月1回）
• 実務にも使えるテンプレートの先行配布
• ChatGPT活用ノウハウやプロンプト共有

「もっと学びたい」「詰まったときに相談したい」という方は、ぜひメンバー登録をご検討ください！

👉 あなたの「できた！」を、これからも一緒にサポートします。