CSSでページネーション（ページ送り）をデザインする方法を現役デザイナーが解説【初心者向け】
初心者向けにCSSでページネーション（ページ送り）をデザインする方法について解説しています。ページネーションは長いページを複数のページに分割して見やすくするものです。ページネーションの実装方法とデザインの例について見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSでページネーション（ページ送り）をデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
これが使えるようになると、ページ数が一目でわかり、今何ページ目を見ているのかが把握しやすく好きなページに移動できるメリットがあります。ぜひ参考にしてみてください。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
ページネーション（ページ送り）をデザインする方法について詳しく説明していくね！
お願いします！
ページネーション（ページ送り）とは
ページネーションとは、1ページに表示しきれない内容を複数ページにわたって掲載する場合に、ページ番号のリンクを並べたものです。
検索サイトや、ブログサイトなどでよく見かけますね。コーポレートサイトなどでも、お知らせの一覧ページに設置されていることがあります。
前のページ、次のページのリンクだけの場合に比べて、ページ数がどのくらいあるのか、今何ページ目を見ているのかが把握しやすく、好きなページに移動できるメリットがあります。
Googleの検索結果一覧に表示されているページネーション
Yahooの検索結果一覧に表示されているページネーション
TechAcademy Magazineのページネーション
ページネーション（ページ送り）をデザインする方法
ページネーション(ページ送り)では、基本的にはページ番号のリンクを並べれば良いですが
- ページ番号をいくつ並べるか(省略するか)
- 次のページへのリンク
- 前のページへのリンク
- 一番最初のページへのリンク
- 一番最後のページへのリンク
などを表示するかどうかについては、サイトの規模や、ページネーションが使用されているページの内容、サイト全体の体裁に合わせて検討しましょう。
また、ページネーションが必要になるようなサイトはWordPressをはじめとするCMS(コンテンツマネジメントシステム)などを使用し、既定の関数など使ってページネーションを配置することになるでしょう。
それぞれのCMSなどでは、決まったフォーマットのHTMLで出力されるので、どのようなHTMLで構成されているかを分析して、CSSでデザインしていけば良いでしょう。
今回はTechAcacdemy MagazineのページネーションのHTMLを検証してみましょう。
HTML：
<div class="nav-links"> <a class="prev page-numbers" href="https://techacademy.jp/magazine/category/webdesign/">«</a><!-- 現在の前のページへのリンク --> <a class="page-numbers" href="https://techacademy.jp/magazine/category/webdesign/">1</a><!-- 1ページ目へのリンク --> <span class="page-numbers current">2</span><!-- 現在閲覧しているページ(2ページ) --> <a class="page-numbers" href="https://techacademy.jp/magazine/category/webdesign/page/3">3</a><!-- 3ページ目へのリンク --> <span class="page-numbers dots">…</span><!-- ...の部分 --> <a class="page-numbers" href="https://techacademy.jp/magazine/category/webdesign/page/27">27</a><!-- 27ページ目(最後のページ)へのリンク --> <a class="next page-numbers" href="https://techacademy.jp/magazine/category/webdesign/page/3">»</a><!-- 現在の次のページへのリンク --> </div>
HTMLだけだと、上記のような表示になります。
ページのリンクや現在のページに割り振られたクラス名や要素を分析して、ユーザーが操作しやすいようにCSSでデザインしていきましょう。
デザイン例
ページネーション(ページ送り)は、サイト全体のデザインや構成に合わせてさまざまなデザインがあります。先述したように、現在のページがわかりやすくて、リンクをクリックしやすければ決まりはありませんので、いろんなサイトを参考に、自由にデザインしてみましょう。
Responsive web design jpのページネーション
Web Design Clipのページネーション
WordPressテーマ Totomoのページネーション
Totomo – WordPress Blog Theme demo
実際に書いてみよう
先ほど検証した、TechAcademy MagazineのページネーションのHTMLを分析してカスタマイズしてみましょう。マウスオンのときに変化をつけてみました。
HTML：
<div class="nav-links"> <a class="prev page-numbers" href="https://techacademy.jp/magazine/category/webdesign/">«</a><!-- 現在の前のページへのリンク --> <a class="page-numbers" href="https://techacademy.jp/magazine/category/webdesign/">1</a> <span class="page-numbers current">2</span><!-- 現在閲覧しているページ --> <a class="page-numbers" href="https://techacademy.jp/magazine/category/webdesign/page/3">3</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://techacademy.jp/magazine/category/webdesign/page/27">27</a> <a class="next page-numbers" href="https://techacademy.jp/magazine/category/webdesign/page/3">»</a><!-- 現在の次のページへのリンク --> </div>
CSS：
.nav-links{
padding:2em;
display:flex;
justify-content:center;
background:#f3f3f3;
}
a,span{
width:50px;
height:50px;
margin:2px;
line-height:50px;
text-align:center;
font-size:14px;
font-weight:bold;
text-decoration:none;
background:#fff;
color:#222;
transition:.3s;
}
a:hover{
background:gold;
border-radius:100%;
transform:rotate(360deg);
}
.current{
background:gold;
border-radius:100%;
}
.dots{
background:none;
}
新しいタブを開いて、実行結果のmp4動画ファイルを再生します。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
