【CSS】Flexboxによるページネーション(ページャ)作成方法

HTML/CSS

ページネーションの作成手順

今回は以下の手順で作成します。

ページネーション作成手順
  1. リストを作成する
  2. リストを横並びにする
  3. インライン要素をテキスト中央よせボタンにする
  4. ボタンに応じて装飾を変更する

リストを作成する

ページネーションの元となるリストを作成します。

<ol class="pagination">
  <li class="pagination__item">
    <a class="pagination__link" href="#">前へ</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__link pagination__link--active">1</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">2</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">3</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__link pagination__link--extend">…</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">9</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">10</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">11</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">次へ</a>
  </li>
</ol>


.pagination {
  background: lightgreen; /* 開発用 */
}
.pagination__item {
  background: lightblue; /* 開発用 */
}

.pagination__link {
  text-decoration: none; /* aタグの装飾をなくす */
}

See the Pen
pagination-list-rows by Toshiharu Nishina (@nishina555)
on CodePen.

リストを横並びにする

Flexbox/inline-block/floatの横並び実装の比較と使い分けで紹介した通り、アイテムを横並びにする方法はFlexbox・inline-block・floatの3種類があります。

今回はFlexboxを利用して横並びを実装します。

<ol class="pagination">
  <li class="pagination__item">
    <a class="pagination__link" href="#">前へ</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__link pagination__link--active">1</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">2</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">3</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__link pagination__link--extend">…</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">9</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">10</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">11</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">次へ</a>
  </li>
</ol>


.pagination {
  display: flex; /* Flex化する */
  padding-left: 0; /* liタグの左の余白を削除 */
  list-style-type: none; /* olのリストスタイル(1,2,3...)の削除 */
  background: lightgreen;
}

.pagination__item {
  background: lightblue;
}

.pagination__item:not(:last-child) {
  margin-right: 10px; /* 間隔をあける */
}

.pagination__link {
  text-decoration: none;
}

See the Pen
pagination-list-lines by Toshiharu Nishina (@nishina555)
on CodePen.

上記のCSSについて補足説明をします。

padding-left: 0はliタグを横並びにした際に生まれる左余白を削除するためのものです。詳細解説は【CSS】リスト(liタグ)の左余白をなくす方法で紹介しています。

last-childにマージンを持たせない理由はUIパーツとして再利用しやすくするためです。詳細解説はlast-childのmarginを0にして再利用しやすいCSS設計をするで紹介しています。

インライン要素をテキスト中央よせボタンにする

【CSS】テキスト中央よせボタンパーツの実装パターン集で紹介した通り、テキスト中央よせボタンの実装方法には主に『text-align・上下paddingを利用する方法』と『Flexboxを利用する方法』の2つがあります。

今回はFlexboxを利用してテキスト中央よせボタンを実装します。

.pagination {
  display: flex;
  padding-left: 0;
  list-style-type: none;
  background: lightgreen;
}

.pagination__item {
  background: lightblue;
}

.pagination__item:not(:last-child) {
  margin-right: 10px;
}

.pagination__link {
  /* Flexbox化し、横幅と高さを指定できるようにする */
  display: flex;
  width: 40px;
  height: 40px;

  /* コンテンツの上下左右中央よせ */
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

See the Pen
pagination-list-buttons by Toshiharu Nishina (@nishina555)
on CodePen.

ボタンに応じて装飾を変更する

ボタンに応じて適用するCSSを変更させればページネーションの完成です。最終的なコードは以下のようになります。

<ol class="pagination">
  <li class="pagination__item">
    <a class="pagination__link" href="#">前へ</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__link pagination__link--active">1</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">2</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">3</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__link pagination__link--extend">…</span>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">9</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">10</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">11</a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">次へ</a>
  </li>
</ol>


.pagination {
  display: flex;
  padding-left: 0;
  list-style-type: none;
}

.pagination__item:not(:last-child) {
  margin-right: 10px;
}

.pagination__link {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  /* ボタンデザイン */
  border: 1px solid black;
  background-color: white;
}

/* 現在のページのボタンデザイン */
.pagination__link--active {
  color: white;
  background-color: black;
}

/* 「...」のデザイン */
.pagination__link--extend {
  border: none;
}

See the Pen
pagination-list-decoration by Toshiharu Nishina (@nishina555)
on CodePen.

参考: 横スクロールできるようにする

【CSS】overflowとFlexboxで横スクロール可能な横並びアイテムを実装するで紹介した通り、over-flowとFlexboxを利用することで横スクロールが実装できます。

横スクロール可能なページネーションの具体例は以下の通りです。

<nav class="container">
  <ol class="pagination">
    <li class="pagination__item">
      <a class="pagination__link" href="#">前へ</a>
    </li>
    <li class="pagination__item">
      <span class="pagination__link pagination__link--active">1</span>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#">2</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#">3</a>
    </li>
    <li class="pagination__item">
      <span class="pagination__link pagination__link--extend">…</span>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#">9</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#">10</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#">11</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#">次へ</a>
    </li>
  </ol>
</nav>


.container {
  display: flex;
  overflow-x: auto;
}

(略)

See the Pen
pagination-scroll by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考

RECOMMEND