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動画ファイルを再生します。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
