JavaScriptで「もっと見る」ボタンを作る！クリックで表示・閉じる・10件ずつ展開まで対応した実装方法を徹底解説！

Webページやアプリでよく見かける「もっと見る」ボタン。たとえば、ブログ記事一覧や口コミ表示などで、最初は一部だけを表示し、必要に応じて続きを表示する──そんな場面で使われますよね。でもいざ実装しようと思うと、「JavaScriptでどうやって表示を切り替えるの？」「複数あるときはどうする？」「n件ずつ表示させたいけど難しそう…」と、意外とつまずきやすいのがこの「もっと見るボタン」です。

この記事では、HTML・CSS・JavaScriptを使って、「もっと見る」ボタンを実際に動く形で実装する方法をわかりやすく解説します。さらに、10件ずつ表示、開閉対応、複数ボタンへの対応といった応用パターンまで幅広くカバー。コピペで使える動作確認済みのコードも用意しているので、すぐに実装に取りかかれるはずです。

もっと見るボタンの基本構造と実装方法【HTML＋CSS＋JavaScript対応】

コンテンツが増えてくると、ページが縦に長くなってしまう問題が発生します。そこで重宝するのが「もっと見る」ボタンです。この機能を実装することで、最初は一部のコンテンツだけを表示し、ユーザーが「もっと見る」ボタンをクリックすると残りのコンテンツが表示される仕組みを作ることができます。

この記事では、「もっと見る」ボタンの実装方法をHTML、CSS、JavaScriptを使って段階的に解説します。初心者の方でも理解しやすいように、シンプルな実装から応用的な使い方まで幅広くカバーしていきます。

HTMLとCSSで作るシンプルな「もっと見る」ボタンの基本構造

まずは「もっと見る」ボタンの基本的な構造をHTMLとCSSで作っていきましょう。この基本構造を理解することで、後ほどJavaScriptを使った動的な実装も容易になります。

基本となるHTML構造

「もっと見る」ボタンの基本的なHTML構造は以下のようになります。

<div class="content-container">
  <!-- 最初から表示される内容 -->
  <div class="visible-content">
    <p>ここに最初から表示されるコンテンツが入ります。</p>
    <p>短めの内容で、ユーザーの興味を引くものにしましょう。</p>
  </div>

  <!-- クリックで表示される内容 -->
  <div class="hidden-content">
    <p>ここに「もっと見る」ボタンをクリックした後に表示されるコンテンツが入ります。</p>
    <p>詳細情報や追加コンテンツなど、より深い内容を提供します。</p>
  </div>

  <!-- もっと見るボタン -->
  <button class="more-button">もっと見る</button>
</div>

この構造では、コンテンツ全体を包む「content-container」の中に、最初から表示される「visible-content」と、クリック後に表示される「hidden-content」、そして「もっと見る」ボタンを配置しています。

CSSで隠す仕組み

次に、CSSを使って「hidden-content」を最初は非表示にし、ボタンをクリックした時に表示されるようにします。

/* コンテナのスタイル */
.content-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 最初から表示されるコンテンツ */
.visible-content {
  margin-bottom: 15px;
}

/* 隠れているコンテンツ（初期状態） */
.hidden-content {
  display: none; /* 最初は非表示 */
}

/* 表示状態のクラス（JavaScriptで付与） */
.show {
  display: block;
}

/* もっと見るボタンのスタイル */
.more-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.more-button:hover {
  background-color: #45a049;
}

このCSSでは、.hidden-contentクラスにdisplay: none;を適用して、最初は非表示にしています。後ほどJavaScriptで.showクラスを追加することで、display: block;になり表示されるようにします。

また、ボタン自体にもスタイルを適用し、見た目を整えています。ホバー時にも色が変わるようにして、ユーザーにクリック可能であることを示しています。

JavaScriptで作る：クリックで隠れたコンテンツを表示する仕組み

ここからが本題の「もっと見る」ボタンの機能面です。JavaScriptを使って、ボタンをクリックしたときに隠れたコンテンツを表示する仕組みを実装します。

基本的なJavaScriptコード

もっとも基本的な「もっと見る」ボタンの機能を実装するJavaScriptコードは以下のようになります。

// DOMが完全に読み込まれた後に実行
document.addEventListener('DOMContentLoaded', function() {
  // 必要な要素を取得
  const moreButton = document.querySelector('.more-button');
  const hiddenContent = document.querySelector('.hidden-content');

  // ボタンがクリックされたときの処理
  moreButton.addEventListener('click', function() {
    // hidden-contentの表示/非表示を切り替え
    hiddenContent.classList.toggle('show');

    // ボタンのテキストを変更
    if (hiddenContent.classList.contains('show')) {
      moreButton.textContent = '閉じる';
    } else {
      moreButton.textContent = 'もっと見る';
    }
  });
});

このコードでは、DOMが完全に読み込まれた後に、「もっと見る」ボタンと隠れたコンテンツの要素を取得します。ボタンがクリックされたとき、隠れたコンテンツの表示/非表示を切り替え、ボタンのテキストも「もっと見る」と「閉じる」の間で切り替わるようにしています。

アニメーション効果の追加

単純に表示/非表示を切り替えるだけでなく、アニメーション効果を加えることで、よりスムーズな動きを実現できます。CSSのtransitionプロパティを活用しましょう。

/* 隠れているコンテンツ（初期状態） */
.hidden-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

/* 表示状態のクラス */
.show {
  max-height: 1000px; /* コンテンツの最大高さに合わせて調整 */
}

これにより、コンテンツが徐々に展開されるようなアニメーション効果が生まれます。JavaScriptは先ほどと同じコードで動作します。

スムーズなスクロール効果の追加

長いコンテンツが表示されると、ユーザーはスクロールしなければならなくなります。そこで、コンテンツが表示された後に、そのコンテンツの先頭に自動的にスクロールする機能を追加することで、ユーザー体験を向上させることができます。

// DOMが完全に読み込まれた後に実行
document.addEventListener('DOMContentLoaded', function() {
  // 必要な要素を取得
  const moreButton = document.querySelector('.more-button');
  const hiddenContent = document.querySelector('.hidden-content');

  // ボタンがクリックされたときの処理
  moreButton.addEventListener('click', function() {
    // hidden-contentの表示/非表示を切り替え
    hiddenContent.classList.toggle('show');

    // ボタンのテキストを変更
    if (hiddenContent.classList.contains('show')) {
      moreButton.textContent = '閉じる';

      // コンテンツが表示された場合、その位置にスムーズにスクロール
      setTimeout(function() {
        hiddenContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 100); // トランジションが始まった後に少し遅らせてスクロール
    } else {
      moreButton.textContent = 'もっと見る';
    }
  });
});

このコードでは、scrollIntoViewメソッドを使用して、コンテンツが表示された後に、そのコンテンツの位置にスムーズにスクロールする機能を追加しています。

コピペOK！動作確認済みのもっと見るボタン実装コード例

ここでは、実際にコピー＆ペーストして使える「もっと見る」ボタンの完全なコード例を紹介します。この例では、HTML、CSS、JavaScriptをすべて一つのファイルにまとめていますが、実際の開発では適切に分割することをお勧めします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>もっと見るボタン実装例</title>
  <style>
    /* 全体のスタイル */
    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    /* コンテナのスタイル */
    .content-container {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 30px;
      background-color: #f9f9f9;
    }

    /* 最初から表示されるコンテンツ */
    .visible-content {
      margin-bottom: 15px;
    }

    /* 隠れているコンテンツ（初期状態） */
    .hidden-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease-out;
      opacity: 0;
    }

    /* 表示状態のクラス */
    .hidden-content.show {
      max-height: 2000px; /* コンテンツに合わせて調整 */
      opacity: 1;
      transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    }

    /* もっと見るボタンのスタイル */
    .more-button {
      display: block;
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
      margin: 10px 0;
    }

    .more-button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>もっと見るボタン実装例</h1>

  <div class="content-container">
    <h2>記事タイトル</h2>

    <!-- 最初から表示される内容 -->
    <div class="visible-content">
      <p>これは最初から表示されるコンテンツの例です。サイトやブログにおいて、最初に読者に見せたい重要な情報や概要を記載します。</p>
      <p>情報の一部だけを表示することで、ページの読み込み速度を上げたり、ユーザーの関心を引いたりすることができます。</p>
    </div>

    <!-- クリックで表示される内容 -->
    <div class="hidden-content">
      <p>ここからは「もっと見る」ボタンをクリックした後に表示される追加コンテンツです。</p>
      <p>詳細情報や補足説明、追加の画像やリンクなど、より深い内容を提供することができます。</p>
      <p>ユーザーが必要に応じて読み進められるため、情報の整理とユーザビリティの向上に役立ちます。</p>
      <p>長いコンテンツでも、この「もっと見る」ボタンを活用することで、ページを短く見せつつ、必要な情報はすべて提供することができます。</p>
    </div>

    <!-- もっと見るボタン -->
    <button class="more-button">もっと見る</button>
  </div>

  <script>
    // DOMが完全に読み込まれた後に実行
    document.addEventListener('DOMContentLoaded', function() {
      // 必要な要素を取得
      const moreButton = document.querySelector('.more-button');
      const hiddenContent = document.querySelector('.hidden-content');

      // ボタンがクリックされたときの処理
      moreButton.addEventListener('click', function() {
        // hidden-contentの表示/非表示を切り替え
        hiddenContent.classList.toggle('show');

        // ボタンのテキストを変更
        if (hiddenContent.classList.contains('show')) {
          moreButton.textContent = '閉じる';
        } else {
          moreButton.textContent = 'もっと見る';
          // コンテンツを閉じた場合、ボタンの位置にスクロール
          moreButton.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      });
    });
  </script>
</body>
</html>

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

この完全なコード例では、以下の機能を実装しています：

1. スタイリングされた「もっと見る」ボタン
2. クリックで隠れたコンテンツを表示/非表示
3. ボタンのテキストが「もっと見る」と「閉じる」で切り替わる
4. 表示/非表示のアニメーション効果
5. コンテンツを閉じた場合にボタンの位置にスクロール

これをHTMLファイルにコピー＆ペーストするだけで、「もっと見る」ボタンの基本機能を実装できます。必要に応じて、コンテンツやスタイルをカスタマイズしてください。

モバイル対応のポイント

スマートフォンなどのモバイルデバイスでも適切に表示されるように、以下のポイントに注意しましょう：

1. ボタンのサイズを十分に大きくして、タップしやすくする
2. コンテンツの幅が画面に合わせて調整されるようにする
3. フォントサイズを読みやすいサイズに設定する

/* モバイル対応のためのメディアクエリ */
@media (max-width: 768px) {
  .more-button {
    padding: 12px 20px; /* より大きなタップエリア */
    width: 100%; /* 幅いっぱいに広げる */
    font-size: 18px; /* より大きなフォントサイズ */
  }
}

これらのコードを組み合わせることで、デスクトップからモバイルまで幅広いデバイスで適切に機能する「もっと見る」ボタンを実装することができます。

JavaScriptで実現する高度なもっと見る機能【10件ずつ・開閉式対応】

基本的な「もっと見る」ボタンの実装を理解したら、次はより高度な機能を持つボタンの実装方法を見ていきましょう。多くのWebサイトやアプリケーションでは、コンテンツを一度にすべて表示するのではなく、ユーザーの操作に応じて段階的に表示する方法が採用されています。ここでは、JavaScriptを活用した高度な「もっと見る」ボタンの実装方法について詳しく解説します。

リストを「10件ずつ」段階的に表示する方法とコード

大量のデータやリストがある場合、最初から全てを表示するとページの読み込みが遅くなったり、ユーザーが情報過多になったりする問題があります。そこで、最初は一部だけを表示し、「もっと見る」ボタンをクリックするたびに追加のコンテンツを表示する方法が効果的です。

基本的な考え方

1. 初期状態では一定数（例：10件）のアイテムのみを表示
2. ボタンクリック時に追加のアイテムを表示
3. 全てのアイテムが表示されたらボタンを非表示にする

実装例：10件ずつ表示するもっと見るボタン

まず、HTML構造から見ていきましょう：

<div class="list-container">
  <ul id="item-list">
    <!-- リストアイテムが入ります -->
    <li class="list-item">アイテム 1</li>
    <li class="list-item">アイテム 2</li>
    <!-- 以下同様に多数のアイテム -->
  </ul>

  <button id="load-more-btn">もっと見る</button>
</div>

続いて、CSS部分です：

.list-container {
  max-width: 800px;
  margin: 0 auto;
}

.list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: none; /* 初期状態では非表示 */
}

