ページネーションの表示を常に5ページにする方法

1. 静的なページネーションの実装: 最もシンプルな方法は、静的なページネーションを実装することです。これは、ページ数が固定されており、常に5ページを表示する方法です。以下に、HTMLとCSSの例を示します。

HTMLの例:

<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
</div>

CSSの例:

.pagination a {
  margin-right: 5px;
  /* 他のスタイルを追加 */
}

この方法では、ページ数を手動で追加し、必要なページ数に応じてリンクを作成します。

2. 動的なページネーションの実装: ページ数が動的に変化する場合は、プログラミング言語やフレームワークを使用して動的なページネーションを実装する必要があります。以下に、JavaScriptとPHPの例を示します。

JavaScriptの例:

// ページ数を取得する関数
function getPageCount() {
  // ページ数を取得する処理
  return 5; // 仮の値
}
// ページネーションを生成する関数
function generatePagination() {
  var pageCount = getPageCount();
  var paginationContainer = document.querySelector('.pagination');
  for (var i = 1; i <= pageCount; i++) {
    var link = document.createElement('a');
    link.href = '#';
    link.textContent = i;
    paginationContainer.appendChild(link);
  }
}
generatePagination();

PHPの例:

<?php
function getPageCount() {
  // ページ数を取得する処理
  return 5; // 仮の値
}
function generatePagination() {
  $pageCount = getPageCount();
  echo '<div class="pagination">';
  for ($i = 1; $i <= $pageCount; $i++) {
    echo '<a href="#">' . $i . '</a>';
  }
  echo '</div>';
}
generatePagination();
?>

これらの例では、getPageCount()関数を使用してページ数を取得し、その数に基づいて動的にページネーションを生成します。