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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