.list-item.visible {
  display: block; /* 表示するアイテムにはvisibleクラスを付与 */
}

#load-more-btn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#load-more-btn:hover {
  background-color: #45a049;
}

そして、JavaScript部分の実装です：

document.addEventListener('DOMContentLoaded', function() {
  // 必要な要素を取得
  const itemList = document.getElementById('item-list');
  const items = itemList.querySelectorAll('.list-item');
  const loadMoreBtn = document.getElementById('load-more-btn');

  // 設定値
  const itemsPerLoad = 10; // 1回に表示するアイテム数
  let currentlyShown = 0;  // 現在表示されているアイテム数

  // 初期表示（最初の10件を表示）
  showNextItems();

  // もっと見るボタンのクリックイベント
  loadMoreBtn.addEventListener('click', showNextItems);

  // 追加アイテムを表示する関数
  function showNextItems() {
    // 次に表示すべきアイテムの範囲を計算
    let startIndex = currentlyShown;
    let endIndex = Math.min(currentlyShown + itemsPerLoad, items.length);

    // 指定範囲のアイテムに表示用のクラスを追加
    for (let i = startIndex; i < endIndex; i++) {
      items[i].classList.add('visible');
    }

    // 現在表示中のアイテム数を更新
    currentlyShown = endIndex;

    // 全てのアイテムが表示されたらボタンを非表示にする
    if (currentlyShown >= items.length) {
      loadMoreBtn.style.display = 'none';
    }
  }
});

See the Pen more-read-02 by watashi-xyz (@watashi-xyz) on CodePen.

この実装では、DOMが読み込まれた後に初期状態として最初の10件を表示し、「もっと見る」ボタンをクリックするたびに次の10件を表示します。そして全てのアイテムが表示されたら「もっと見る」ボタン自体を非表示にします。

動的なリストアイテムの生成

実際のアプリケーションでは、リストアイテムを動的に生成することも多いでしょう。例えば、APIから取得したデータを元にリストを作成する場合などです。

document.addEventListener('DOMContentLoaded', function() {
  // サンプルデータ（実際のアプリではAPIから取得するなど）
  const allItems = [];
  for (let i = 1; i <= 50; i++) {
    allItems.push(`アイテム ${i}: サンプルコンテンツ`);
  }

  // 必要な要素を取得
  const itemList = document.getElementById('item-list');
  const loadMoreBtn = document.getElementById('load-more-btn');

  // 設定値
  const itemsPerLoad = 10; // 1回に表示するアイテム数
  let currentlyShown = 0;  // 現在表示されているアイテム数

  // 初期表示（最初の10件を表示）
  showNextItems();

  // もっと見るボタンのクリックイベント
  loadMoreBtn.addEventListener('click', showNextItems);

  // 追加アイテムを表示する関数
  function showNextItems() {
    // 次に表示すべきアイテムの範囲を計算
    let startIndex = currentlyShown;
    let endIndex = Math.min(currentlyShown + itemsPerLoad, allItems.length);

    // 指定範囲のアイテムをDOMに追加
    for (let i = startIndex; i < endIndex; i++) {
      const item = document.createElement('li');
      item.className = 'list-item visible';
      item.textContent = allItems[i];
      itemList.appendChild(item);
    }

    // 現在表示中のアイテム数を更新
    currentlyShown = endIndex;

    // 全てのアイテムが表示されたらボタンを非表示にする
    if (currentlyShown >= allItems.length) {
      loadMoreBtn.style.display = 'none';
    }
  }
});

この方法なら、最初からすべてのリストアイテムを用意する必要がなく、表示が必要になったタイミングで動的に生成できます。特に大量のデータを扱う場合は、初期ロード時のパフォーマンス向上につながります。

「もっと見る」と「閉じる」を切り替える開閉式ボタンの実装

次に、コンテンツを表示/非表示を切り替えられるトグル機能を持つ「もっと見る」ボタンの実装方法を見ていきましょう。この機能は、FAQセクションやアコーディオンメニューなどでよく使われています。

HTML構造

