CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでページネーションを作成する方法を徹底解説

Webサイトやブログでは、記事や商品の一覧を複数ページに分割して表示する「ページネーション（ページ送り）」がよく使われます。CSSを使えば、JavaScriptなどに頼らずとも、シンプルなHTMLマークアップとスタイル指定だけで、見栄えの良いページネーションを簡単に作成できます。

この記事では、CSSでページネーションを実装する具体的なサンプルコードと、そのポイントをわかりやすく解説します。

サンプルコード

以下は、CSSでページネーションを作成するコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,*::before,*::after{
    box-sizing: border-box;
}
.pagePagination{
    margin: 15px;
    display: inline-block;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
}
.links {
    display: inline-block;
    text-align: center;
    padding: 14px;
    color: rgb(178, 137, 253);
    text-decoration: none;
    font-size: 17px;
}
.links:hover {
    background-color: rgb(100, 100, 100);
}
.selected{
    background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h1> ページネーションのサンプル </h1>
<div class="pagePagination">
<a class="links" href="#">&laquo;</a>
<a class="links selected" href="#">1</a>
<a class="links" href="#">2</a>
<a class="links" href="#">3</a>
<a class="links" href="#">4</a>
<a class="links" href="#">5</a>
<a class="links" href="#">&raquo;</a>
</div>
<h2>上の数字にカーソルを合わせると効果を確認できます</h2>
</body>
</html>

コードのポイント

  • .pagePagination：ページネーション全体を包むコンテナです。背景色を設定し、display: inline-block; でリンク群をひとまとまりとして表示しています。
  • .links：各ページ番号のリンクに適用されるクラスです。padding でクリックしやすい大きさを確保し、text-decoration: none; で下線を消してすっきりした見た目にしています。
  • .links:hover：マウスカーソルを重ねたときに背景色が変化するホバー効果を追加し、ユーザーがどのページを選ぼうとしているか視覚的にわかるようにしています。
  • .selected：現在表示中のページ番号をハイライト表示するためのクラスです。背景色を変えることで、ユーザーが今どのページを見ているのか一目で把握できます。

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSでページネーションを作成する方法を徹底解説

このように、数行のCSSを追加するだけで、ダークテーマの洗練されたページネーションが完成します。色やパディングの値を変更すれば、自分のサイトのデザインに合わせて自由にカスタマイズできますので、ぜひ試してみてください。

  1. CSSでチャットメッセージを作成する方法をわかりやすく解説

    CSSを使えば、LINEやMessengerのようなチャットメッセージ画面を簡単に作成できます。この記事では、プロフィール画像・吹き出し・タイムスタンプ付きのチャットUIを実装する方法を、実際のコード例とともに解説します。 コード例 以下は、CSSでチャットメッセージを作成するための完全なコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <s

  2. CSSだけで作る！レスポンシブ対応のセクションカウンターの実装方法

    CSSを使えば、JavaScriptに頼ることなく、ダウンロード数やパートナー数などの統計情報を視覚的にアピールする「セクションカウンター」を簡単に作成できます。ここでは、Font Awesomeのアイコンと組み合わせて、レスポンシブ対応のセクションカウンターを実装する方法を解説します。 実装コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <l