基本のページネーションを作る方法
基本のページネーションを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、複数ページへの移動に利用できるシンプルなページネーションを作成します。現在のページを分かりやすく強調表示し、前後のページへ移動できるレイアウトになっているため、ブログやニュースサイト、商品一覧など幅広い場面で利用できます。
ページネーションは、長い一覧ページを複数ページへ分割して見やすくするためによく利用されます。このサンプルは見た目のデザインに特化しているため、静的サイトのデザイン確認や、PHP・JavaScriptなどで実際のページ切り替え機能を追加する際のベースデザインとしても活用できます。シンプルな構成なので初心者でも導入しやすいのが特徴です。
ページ番号やボタン名はHTMLから変更でき、CSSではボタンサイズ、余白、背景色、文字色、角丸、ホバー時の色、現在ページの強調色などを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすい基本的なページネーションとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ番号をクリックすると、それぞれのサンプルページへ移動できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>基本のページネーション</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ページネーション全体 -->
<div class="basic-pagination_wrap">
<!-- タイトル -->
<div class="basic-pagination_title">
基本のページネーション
</div>
<!-- 説明文 -->
<p class="basic-pagination_text">
ページ番号をクリックしてページを切り替えます。
</p>
<!-- ページネーション -->
<nav
class="basic-pagination_nav"
aria-label="ページネーション">
<!-- 現在のページ -->
<a
class="basic-pagination_link current"
href="#">
1
</a>
<!-- 2ページ目 -->
<a
class="basic-pagination_link"
href="#">
2
</a>
<!-- 3ページ目 -->
<a
class="basic-pagination_link"
href="#">
3
</a>
<!-- 4ページ目 -->
<a
class="basic-pagination_link"
href="#">
4
</a>
<!-- 5ページ目 -->
<a
class="basic-pagination_link"
href="#">
5
</a>
</nav>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではページネーション全体の構造やページ番号を作成し、CSSではレイアウトや色、余白、角丸、ホバー時の見た目などを設定します。JavaScriptを使用しないため、シンプルな構成で導入しやすく、静的サイトやサンプルページなどへそのまま利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはページネーション全体を構成するファイルです。タイトル、説明文、ページ番号、現在のページを変更できます。ページ番号のリンク先は用途に合わせて変更してください。
style.cssはページネーション全体のデザインを設定するファイルです。横幅、余白、背景色、文字サイズ、ボタンサイズ、枠線、角丸、ホバー時の色、現在ページの色などを自由に変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページネーションが表示されるので、必要に応じて各ページ番号のリンク先を実際のURLへ変更して利用できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ページ番号、現在ページの設定、各ページ番号のリンク先を変更できます。ページ数を増減したい場合は、ページ番号のa要素を追加・削除するだけで調整できます。
style.cssでは全体の横幅、背景色、余白、角丸、ボタンサイズ、文字サイズ、枠線、ホバー時の色、現在ページの背景色・文字色・枠線色などを用途に合わせて変更できます。
数値調整
style.css
max-width:700px;
ページネーション全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
gap:10px;
ページ番号同士の間隔です。値を大きくすると間隔が広がり、小さくすると近づきます。
width:44px;
ページ番号ボタンの横幅です。値を大きくするとボタンが横に大きくなります。
height:44px;
ページ番号ボタンの高さです。値を大きくするとボタンが縦に大きくなります。
border-radius:10px;
ページ番号ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
transition:0.3s;
ホバー時に色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせて全体が縮小されます。また、640px以下ではpadding:24px 18px;へ変更し、ページ番号ボタンも40px四方へ縮小するため、スマートフォン・タブレット・PCで利用できます。
コメント