<div class="accordion-container">
  <div class="content-section">
    <h3>セクションタイトル</h3>
    <div class="visible-content">
      <!-- 常に表示されるコンテンツ -->
      <p>ここは常に表示されるコンテンツ部分です。簡潔な説明や概要を記載します。</p>
    </div>
    <div class="hidden-content">
      <!-- 初期状態では非表示のコンテンツ -->
      <p>ここは初期状態で非表示のコンテンツです。詳細情報や補足説明などを記載します。</p>
      <p>長文や詳細なコンテンツを配置するのに適しています。</p>
    </div>
    <button class="toggle-btn">もっと見る</button>
  </div>

  <!-- 同様のセクションを複数配置可能 -->
</div>

CSS部分

.accordion-container {
  max-width: 800px;
  margin: 0 auto;
}

.content-section {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
}

.hidden-content {
  display: none;
  padding-top: 10px;
  border-top: 1px dotted #eee;
  margin-top: 10px;
}

.hidden-content.open {
  display: block;
  animation: fadeIn 0.5s;
}

.toggle-btn {
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  padding: 5px 15px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}

.toggle-btn:hover {
  background-color: #e9ecef;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

JavaScript実装

document.addEventListener('DOMContentLoaded', function() {
  // すべてのトグルボタンを取得
  const toggleButtons = document.querySelectorAll('.toggle-btn');

  // 各ボタンにイベントリスナーを設定
  toggleButtons.forEach(button => {
    button.addEventListener('click', function() {
      // このボタンの親要素内にある非表示コンテンツを取得
      const hiddenContent = this.parentNode.querySelector('.hidden-content');

      // 表示/非表示を切り替え
      if (hiddenContent.classList.contains('open')) {
        // 現在表示されている場合は閉じる
        hiddenContent.classList.remove('open');
        this.textContent = 'もっと見る';
      } else {
        // 現在非表示の場合は開く
        hiddenContent.classList.add('open');
        this.textContent = '閉じる';
      }
    });
  });
});

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

この実装では、「もっと見る」ボタンをクリックすると追加コンテンツが表示され、ボタンのテキストが「閉じる」に変わります。再度クリックすると追加コンテンツが非表示になり、ボタンのテキストが「もっと見る」に戻ります。

スムーズなアニメーション効果の追加

ユーザーエクスペリエンスを向上させるため、コンテンツの表示/非表示をスムーズに行うアニメーション効果を追加することもできます。

/* CSS部分に以下を追加 */
.hidden-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  padding-top: 0;
  margin-top: 0;
  opacity: 0;
}

.hidden-content.open {
  max-height: 1000px; /* 十分な高さを確保 */
  padding-top: 10px;
  margin-top: 10px;
  opacity: 1;
  transition: all 0.5s ease-out;
}

この方法では、max-heightプロパティを使ってコンテンツの高さを徐々に変化させることで、スムーズな開閉アニメーションを実現しています。

1ページに複数の「もっと見る」ボタンを設置する方法

Webサイトやアプリケーションでは、1つのページ内に複数の「もっと見る」ボタンが必要になる場合があります。例えば、複数のセクションやカテゴリごとにコンテンツを分けて表示する場合などです。

実装のポイント

1. 各セクションに一意のIDやクラスを付与する
2. ボタンとコンテンツの関連付けを明確にする
3. イベントハンドラ内で、どのボタンがクリックされたかを特定する

HTML構造例

<div class="multi-sections">
  <!-- セクション1 -->
  <div class="content-section" id="section-1">
    <h3>カテゴリー1</h3>
    <div class="items-container">
      <!-- 初期表示アイテム -->
      <div class="item visible">アイテム1-1</div>
      <div class="item visible">アイテム1-2</div>
      <div class="item visible">アイテム1-3</div>

      <!-- 非表示アイテム -->
      <div class="item hidden">アイテム1-4</div>
      <div class="item hidden">アイテム1-5</div>
      <div class="item hidden">アイテム1-6</div>
    </div>
    <button class="load-more-btn" data-section="section-1">もっと見る</button>
  </div>

  <!-- セクション2 -->
  <div class="content-section" id="section-2">
    <h3>カテゴリー2</h3>
    <div class="items-container">
      <!-- 初期表示アイテム -->
      <div class="item visible">アイテム2-1</div>
      <div class="item visible">アイテム2-2</div>
      <div class="item visible">アイテム2-3</div>

      <!-- 非表示アイテム -->
      <div class="item hidden">アイテム2-4</div>
      <div class="item hidden">アイテム2-5</div>
      <div class="item hidden">アイテム2-6</div>
    </div>
    <button class="load-more-btn" data-section="section-2">もっと見る</button>
  </div>
</div>

CSS部分

.multi-sections {
  max-width: 800px;
  margin: 0 auto;
}

.content-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.items-container {
  display: grid;
  gap: 10px;
}

.item {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 3px;
}

.item.hidden {
  display: none;
}

.item.visible {
  display: block;
}

