先生と生徒の会話形式で理解しよう

生徒

「Bootstrapで作った一覧にページが多くなったら、どうやって次のページに進めばいいんですか？」

先生

「その場合は『ページネーション』を使います。ページネーションとは、複数ページに分かれたデータを切り替えて表示できる仕組みです。」

生徒

「なるほど！でも検索もできた方が便利ですよね？」

先生

「その通り。検索フォームを組み合わせることで、見たいデータを素早く探せるようになります。そして誰でも使いやすいように『アクセシビリティ』にも配慮することが大切です。」

1. ページネーションとは何か？

ページネーションとは、大量のデータを小分けにして複数ページに表示するための仕組みです。例えば、ネットショッピングのサイトでは商品が1000件あったとしても、1ページに10件ずつ表示し、次へ進むボタンで移動します。これが「ページネーション」です。

Bootstrapには専用のクラスが用意されているので、初めての人でも簡単にページネーションを作れます。さらにSEO（検索エンジン最適化）やアクセシビリティを考えると、リンクにラベルを付けたり、現在のページを明示することが重要です。

2. Bootstrapでのページネーションの基本

Bootstrapでは、paginationクラスを使ってページネーションを作成します。<ul>タグと<li>タグを組み合わせ、次へ・前へ・ページ番号などをリスト形式で表示します。


<nav aria-label="ページナビゲーション">
  <ul class="pagination">
    <li class="page-item disabled" aria-disabled="true"><a class="page-link" href="#">前へ</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">次へ</a></li>
  </ul>
</nav>

ブラウザ表示

ここでのポイントは、aria-labelやaria-currentを使うことで、スクリーンリーダーを利用するユーザーにも現在地を分かりやすく伝えることです。これがアクセシビリティに配慮した作り方になります。

3. 検索フォームを組み合わせて一覧を便利に

一覧画面に検索ボックスを追加すると、探したい情報にすぐアクセスできるようになります。Bootstrapではform-controlクラスを使って簡単に整ったデザインの検索フォームを作ることが可能です。


<form class="d-flex mb-3" role="search" aria-label="一覧検索フォーム">
  <input class="form-control w-75 me-2" type="search" placeholder="キーワードを入力" aria-label="検索入力欄">
  <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> 検索</button>
</form>

ブラウザ表示

ここでも重要なのはaria-labelの利用です。これにより「この入力欄は検索用です」と機械的にも理解できるようになります。初心者にとっては意識しにくい部分ですが、SEOやユーザー体験を考えると大切なポイントです。

4. ページネーションと検索UIを組み合わせた一覧テンプレート

実際の一覧画面をイメージしたサンプルを作ってみましょう。検索フォームとページネーションを組み合わせて、シンプルかつアクセシブルな一覧ページを作ります。


<div class="container">
  <h2>記事一覧</h2>
  
  <form class="d-flex mb-3" role="search" aria-label="記事検索フォーム">
    <input class="form-control w-75 me-2" type="search" placeholder="記事タイトルを検索" aria-label="検索入力欄">
    <button class="btn btn-success" type="submit"><i class="bi bi-search"></i> 検索</button>
  </form>

  <ul class="list-group mb-3">
    <li class="list-group-item">記事タイトル1</li>
    <li class="list-group-item">記事タイトル2</li>
    <li class="list-group-item">記事タイトル3</li>
    <li class="list-group-item">記事タイトル4</li>
    <li class="list-group-item">記事タイトル5</li>
  </ul>

  <nav aria-label="記事一覧ページナビゲーション">
    <ul class="pagination justify-content-center">
      <li class="page-item disabled" aria-disabled="true">
        <a class="page-link">前へ</a>
      </li>
      <li class="page-item active" aria-current="page">
        <a class="page-link">1</a>
      </li>
      <li class="page-item"><a class="page-link">2</a></li>
      <li class="page-item"><a class="page-link">3</a></li>
      <li class="page-item">
        <a class="page-link">次へ</a>
      </li>
    </ul>
  </nav>
</div>

ブラウザ表示

このように、検索フォームとページネーションを組み合わせると実用的な一覧画面になります。アクセシビリティに配慮しながら作成することで、誰にとっても使いやすいUIを実現できます。