CSS ページネーションの例

この章では、CSSを使用してページネーションを作成する例を紹介します。

シンプルなページネーション

ウェブサイトに多くのページがある場合、各ページのナビゲーションとしてページネーションを使用する必要があります。

次の例は、HTMLとCSSを使用してページネーションを作成する方法を示しています。

クリックとマウスホバーのページネーションスタイル

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

現在のページをクリックした場合は、次のものを使用できます.active現在のページのスタイルを設定し、マウスホバーでは:hoverセレクタを使用してスタイルを変更します：

角丸スタイル

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

使用できますborder-radiusプロパティを使用して、選択したページ番号に角丸スタイルを追加します：

マウスホバーのトランジション効果

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

次のものを追加することでtransitionプロパティを使用して、マウスがページ番号上に移動したときにトランジション効果を追加します：

枠線付きページネーション

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

次のものを使用できますborderプロパティを使用して枠線付きページネーションを追加します：

角丸の枠線

ヒント:最初のページネーションリンクと最後のページネーションリンクに角丸を追加します：

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

ページネーションの間隔

ヒント:次のものを使用できますmarginプロパティを使用して、各ページ番号に直接スペースを追加します：

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

ページネーションのフォントサイズ

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

次のものを使用できますfont-sizeプロパティを使用してページネーションのフォントサイズを設定します：

中央揃えのページネーション

ページネーションを中央揃えにするには、コンテナ要素（<div>など）に次のものを追加しますtext-align:centerスタイル：

その他の例

パンくずナビゲーション

• ホーム
• フロントエンド
• HTML チュートリアル
• HTML 段落

もう1つのナビゲーションとしてパンくずナビゲーションがあります。例は次のとおりです：