8種類のページネーションデザイン

ページネーションとは？

ページネーションって、どういうものですか?

ページネーションは、長いコンテンツを複数のページに分割して表示するためのナビゲーション要素だよ。ブログの記事一覧や検索結果でよく見かける「1、2、3…」って並んでいるやつだね。

確かに見たことあります！でも、どうしてページを分ける必要があるんですか？

一度に全部のデータを読み込むと、表示が遅くなったり、ユーザーが情報を探しにくくなったりするんだ。ページネーションを使うことで、必要な分だけ表示できるから、パフォーマンスも良くなるし、使いやすくなるんだよ。

デザインパターン

今回は8種類のページネーションデザインを作成します。それぞれ特徴的なスタイルを持っていて、サイトの雰囲気に合わせて選ぶことができます。

FontAwesomeの読み込み

このページネーションでは、前後の矢印アイコンにFontAwesomeを使用しています。ご自身のプロジェクトで使用する場合は、HTMLの<head>タグ内に以下のCDNリンクを追加してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

1. シンプルなページネーションデザイン

カレントページに紫の四角枠を表示するシンプルなデザインです。

HTML

<ul class="pagination">
    <li class="disabled">
        <a href="#"><i class="fas fa-angle-left"></i></a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>

CSS

.pagination {
    display: flex;
    list-style: none;
    padding: 0.5rem;
}


.pagination a {
    display: inline-block;
    color: black;
    text-decoration: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.pagination a:hover {
    background-color: #9d9ae2;
    color: white;
}

.pagination i {
    line-height: 40px;
}

.pagination .active a {
    background-color: #4F46E5;
    color: white;
}

.pagination .disabled a {
    pointer-events: none;
    color: #ccc;
}

.pagination .disabled a:hover {
    background-color: initial;
    color: #ccc;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ul要素とli要素を使用して、シンプルなページネーションを作成してください。

### 初期状態
- 横並びでページ番号を表示
- 前後の矢印アイコン付き
- 装飾なしのフラットなデザイン

### カレント状態
- 紫色の背景で現在のページを強調
- 白い文字

### ホバー時
- 背景色が薄い紫に変化

### 無効状態
- 薄いグレーの文字でクリック不可を表現

このパーツの特徴

フラットデザイン 装飾を最小限にしたシンプルな見た目
明確な状態表示 カレントページが紫色で一目でわかる
無効状態の対応 前ページがない場合は矢印をグレーアウト

コードのポイント

状態管理の仕組み:

.pagination .active a {
    background-color: #4F46E5; /* カレントページを紫色で強調 */
    color: white;
}

.pagination .disabled a {
    pointer-events: none; /* クリックを無効化 */
    color: #ccc;
}

.activeクラスで現在のページを視覚的に強調
.disabledクラスとpointer-events: noneでクリックを無効化
ホバー効果で操作可能な要素をフィードバック

2. 枠線をぼかしたCSSページネーションデザイン

「box-shadow」で枠線をぼかして影を入れてます。

HTML

<ul class="pagination">
    <li class="disabled">
        <a href="#"><i class="fas fa-angle-left"></i></a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>

CSS

.pagination {
    display: flex;
    box-shadow: 0 0 5px #dedede;
    list-style: none;
    padding: 0.5rem;
}


.pagination a {
    display: inline-block;
    color: black;
    text-decoration: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}


.pagination i {
    line-height: 40px;
}

.pagination .active a {
    background-color: #1175E1;
    color: white;
}

.pagination a:hover {
    background-color: #69a2e0;
    color: white;
}

.pagination .disabled a {
    pointer-events: none;
    color: #ccc;
}

.pagination .disabled a:hover {
    background-color: initial;
    color: #ccc;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ul要素とli要素を使用して、影付きのページネーションを作成してください。

### 初期状態
- 横並びでページ番号を表示
- 全体をぼかした影で囲む
- 背景は白

### カレント状態
- 青色の背景で現在のページを強調
- 白い文字

### ホバー時
- 背景色が薄い青に変化

### 無効状態
- 薄いグレーの文字でクリック不可を表現

このパーツの特徴

柔らかい影 box-shadowでページネーション全体を囲む立体感
シンプルな配色 青と白のコントラストで視認性を確保
まとまり感 影による囲みで一体感を表現

コードのポイント

影の効果:

.pagination {
    display: flex;
    box-shadow: 0 0 5px #dedede; /* 全体をぼかした影で囲む */
    list-style: none;
}

box-shadow: 0 0 5pxで全方向に均等なぼかし影を適用
影の色を薄いグレー（#dedede）にして自然な立体感を演出
各ページ番号が一つのまとまりとして見える効果

3. ページ番号を丸くしたCSSページネーションデザイン

「border-radius:50%;」で丸枠にしています

HTML

<ul class="pagination">
    <li class="disabled">
        <a href="#"><i class="fas fa-angle-left"></i></a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>

CSS

.pagination {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0.5rem;
}


.pagination a {
    display: inline-block;
    color: black;
    border-radius: 50%;
    border: 1px solid #dedede;
    text-decoration: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}


.pagination i {
    line-height: 40px;
}

.pagination .active a {
    background-color: #5CC6CD;
    color: white;
}

.pagination a:hover {
    background-color: #86c8cc;
    color: white;
}

.pagination .disabled a {
    pointer-events: none;
    color: #ccc;
}

.pagination .disabled a:hover {
    background-color: initial;
    color: #ccc;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ul要素とli要素を使用して、丸いページネーションを作成してください。

### 初期状態
- 横並びでページ番号を表示
- 各番号を円形の枠線で囲む
- 番号間に適度な余白

### カレント状態
- シアン系の背景で現在のページを強調
- 白い文字

### ホバー時
- 背景色が薄いシアンに変化

### 無効状態
- 薄いグレーの文字でクリック不可を表現

このパーツの特徴

円形デザイン 各ページ番号を丸い枠で囲むポップな印象
独立した見た目 gapプロパティで番号間に余白を確保
シアン系カラー 爽やかで親しみやすい配色

コードのポイント

円形の作り方:

.pagination a {
    border-radius: 50%; /* 完全な円形にする */
    border: 1px solid #dedede;
    width: 40px;
    height: 40px; /* 幅と高さを同じにする */
}

border-radius: 50%で正円を作成
幅と高さを同じ値に設定することで円形を維持
gap: 0.5remで各円の間に余白を追加

4. ページ番号を四角にしたCSSページネーションデザイン

「gap」で番号間の余白をあけて、「border」で境界線を入れてます。

HTML

<ul class="pagination">
    <li class="disabled">
        <a href="#"><i class="fas fa-angle-left"></i></a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>

CSS

.pagination {
    display: flex;
    gap: 0.3rem;
    list-style: none;
    padding: 0.5rem;
}


.pagination a {
    display: inline-block;
    color: black;
    border: 1px solid #dedede;
    text-decoration: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}


.pagination i {
    line-height: 40px;
}

.pagination .active a {
    background-color: #EA5133;
    color: white;
}

.pagination a:hover {
    background-color: #e88b7a;
    color: white;
}

.pagination .disabled a {
    pointer-events: none;
    color: #ccc;
}

.pagination .disabled a:hover {
    background-color: initial;
    color: #ccc;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ul要素とli要素を使用して、四角いページネーションを作成してください。

### 初期状態
- 横並びでページ番号を表示
- 各番号を四角い枠線で囲む
- 番号間に少しの余白

### カレント状態
- オレンジ系の背景で現在のページを強調
- 白い文字

### ホバー時
- 背景色が薄いオレンジに変化

### 無効状態
- 薄いグレーの文字でクリック不可を表現

このパーツの特徴

シャープなデザイン 四角い枠線で整然とした印象
オレンジ系カラー 注目を集めるアクセントカラー
細めの余白 gapを小さめにして密集感を演出

コードのポイント

四角い枠線の実装:

.pagination {
    display: flex;
    gap: 0.3rem; /* 狭めの余白で密集感 */
    list-style: none;
}

.pagination a {
    border: 1px solid #dedede; /* 四角い枠線 */
    width: 40px;
    height: 40px;
}

border-radiusを指定しないことで四角形を維持
gap: 0.3remで狭い余白を設定し、まとまり感を演出
枠線の色を薄いグレーにして控えめな区切りを表現

5. ページ番号を斜め枠したCSSページネーションデザイン

「skewX」で斜め枠にしています

HTML

<ul class="pagination">
    <li class="disabled">
        <a href="#"><i class="fas fa-angle-left"></i></a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>

CSS

.pagination {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0.5rem;
}


.pagination a {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid #bfbfbf;
    color: black;
    text-decoration: none;
    line-height: 40px;
    text-align: center;
    transform: skewX(-15deg);
}

.pagination i {
    line-height: 40px;
}

.pagination .active a {
    background-color: #64C468;
    color: white;
}

.pagination a:hover {
    background-color: #8fc191;
    color: white;
}

.pagination .disabled a {
    pointer-events: none;
    color: #ccc;
}

.pagination .disabled a:hover {
    background-color: initial;
    color: #ccc;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ul要素とli要素を使用して、斜めに傾いたページネーションを作成してください。

### 初期状態
- 横並びでページ番号を表示
- 各番号を斜めに傾けた平行四辺形の枠で囲む
- 番号間に適度な余白

### カレント状態
- 緑色の背景で現在のページを強調
- 白い文字

### ホバー時
- 背景色が薄い緑に変化

### 無効状態
- 薄いグレーの文字でクリック不可を表現

このパーツの特徴

個性的なデザイン 斜めの傾きで動きのある印象
緑系カラー 安心感と信頼性を与える配色
モダンな雰囲気 平行四辺形でスタイリッシュな見た目

コードのポイント

斜め枠の作り方:

.pagination a {
    transform: skewX(-15deg); /* 左方向に15度傾ける */
    border: 1px solid #bfbfbf;
}

transform: skewX(-15deg)で要素を左方向に傾斜
負の値で左に傾き、正の値で右に傾く
中のテキストも一緒に傾くので、内容が斜めに見える効果

6. ページ番号に下線を引いたCSSページネーションデザイン

「gap」で番号間の余白をあけて、「border」で下線を入れてます。

HTML

<ul class="pagination">
    <li class="disabled">
        <a href="#"><i class="fas fa-angle-left"></i></a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>

CSS

.pagination {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0.5rem;
}


.pagination a {
    display: inline-block;
    color: black;
    border-bottom: 3px solid #dedede;
    text-decoration: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}


.pagination i {
    line-height: 40px;
}

.pagination .active a {
    border-bottom: 3px solid #f09fa1;
}

.pagination a:hover {
    border-bottom: 3px solid #efc2c2;
}

.pagination .disabled a {
    pointer-events: none;
    color: #ccc;
}

.pagination .disabled a:hover {
    background-color: initial;
    color: #ccc;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ul要素とli要素を使用して、下線付きのページネーションを作成してください。

### 初期状態
- 横並びでページ番号を表示
- 各番号の下に薄いグレーの下線
- 背景色なしのシンプルなデザイン

### カレント状態
- ピンク系の下線で現在のページを強調
- 文字色は黒のまま

### ホバー時
- 下線が薄いピンクに変化

### 無効状態
- 薄いグレーの文字でクリック不可を表現

このパーツの特徴

ミニマルデザイン 背景色なしで下線のみで状態を表現
上品な印象 ピンク系の下線で女性的で柔らかい雰囲気
軽やかな見た目 枠線がないので圧迫感がない

コードのポイント

下線による状態表現:

.pagination a {
    border-bottom: 3px solid #dedede; /* 通常時は薄いグレーの下線 */
}

.pagination .active a {
    border-bottom: 3px solid #f09fa1; /* カレント時はピンクの下線 */
}

border-bottomで下線を実装し、背景色は使用しない
色の変化だけで状態を表現するミニマルなアプローチ
文字色を変えずに下線の色だけで区別するシンプルな設計

7. 枠線で囲んだCSSページネーションデザイン

少し余白を入れた枠線で囲んでます

HTML

<ul class="pagination">
    <li class="disabled">
        <a href="#"><i class="fas fa-angle-left"></i></a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>

CSS

.pagination {
    display: flex;
    padding: 0.5rem;
    border: 1px solid #dedede;
    list-style: none;
}


.pagination a {
    display: inline-block;
    color: black;
    text-decoration: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}


.pagination i {
    line-height: 40px;
}

.pagination .active a {
    background-color: #E93F33;
    color: white;
}

.pagination a:hover {
    background-color: #e88f8b;
    color: white;
}

.pagination .disabled a {
    pointer-events: none;
    color: #ccc;
}

.pagination .disabled a:hover {
    background-color: initial;
    color: #ccc;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ul要素とli要素を使用して、枠線で囲んだページネーションを作成してください。

### 初期状態
- 横並びでページ番号を表示
- 全体を薄いグレーの枠線で囲む
- 枠線の内側に少し余白を入れる

### カレント状態
- 赤色の背景で現在のページを強調
- 白い文字

### ホバー時
- 背景色が薄い赤に変化

### 無効状態
- 薄いグレーの文字でクリック不可を表現

このパーツの特徴

まとまり感 全体を枠線で囲むことで一体感を演出
赤系カラー 注目度が高くアクションを促す配色
余白の工夫 枠線の内側にpaddingを入れてゆとりを表現

コードのポイント

全体を囲む枠線:

.pagination {
    display: flex;
    padding: 0.4rem; /* 枠線と内容の間に余白 */
    border: 1px solid #dedede; /* 全体を囲む枠線 */
    list-style: none;
}

.pagination自体にborderを設定して全体を囲む
paddingで枠線と内容の間にゆとりを追加
各ページ番号には個別の枠線を設定しないシンプルな構造

8. ピル型のCSSページネーションデザイン

カプセルのような丸みのある形状と柔らかい影で、洗練された印象を与えます。

HTML

<ul class="pagination">
    <li class="disabled">
        <a href="#"><i class="fas fa-angle-left"></i></a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>

CSS

.pagination {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    background: #f8f9fa;
    padding: 0.5rem;
    border-radius: 50px;
}

.pagination a {
    display: inline-block;
    color: #555;
    text-decoration: none;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.pagination i {
    line-height: 36px;
}

.pagination .active a {
    background-color: #333;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pagination a:hover {
    background-color: #e9ecef;
}

.pagination .active a:hover {
    background-color: #333;
}

.pagination .disabled a {
    pointer-events: none;
    color: #ccc;
}

.pagination .disabled a:hover {
    background-color: transparent;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

ul要素とli要素を使用して、ピル型のページネーションを作成してください。

### 初期状態
- 横並びでページ番号を表示
- 全体を薄いグレーの背景で囲み、カプセルのような丸い形状
- 各番号は円形で、文字は濃いグレー

### カレント状態
- 黒に近い濃いグレーの背景で現在のページを強調
- 白い文字
- 柔らかい影を下に

### ホバー時
- 背景色が薄いグレーに変化

### 無効状態
- 薄いグレーの文字でクリック不可を表現

このパーツの特徴

ピル型デザイン 全体をカプセルのような丸い形状で囲む
モノトーン配色 黒・白・グレーのみで洗練された印象
柔らかい影 カレントページに控えめな影を追加し立体感を演出

コードのポイント

ピル型の作り方:

.pagination {
    background: #f8f9fa; /* 薄いグレーの背景 */
    padding: 0.5rem;
    border-radius: 50px; /* 大きな値で両端を丸く */
}

.pagination .active a {
    background-color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 柔らかい影 */
}

border-radius: 50pxで両端が完全に丸いカプセル型を作成
背景色を薄いグレーにして各ページ番号が浮き上がって見える
カレントページにだけbox-shadowを追加して控えめに強調

まとめ

ページネーションっていろんなデザインがあるんですね！

そうだね。今回紹介した8種類は、それぞれ異なる視覚効果を持っているよ。シンプルなものから、丸枠や斜め枠、ピル型といった個性的なデザインまで、サイトの雰囲気に合わせて選べるんだ。

.activeクラスと.disabledクラスの使い方がポイントですね。

その通り。.activeで現在のページを強調して、.disabledで前後のページがないときに移動できないようにしているんだ。pointer-events: none;を使うことで、クリックできないようにしているのもポイントだよ。

ページネーション実装のポイント

構造の統一 すべてのパターンで同じHTML構造を使用することで、デザイン変更が容易
状態の明示 .activeでカレントページ、.disabledで無効な操作を視覚的に表現
ホバー効果 ユーザーが操作可能な要素をホバー時にフィードバック
Flexboxの活用 display: flexで水平レイアウトを簡単に実装
アクセシビリティ pointer-events: noneで無効なリンクのクリックを防止

ページネーションは、ユーザーがコンテンツを効率的に閲覧するための重要なナビゲーション要素です。サイトのデザインに合わせて適切なスタイルを選びましょう。

ページネーションとは？

デザインパターン

1. シンプルなページネーションデザイン

AIへのプロンプト例

このパーツの特徴

コードのポイント

状態管理の仕組み:

2. 枠線をぼかしたCSSページネーションデザイン

AIへのプロンプト例

このパーツの特徴

コードのポイント

影の効果:

3. ページ番号を丸くしたCSSページネーションデザイン

AIへのプロンプト例

このパーツの特徴

コードのポイント

円形の作り方:

4. ページ番号を四角にしたCSSページネーションデザイン

AIへのプロンプト例

このパーツの特徴

コードのポイント

四角い枠線の実装:

5. ページ番号を斜め枠したCSSページネーションデザイン

AIへのプロンプト例

このパーツの特徴

コードのポイント

斜め枠の作り方:

6. ページ番号に下線を引いたCSSページネーションデザイン

AIへのプロンプト例

このパーツの特徴

コードのポイント

下線による状態表現:

7. 枠線で囲んだCSSページネーションデザイン

AIへのプロンプト例

このパーツの特徴

コードのポイント

全体を囲む枠線:

8. ピル型のCSSページネーションデザイン

AIへのプロンプト例

このパーツの特徴

コードのポイント

ピル型の作り方:

まとめ

学習チェック