.load-more-btn {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.load-more-btn:hover {
  background-color: #0069d9;
}

JavaScript実装

document.addEventListener('DOMContentLoaded', function() {
  // すべての「もっと見る」ボタンを取得
  const loadMoreButtons = document.querySelectorAll('.load-more-btn');

  // 各ボタンにイベントリスナーを設定
  loadMoreButtons.forEach(button => {
    button.addEventListener('click', function() {
      // ボタンのdata-section属性からセクションIDを取得
      const sectionId = this.getAttribute('data-section');

      // 対応するセクションを取得
      const section = document.getElementById(sectionId);

      // セクション内の非表示アイテムを取得
      const hiddenItems = section.querySelectorAll('.item.hidden');

      // 非表示アイテムがなければボタンを無効化
      if (hiddenItems.length === 0) {
        this.disabled = true;
        this.textContent = 'すべて表示済み';
        return;
      }

      // 最大3つまでのアイテムを表示
      let count = 0;
      hiddenItems.forEach(item => {
        if (count < 3) {
          item.classList.remove('hidden');
          item.classList.add('visible');
          count++;
        }
      });

      // すべて表示したらボタンの表示を更新
      if (section.querySelectorAll('.item.hidden').length === 0) {
        this.disabled = true;
        this.textContent = 'すべて表示済み';
      }
    });
  });
});

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

この実装では、各「もっと見る」ボタンにdata-section属性を使って、どのセクションに対応するボタンかを指定しています。ボタンがクリックされると、対応するセクション内の非表示アイテムを最大3つまで表示します。

より効率的な実装方法

大規模なアプリケーションでは、イベント委譲（Event Delegation）を使って効率良くイベントを処理することもできます：

document.addEventListener('DOMContentLoaded', function() {
  // 親要素にイベントリスナーを設定
  document.querySelector('.multi-sections').addEventListener('click', function(event) {
    // クリックされた要素が「もっと見る」ボタンかチェック
    if (event.target.classList.contains('load-more-btn')) {
      const button = event.target;
      const sectionId = button.getAttribute('data-section');
      const section = document.getElementById(sectionId);

      // 以下同様の処理...
      const hiddenItems = section.querySelectorAll('.item.hidden');

      // 処理内容は上記と同じ
      // ...
    }
  });
});

この方法では、個々のボタンではなく親要素にイベントリスナーを設定し、イベントバブリングを利用して処理を行います。多数のボタンがある場合、メモリ使用量を抑えられる利点があります。

純粋なJavaScriptで書く際のイベント処理とDOM操作のポイント

jQuery等のライブラリを使わず、純粋なJavaScript（Vanilla JS）で「もっと見る」ボタンを実装する際のポイントについて解説します。

イベントリスナーの適切な設定

// 要素が存在することを確認してからイベントリスナーを追加
const loadMoreBtn = document.getElementById('load-more-btn');
if (loadMoreBtn) {
  loadMoreBtn.addEventListener('click', handleLoadMore);
}

function handleLoadMore() {
  // イベント処理内容
  console.log('もっと見るがクリックされました');
  // ...
}

特に重要なのは、要素が存在することを確認してからイベントリスナーを追加することです。存在しない要素に対してイベントリスナーを追加しようとすると、JavaScriptエラーが発生します。

効率的なDOM操作

大量の要素を追加する場合は、DocumentFragmentを使うと効率的です：

function addMultipleItems(container, items) {
  // DocumentFragmentを作成（仮想DOM要素）
  const fragment = document.createDocumentFragment();

  // フラグメントに要素を追加
  items.forEach(item => {
    const element = document.createElement('div');
    element.className = 'item visible';
    element.textContent = item;
    fragment.appendChild(element);
  });

  // 一度のDOM操作でフラグメントの内容を追加
  container.appendChild(fragment);
}

DocumentFragmentを使うと、DOM操作の回数を減らすことができ、パフォーマンスが向上します。

スコープとコードの構造化

大規模なアプリケーションでは、コードをモジュール化して可読性と保守性を高めましょう：

// 即時実行関数でスコープを分離
(function() {
  // プライベート変数
  let currentPage = 1;
  const itemsPerPage = 10;

  // 初期化関数
  function init() {
    const loadMoreBtn = document.getElementById('load-more-btn');
    if (loadMoreBtn) {
      loadMoreBtn.addEventListener('click', loadMoreItems);
    }

    // 初期アイテムの表示
    loadMoreItems();
  }

  // アイテム読み込み関数
  function loadMoreItems() {
    // 実装内容...
  }

  // DOMが読み込まれたら初期化を実行
  document.addEventListener('DOMContentLoaded', init);
})();

即時実行関数（IIFE）を使うことで、グローバルスコープを汚染せずにコードを構造化できます。

アニメーションの最適化

CSS transitionとclassの切り替えを組み合わせると、スムーズなアニメーションを実現できます：

function toggleContent(element, button) {
  // クラスの切り替えでCSSトランジションを発動
  if (element.classList.contains('expanded')) {
    element.classList.remove('expanded');
    button.textContent = 'もっと見る';
  } else {
    element.classList.add('expanded');
    button.textContent = '閉じる';
  }
}

対応するCSS：

.hidden-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.hidden-content.expanded {
  max-height: 500px; /* コンテンツの最大高さに合わせて調整 */
}

JavaScriptでアニメーションを制御するよりも、CSSトランジションに任せる方が多くの場合パフォーマンスが良くなります。

エラー処理と例外ハンドリング

より堅牢なコードのためにエラー処理を実装しましょう：

function loadMoreItems() {
  try {
    // データの取得や処理
    const response = fetchMoreData();
    updateUI(response);
  } catch (error) {
    // エラーハンドリング
    console.error('データの読み込み中にエラーが発生しました:', error);
    showErrorMessage('データの読み込みに失敗しました。再試行してください。');
  }
}

function showErrorMessage(message) {
  const errorElement = document.createElement('div');
  errorElement.className = 'error-message';
  errorElement.textContent = message;

  // エラーメッセージを表示
  const container = document.querySelector('.container');
  container.appendChild(errorElement);

  // 数秒後にメッセージを消す
  setTimeout(() => {
    errorElement.remove();
  }, 5000);
}

このような例外処理を実装することで、エラーが発生してもユーザーに適切なフィードバックを提供し、アプリケーションのクラッシュを防ぐことができます。

データ属性の活用

HTML5のdata属性を活用すると、HTMLとJavaScriptの連携がスムーズになります：

<button class="load-more-btn"
        data-target="content-1"
        data-page="1"
        data-max-pages="5">
  もっと見る
</button>

document.querySelector('.load-more-btn').addEventListener('click', function() {
  // data属性から情報を取得
  const targetId = this.dataset.target;
  const currentPage = parseInt(this.dataset.page);
  const maxPages = parseInt(this.dataset.maxPages);

  // ページ番号を更新
  this.dataset.page = currentPage + 1;

  // ページ番号が上限に達したらボタンを無効化
  if (currentPage + 1 >= maxPages) {
    this.disabled = true;
    this.textContent = 'すべて表示済み';
  }

  // コンテンツの読み込み処理
  loadContent(targetId, currentPage + 1);
});

この方法では、HTMLにデータを持たせることで、JavaScriptからアクセスしやすくなります。

「もっと見る」ボタンの高度な実装方法について理解することで、ユーザーエクスペリエンスの向上と、パフォーマンスを両立したWebサイト・アプリケーションの開発が可能になります。次のセクションでは、実装時の注意点とトラブルシューティングについて解説します。

実装前に知っておくべき注意点とトラブルシューティング

「もっと見る」ボタンは非常に便利な UI 要素ですが、実装時には考慮すべきいくつかの重要なポイントがあります。このセクションでは、JavaScript で「もっと見る」ボタンを実装する際に気をつけるべき注意点やよくあるトラブルとその解決方法について詳しく解説します。これらの知識を押さえておくことで、スムーズな実装が可能になるでしょう。

JavaScriptの読み込みタイミングとエラー発生時の確認ポイント

「もっと見る」ボタンの JavaScript が正しく動作しない場合、まず疑うべきなのはスクリプトの読み込みタイミングです。JavaScript コードは HTML 要素が完全に読み込まれた後に実行される必要がありますが、このタイミングを誤ると「要素が見つからない」などのエラーが発生します。

DOMContentLoaded イベントの活用

JavaScript コードは必ず DOM（Document Object Model）が完全に構築された後に実行するようにしましょう。これを保証する最も一般的な方法は DOMContentLoaded イベントを使用することです。

document.addEventListener('DOMContentLoaded', function() {
  // もっと見るボタンの処理をここに記述
  const moreButton = document.getElementById('more-button');

  if (moreButton) {
    moreButton.addEventListener('click', function() {
      // クリック時の処理
    });
  } else {
    console.error('もっと見るボタンが見つかりません。IDを確認してください。');
  }
});

スクリプトの配置場所

HTML ファイル内でのスクリプトの配置場所も重要です。一般的には以下の2つの選択肢があります：

1.body 終了タグの直前に配置する

<body>
  <!-- コンテンツ -->
  <script src="your-script.js"></script>
</body>

2.head 内に defer 属性を付けて配置する

<head>
  <script src="your-script.js" defer></script>
</head>

defer 属性を使用すると、スクリプトの読み込みは HTML の解析と並行して行われますが、実行は HTML の解析が完了した後に行われます。これにより、DOM が完全に構築された状態でスクリプトが実行されることが保証されます。

エラー発生時のデバッグ方法

「もっと見る」ボタンが期待通りに動作しない場合は、以下の手順でデバッグを行いましょう：

1.ブラウザの開発者ツールを開く（Chrome の場合は F12 キー）

2.Console タブを確認し、JavaScript エラーがないかチェック

3.要素の取得に失敗していないか確認するためにログ出力

const moreButton = document.getElementById('more-button');
console.log('ボタン要素:', moreButton); // null の場合は要素が見つかっていない

4.イベントリスナーが正しく登録されているか確認

moreButton.addEventListener('click', function() {
  console.log('ボタンがクリックされました');
  // 処理
});

よくあるエラーとして、セレクタの間違い（ID や Class 名の typo）や、複数の JavaScript ファイルでの競合などがあります。これらを確認することで多くの問題は解決できるでしょう。

大量要素表示時のパフォーマンス問題と対策

「もっと見る」ボタンの主な用途は、大量のコンテンツを段階的に表示することです。しかし、一度に多くの要素を DOM に追加すると、ブラウザのパフォーマンスに影響を与える可能性があります。特にモバイルデバイスでは顕著です。

レンダリングパフォーマンスの最適化

多数の要素を表示する際は、以下の方法でパフォーマンスを向上させることができます：

1.バッチ処理による DOM 操作の最小化
DOM の更新は比較的コストの高い操作です。要素を1つずつ追加するのではなく、複数の要素をまとめて追加することでパフォーマンスを向上させることができます。

// 悪い例：ループ内で毎回 DOM を更新
items.forEach(item => {
  container.appendChild(createItemElement(item));
});

// 良い例：DocumentFragment を使ってバッチ処理
const fragment = document.createDocumentFragment();
items.forEach(item => {
  fragment.appendChild(createItemElement(item));
});
container.appendChild(fragment); // DOM の更新は1回だけ

2.無限スクロールの代わりにページネーション
大量のデータがある場合、「もっと見る」ボタンをクリックするたびに全てのデータを読み込むのではなく、ページネーションを採用することも検討しましょう。これにより、メモリ使用量を抑えることができます。

3.表示アニメーションの最適化
要素の表示時にフェードインなどのアニメーションを使用する場合、CSS の transition プロパティを使用するか、requestAnimationFrame API を活用することで、スムーズなアニメーションを実現できます。

// CSS トランジションを使用
.hidden-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s, max-height 0.5s;
}

.visible-content {
  opacity: 1;
  max-height: 1000px; // 適切な最大高さを設定
}

遅延読み込み（Lazy Loading）の実装

大量の画像や重いコンテンツがある場合は、遅延読み込みを実装することで初期表示を高速化できます。「もっと見る」ボタンがクリックされたときに初めてコンテンツを読み込む方法です。

document.getElementById('more-button').addEventListener('click', function() {
  // データを非同期で取得
  fetch('api/more-content.json')
    .then(response => response.json())
    .then(data => {
      // 取得したデータを表示
      renderContent(data);

      // すべてのコンテンツを表示し終えたらボタンを非表示
      if (data.isLastPage) {
        this.style.display = 'none';
      }
    })
    .catch(error => {
      console.error('コンテンツの読み込みに失敗しました:', error);
    });
});

このように、コンテンツを必要なときに必要な分だけ読み込むことで、初期表示の速度を向上させ、ユーザーエクスペリエンスを改善できます。

レスポンシブ対応：スマホでの見え方と操作性

現代のウェブサイトでは、さまざまなデバイスサイズに対応することが不可欠です。「もっと見る」ボタンもレスポンシブデザインの考え方に沿って実装する必要があります。

スマートフォン向けの UI 調整

スマートフォンでは、タップ操作がメインとなるため、「もっと見る」ボタンは以下の点に注意して設計しましょう：

