立体的なページネーションを作る方法
立体的なページネーションを作る方法を紹介します。このサンプルでは、HTMLとCSSを使用してページ番号に厚みと影を付け、平面的なページネーションよりもボタンらしさが伝わるデザインに仕上げます。ページ番号の下側へ太めの枠線を付け、さらに影を組み合わせることで、ページ番号が手前へ浮き出しているような立体感を表現します。
通常のページ番号は白を基調とし、現在のページには青色のグラデーションを適用して、選択中の位置を分かりやすく表示します。また、ページ番号へカーソルを合わせると青色へ変化すると同時に上方向へ移動し、浮き上がるような動きを付けています。ブログの記事一覧、商品一覧、検索結果、管理画面など、複数ページを切り替えるページネーションのデザインとして利用できます。
CSSではページ番号のサイズ、間隔、角丸、背景色、下側の厚み、影、ホバー時の移動量などを調整できます。画面幅が狭い場合はページ番号のサイズや間隔を小さくするレスポンシブ対応も行っているため、スマートフォン・タブレット・PCで利用できます。HTMLとCSSだけで実装できるため、立体感のあるページネーションを取り入れたい場合にも導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ番号をクリックすると、表示するサンプルページを切り替えられます。
1ページ目のサンプルコンテンツを表示しています。
ページ番号をクリックするとデモ内の表示内容が切り替わります。ページ番号には厚みと影を付け、カーソルを合わせると浮き上がります。
コードをコピーして使おう！
<!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="three-dimensional-pagination">
<!-- タイトル -->
<div class="three-dimensional-pagination_title">
立体的なページネーション
</div>
<!-- 説明文 -->
<p class="three-dimensional-pagination_text">
厚みと影を付けた立体的なページ番号を表示します。
</p>
<!-- ページネーション -->
<nav
class="three-dimensional-pagination_nav"
aria-label="ページネーション">
<!-- 現在のページ -->
<a
class="three-dimensional-pagination_link current"
href="#"
aria-current="page">
1
</a>
<!-- ページ2 -->
<a
class="three-dimensional-pagination_link"
href="#">
2
</a>
<!-- ページ3 -->
<a
class="three-dimensional-pagination_link"
href="#">
3
</a>
<!-- ページ4 -->
<a
class="three-dimensional-pagination_link"
href="#">
4
</a>
<!-- ページ5 -->
<a
class="three-dimensional-pagination_link"
href="#">
5
</a>
</nav>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではタイトル、説明文、ページ番号を配置し、CSSではページネーション全体のレイアウトやページ番号のサイズ、色、角丸、厚み、影などを設定します。JavaScriptを使用せず、HTMLとCSSだけで立体的なページネーションを表示できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはページネーションの内容を構成するファイルです。「立体的なページネーション」のタイトル、説明文、1〜5のページ番号を編集できます。現在のページにはcurrentクラスとaria-current="page"を指定して、ほかのページ番号と異なる表示にしています。
style.cssはページネーション全体とページ番号のデザインを設定するファイルです。ページ番号の横幅・高さ・間隔・角丸・色に加えて、border-bottomによる下側の厚みとbox-shadowによる影を設定しています。カーソルを合わせたときはページ番号が上方向へ移動し、青色へ変化して浮き上がる表示になります。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開くと、立体的なページネーションが表示されます。各ページ番号はa要素で作成しているため、実際に使用する場合はindex.htmlのhrefを移動先のURLへ変更してください。
カスタマイズできる内容
index.htmlではタイトル、説明文、ページ番号、リンク先を変更できます。ページ番号のa要素を追加・削除することで、必要なページ数に合わせて表示内容を調整できます。現在表示しているページを変更する場合は、対象となるリンクへcurrentクラスとaria-current="page"を指定します。
style.cssではページネーション全体の最大横幅、余白、背景色、角丸を変更できます。ページ番号についてはサイズ、間隔、枠線、下側の厚み、角丸、背景色、文字色、影を調整できます。特にborder-bottomとbox-shadowを変更すると、ページ番号の立体感を強くしたり控えめにしたりできます。また、ホバー時の移動量や色、影も変更できます。
数値調整
style.css
max-width:700px;
ページネーション全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
ページネーション全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
ページネーション全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
ページネーション全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 28px;
説明文の下側余白です。28pxを大きくするとページ番号との間隔が広がり、小さくすると狭くなります。
gap:12px;
ページ番号同士の間隔です。値を大きくするとページ番号が離れ、小さくすると近づきます。
width:48px;
ページ番号の横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
height:48px;
ページ番号の高さです。値を大きくすると高くなり、小さくすると低くなります。
border-bottom:6px solid #94a3b8;
ページ番号の下側に付ける厚みです。6pxを大きくすると厚みが増して立体感が強くなり、小さくすると薄く見えます。
border-radius:10px;
ページ番号の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 6px 10px rgba(15,23,42,.12);
通常時のページ番号へ付ける影です。6pxや10pxを調整すると影の位置や広がりが変わり、立体感を調整できます。
transform:translateY(-4px);
カーソルを合わせたときにページ番号を上方向へ移動させる距離です。4pxを大きくすると、より大きく浮き上がって見えます。
transition:.2s
ホバー時の表示が切り替わる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 8px 14px rgba(37,99,235,.22);
カーソルを合わせたときの影です。8pxや14pxを大きくすると影が広がり、ページ番号がより浮き上がって見えます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって画面幅に合わせて全体が縮小され、flex-wrap:wrapによってページ番号を表示できる横幅が足りない場合は折り返されます。さらに640px以下では全体の余白をpadding:24px 18px;、ページ番号同士の間隔をgap:8px;、ページ番号のサイズを44pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント