CSSでページネーション(ページ送り)をデザインする方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSでページネーション(ページ送り)をデザインする方法について解説しています。ページネーションは長いページを複数のページに分割して見やすくするものです。ページネーションの実装方法とデザインの例について見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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でデザインしていきましょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

デザイン例

ページネーション(ページ送り)は、サイト全体のデザインや構成に合わせてさまざまなデザインがあります。先述したように、現在のページがわかりやすくて、リンクをクリックしやすければ決まりはありませんので、いろんなサイトを参考に、自由にデザインしてみましょう。

Responsive web design jpのページネーション

Responsive web design jp

Web Design Clipのページネーション

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では初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。