1.十分なタップ領域を確保
スマートフォンでは、ボタンのサイズを大きめ（最低でも 44px × 44px）に設定し、タップしやすくすることが重要です。

@media (max-width: 768px) {
  .more-button {
    padding: 12px 20px; /* タップ領域を確保 */
    font-size: 16px; /* 読みやすいフォントサイズ */
    width: 100%; /* 画面幅いっぱいに広げる */
    margin: 20px 0; /* 上下の余白を確保 */
  }
}

2.視覚的なフィードバック
ボタンがタップされたことをユーザーに伝えるため、視覚的なフィードバックを提供しましょう。

.more-button:active {
  background-color: #0056b3; /* タップ時の色変更 */
  transform: scale(0.98); /* わずかに縮小 */
}

3.スクロール位置の調整
特に長いコンテンツの場合、「もっと見る」ボタンをクリックした後のスクロール位置を調整することで、ユーザーエクスペリエンスを向上させることができます。

moreButton.addEventListener('click', function() {
  // コンテンツを表示
  showMoreContent();

  // 新しく表示されたコンテンツの先頭にスクロール
  const firstNewItem = document.querySelector('.newly-visible');
  if (firstNewItem) {
    firstNewItem.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
});

メディアクエリの活用

異なる画面サイズに対応するために、CSS のメディアクエリを活用しましょう。例えば、画面幅に応じて「もっと見る」ボタンのスタイルを変更できます。

/* デスクトップ向けのスタイル */
.more-button {
  width: 200px;
  margin: 20px auto;
  padding: 10px 15px;
}

/* タブレット向けのスタイル */
@media (max-width: 1024px) {
  .more-button {
    width: 180px;
    padding: 12px 15px;
  }
}

/* スマートフォン向けのスタイル */
@media (max-width: 768px) {
  .more-button {
    width: 90%;
    padding: 15px 20px;
    font-size: 16px;
  }
}

これにより、異なるデバイスサイズで適切な見た目と操作性を確保できます。

アクセシビリティ（キーボード操作、スクリーンリーダー）への配慮

ウェブサイトのアクセシビリティを向上させることは、すべてのユーザーにとって良い体験を提供するために不可欠です。「もっと見る」ボタンの実装においても、アクセシビリティを考慮することが重要です。

キーボードアクセシビリティ

キーボードのみで操作するユーザーのために、以下のポイントに注意しましょう：

1.適切な HTML 要素の使用
「もっと見る」ボタンには <button> 要素を使用しましょう。これにより、キーボードフォーカスやスクリーンリーダーとの互換性が自動的に確保されます。

<!-- 良い例 -->
<button id="more-button" class="more-button">もっと見る</button>

<!-- 悪い例 -->
<div id="more-button" class="more-button">もっと見る</div>

どうしても <div> などの非インタラクティブ要素を使用する場合は、以下の属性を追加してください：

<div id="more-button" class="more-button"
     role="button"
     tabindex="0"
     aria-expanded="false">
  もっと見る
</div>

2.キーボードイベントの処理
キーボードユーザーのために、Enter キーや Space キーでもボタンを作動させる必要があります。

const moreButton = document.getElementById('more-button');

// クリックイベント
moreButton.addEventListener('click', toggleContent);

// キーボードイベント
moreButton.addEventListener('keydown', function(event) {
  // Enter または Space キーが押された場合
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault(); // デフォルトのスクロール動作を防止
    toggleContent();
  }
});

function toggleContent() {
  // コンテンツの表示/非表示を切り替える処理
  const content = document.getElementById('hidden-content');
  const isExpanded = content.classList.toggle('visible');

  // アクセシビリティ属性の更新
  moreButton.setAttribute('aria-expanded', isExpanded);

  // ボタンテキストの更新
  moreButton.textContent = isExpanded ? '閉じる' : 'もっと見る';
}

スクリーンリーダー対応

視覚障害のあるユーザーがスクリーンリーダーを使用して閲覧する場合を考慮し、以下の ARIA（Accessible Rich Internet Applications）属性を活用しましょう：

1.aria-expanded 属性
コンテンツの展開状態を示すために aria-expanded 属性を使用します。これにより、スクリーンリーダーがコンテンツの状態を正確に伝えることができます。

<button id="more-button" aria-expanded="false" aria-controls="hidden-content">
  もっと見る
</button>
<div id="hidden-content" class="hidden-content">
  <!-- 隠れているコンテンツ -->
</div>

JavaScript でボタンの状態を更新する際には、この属性も更新します：

function toggleContent() {
  const content = document.getElementById('hidden-content');
  const isVisible = content.classList.toggle('visible');

  // アクセシビリティ属性の更新
  moreButton.setAttribute('aria-expanded', isVisible);
}

2.aria-controls 属性
aria-controls 属性を使用して、ボタンが制御するコンテンツの ID を指定します。これにより、スクリーンリーダーユーザーがボタンとコンテンツの関係を理解しやすくなります。

3.aria-live 領域
動的に変化するコンテンツには aria-live 属性を使用すると、変更があった場合にスクリーンリーダーがユーザーに通知します。

<div id="hidden-content" class="hidden-content" aria-live="polite">
  <!-- 動的に変化するコンテンツ -->
</div>

このようなアクセシビリティへの配慮は、視覚障害のあるユーザーだけでなく、すべてのユーザーにとって使いやすいウェブサイトを実現するために重要です。また、多くの国や地域ではアクセシビリティに関する法的要件があり、これらに準拠することもビジネス上重要な意味を持ちます。

以上のポイントを押さえて「もっと見る」ボタンを実装することで、高いパフォーマンス、優れたユーザーエクスペリエンス、そして幅広いユーザーへのアクセシビリティを確保することができます。これらの注意点に配慮することで、プロフェッショナルな実装が可能になるでしょう。

FAQ

まとめ

Webサイトやブログでコンテンツの整理に欠かせない「もっと見るボタン」について、実装方法から注意点までを総合的にまとめました。初心者から中級者まで参考になる内容となっていますので、ぜひ最後までご覧ください。

「もっと見るボタン」は単なるUI要素ではなく、ユーザー体験を大きく左右する重要な機能です。基本的な実装ではHTMLで隠したいコンテンツを準備し、CSSで初期状態を非表示にするという仕組みです。その上でJavaScriptを使って、クリックイベントに応じて表示・非表示を切り替える動作を実装します。

特に注目すべきは、JavaScriptを活用した高度な実装方法です。10件ずつ段階的に表示するリスト形式や、「もっと見る」と「閉じる」を切り替える開閉式ボタンなど、サイトの目的に応じた選択が可能です。また、1ページ内に複数のボタンを設置する場合は、要素の識別子をしっかり設計することで混乱なく実装できます。

実装時には注意点もあります。JavaScriptの読み込みタイミングによる予期せぬエラーを避けるため、DOMの準備が完了してからスクリプトを実行する工夫が必要です。また大量の要素を一度に表示するとパフォーマンス低下を招く恐れがあるため、遅延読み込みや仮想スクロールなどの対策を検討しましょう。

レスポンシブデザインへの対応も忘れてはいけません。スマートフォンでの見え方や操作性を考慮し、十分なタップ領域を確保することがユーザビリティ向上につながります。さらに、キーボード操作やスクリーンリーダーにも対応することで、アクセシビリティ面での配慮も実現できます。

「もっと見るボタン」の実装は見た目以上に奥が深く、ユーザー体験とサイトパフォーマンスの両立が求められる機能です。本記事で紹介したコード例や注意点を参考に、サイトの特性に合わせた最適な実装を目指してください。SEO観点からも、コンテンツを適切に構造化することで検索エンジンのクローラビリティを確保しつつ、ユーザーにとって読みやすいページ構成を実現できるでしょう。

ぜひ実際に手を動かして試してみてください。そして困ったときはFAQセクションも参考にしながら、より良いWebサイト作りにお役立てください。

HTML＆CSSプログレスバー実装ガイド｜おしゃれ・アニメ・円形・React対応まで＋コピペOKサンプル付き

HTMLプログレスバーのデザインをもっと自由に！CSSで色や形をカスタマイズ、アニメーションやJavaScriptで動的な表現を加える方法をコピペで使えるサンプルコードと共に紹介します。円形プログレスバーの実装、Reactでの利用に加え、よくあるトラブルについても。初心者からステップアップしたい方におすすめです。

watashi.xyz

2025.05.14

CSSタイムラインの作り方まとめ｜沿革・経歴・スケジュールに使えるデザインと実装コードを厳選紹介！

タイムラインを自作したいけれど方法がわからない方へ。この記事では、HTMLとCSSだけで縦型・横型タイムラインの基本構造から実装方法まで、初心者にもわかりやすく解説します。疑似要素を活用したデザイン、アイコンや画像を取り入れた多彩なスタイリング、スマホ対応のレスポンシブ設計まで、コピペで使えるコード例も掲載！

watashi.xyz

2025.05.11

HTMLプルダウンメニューをJavaScriptで強化！初心者向け実装ガイドと動的機能の作り方

HTMLとJavaScriptでプルダウンメニューを簡単に実装！CSSでの見た目の整え方から、JavaScriptを使った要素の取得、選択値の取得、ユーザーのアクションを検知するchangeイベントの使い方、デフォルト項目を設定する方法まで基礎を網羅。よくあるエラーの解決策といった実践的な応用テクニックまで紹介します。

watashi.xyz

2025.05.10

HTMLのツールチップ、title属性では改行できない？広く使えるCSS・JavaScriptでの実装テクニック

HTMLのツールチップで改行を実現する方法を探していますか？title属性では改行が難しい仕様がありますが、CSSやJavaScriptを使ってカスタムツールチップを作成することで改行が可能です。BootstrapやReactなどのフレームワーク対応方法も含め、改行可能なツールチップの実装方法や注意点を解説します。

watashi.xyz

2025.05.06