メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

ページ送り(Pagination)

一連の関連コンテンツが複数のページにまたがって存在することを示すためのページ送りを表示するための解説と例。

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。

概要(Overview)v5.2.0デザイン変更

大きなヒット領域を提供しながら、リンクを逃しにくく簡単に拡大縮小するために、ページングのための接続されたリンクの大きなブロックを使用。ページ送りはリストのHTML要素で構築され、スクリーンリーダーは利用可能なリンクの数を知らせられる。包括用の <nav> 要素を使用して、それをリーダーやその他の支援技術を絞り込むためのナビゲーションセクションとして識別する。

さらに、ページにはこのようなナビゲーション・セクションが複数存在する可能性があるので、その目的を反映するため <nav> にその説明として aria-label を付けることを推奨。例えば、ページ送りコンポーネントを使用して一連の検索結果の間を移動する場合、適切なラベルは aria-label="検索結果ページ" となる。

見本
設定例
<nav aria-label="ページ送りの実例">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">前へ</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">次へ</a></li>
  </ul>
</nav>
【設定】
  • nav[aria-label] > ul.pagination > li.page-item > a.page-link
アクセシビリティの設定】
  • ラベリングとして <nav>aria-label 属性を入れる
【変更履歴】
  • 【v5.2.0】
    • border-radius の値を調整したので、若干丸みを帯びたデザインに変更

アイコンの操作(Working with icons)

ページ送りのリンクのテキストの代わりにアイコンやシンボルを使用したいのなら、aria 属性で適切なスクリーンリーダーをサポートして下さい。

見本
設定例
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="前">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="次">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
【設定】
  • リストのラベルとして、記号やアイコンの使用ができる。
  • «, », , を使うときは、それぞれ &laquo;, &raquo;, &larr;, &rarr; と記述してエスケープ処理をする
アクセシビリティの設定】
  • 記号やアイコンを使用する場合は、それを囲む <span>aria-hidden="true" 属性(スクリーンリーダー等での読み上げをスキップさせる)を入れる
  • 「前へ」と「次へ」を意味するリスト部分には、ユーザー補助用として aria-label 属性(代替テキスト)を入れる

ページ送りの無効化とアクティブ化(Disabled and active states)

ページ送りのリンクは、さまざまな状況に合わせてカスタマイズできる。クリックできないように見えるリンクに .disabled、現在のページを示すリンクには .active を使用。

.disabledクラスは pointer-events: none を使用して <a> のリンク機能を無効にしようとするが、そのCSSプロパティはまだ標準化されておらず、キーボードナビゲーションも考慮していない。そのため、無効なリンクには常に tabindex="-1" を追加し、カスタムJavaScriptを使用して機能を完全に無効にする必要がある。

1.アンカーリンク <a> に設定 v5.1.1設定変更

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">前へ</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">次へ</a>
    </li>
  </ul>
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">前へ</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2 <span class="sr-only">(現位置)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">次へ</a>
    </li>
  </ul>
</nav>

2.<span> に設置

見本

オプションで、<span> のアンカーを有効や無効にしたり、前後の矢印のアンカーを省略したり、クリック機能を削除して、意図したスタイルを維持しながらキーボードのフォーカスを防止することもできる。

Bootstrap5.xの設定例 緑背景が変更箇所
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">前へ</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">次へ</a>
    </li>
  </ul>
</nav>
※Bootstrap4(~v4.5.3)の設定例 赤背景が変更箇所
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">前へ</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        2 
        <span class="sr-only">(現位置)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">次へ</a>
    </li>
  </ul>
</nav>
【設定】
  • リンクを無効化したい場合は、li.page-item.disabled を追加
  • 現在のページをアクティブ化したい場合は、li.page-item.active を追加
  • 無効やアクティブ化するページはアンカーリンク(<a>)でなく <span> にしても可
アクセシビリティの設定】
  • li.page-item.active を追加する場合は、.active[aria-current="page"](支援技術に現在のページであることを伝える)を追加して現在の位置であることを表示
【変更履歴】
  • 【v5.0.0-alpha2】
    • 現在の位置:span.sr-onlyspan.visually-hidden
  • 【v5.0.0-alpha3】(v4.6.0でバックポート)
    • 現在の位置:li.page-item.active[aria-current="page"] を入れるので、span.visually-hiddenspan.sr-only)は不要に
  • 【v5.1.1】
    • ページリンクが無効の場合(li.page-item.disabled > a):href 属性、tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)、aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)の設定が不要に(参考、v4.6.1でバックポート)

ページ送りのサイズ(Sizing)

ページ送りのサイズを大きくしたり小さくしたいなら、.pagination-lg.pagination-sm を追加。

見本

大きめ:.pagination-lg

小さめ:.pagination-sm

デフォルト

設定例
大きめ<nav aria-label="...">
  <ul class="pagination pagination-lg">
    ...
  </ul>
</nav>
小さめ<nav aria-label="...">
  <ul class="pagination pagination-sm">
    ...
  </ul>
</nav>
【設定】
  • .pagination.pagination-{size}(上記の「サイズの種類」から選択)を追加

配置(Alignment)

Flexユーティリティを使用してページ設定コンポーネントの配置を変更。例えば、.justify-content-center を使用すると、次のようになる:

見本
設定例
中央揃え<nav aria-label="...">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled"><a class="page-link">前へ</a></li>
    ...
  </ul>
</nav>

.justify-content-end を使用:

見本
設定例
行末揃え<nav aria-label="...">
  <ul class="pagination justify-content-end">
    ...
  </ul>
</nav>

.justify-content-around を使用:

見本
設定例
等間隔に配置<nav aria-label="...">
  <ul class="pagination justify-content-around">
    ...
  </ul>
</nav>
【設定】
  • 中央揃え:.pagination.justify-content-center を追加
  • 行末揃え:.pagination.justify-content-end を追加
  • 等間隔に配置:.pagination.justify-content-around を追加

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数(Variables)v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、ページ送りは、リアルタイムのカスタマイズを強化するために、.pagination でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定
scss/_pagination.scss 内 pagination-css-vars の設定--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-color: #{$pagination-color};
--#{$prefix}pagination-bg: #{$pagination-bg};
--#{$prefix}pagination-border-width: #{$pagination-border-width};
--#{$prefix}pagination-border-color: #{$pagination-border-color};
--#{$prefix}pagination-border-radius: #{$pagination-border-radius};
--#{$prefix}pagination-hover-color: #{$pagination-hover-color};
--#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
--#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
--#{$prefix}pagination-focus-color: #{$pagination-focus-color};
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
--#{$prefix}pagination-active-color: #{$pagination-active-color};
--#{$prefix}pagination-active-bg: #{$pagination-active-bg};
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
--#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
--#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};

Sass変数(Sass variables)v5.2.0変数から名称変更

デフォルトの設定
scss/_variables.scss 内 pagination-variables の設定$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;

$pagination-font-size:              $font-size-base;

$pagination-color:                  var(--#{$prefix}link-color);
$pagination-bg:                     $white;
$pagination-border-radius:          $border-radius;
$pagination-border-width:           $border-width;
$pagination-margin-start:           calc($pagination-border-width * -1); // stylelint-disable-line function-disallowed-list
$pagination-border-color:           $gray-300;

$pagination-focus-color:            var(--#{$prefix}link-hover-color);
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            var(--#{$prefix}link-hover-color);
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

Sass mixin v5.2.0mixinから名称変更

デフォルトの設定
scss/mixins/_pagination.scss 内 pagination-mixin の設定@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}pagination-padding-x: #{$padding-x};
  --#{$prefix}pagination-padding-y: #{$padding-y};
  @include rfs($font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-border-radius: #{$border-radius};
}

ページャー(Pager)※裏技

ページャーは、v4で廃止となったが、代用的にv3の時のような表示で使用。

ページャーの設定(Default example)

Flexユーティリティを使用して、ページャーを中心に配置。

見本
設定例
<nav aria-label="ページャー">
  <ul class="pagination justify-content-center">
    <li>
      <a class="btn page-link rounded-pill" href="#">&larr; 前</a>
    </li>
    <li class="mx-2">
      <a class="btn page-link rounded-pill" href="#">現在</a>
    </li>
    <li>
      <a class="btn page-link rounded-pill" href="#">次 &rarr;</a>
    </li>
  </ul>
</nav>
【設定】
  • nav[aria-label] > ul.pagination.justify-content-center > <li> > a.btn.page-link.rounded-pill
  • «, », , を使うときは、それぞれ &laquo;, &raquo;, &larr;, &rarr; と記述してエスケープ処理をする
【注意】
  • ページャーのリンクボタンの間には空白がないので、<li>空白ユーティリティクラスを追加する必要がある(上記の見本では真ん中のページャーで左右のマージンを0.5remに設定)
  • a.btn.page-link.rounded-pilla.btn.btn-outline-{themecolor}.rounded-pill(アウトラインボタン)などを利用しても可
アクセシビリティの設定】
  • ラベリングとして nav[aria-label] で囲む
  • 記号やアイコンを使用する場合は、それを囲む <span>aria-hidden="true" 属性を入れる

.justify-content-center.justify-content-between に変更して、両端にページャーを配置。

見本
設定例
<nav aria-label="...">
  <ul class="pagination justify-content-between">
    <li>
      <a class="btn page-link rounded-pill" href="#">古</a>
    </li>
    <li>
      <a class="btn page-link rounded-pill" href="#">現在</a>
    </li>
    <li>
      <a class="btn page-link rounded-pill" href="#">新</a>
    </li>
  </ul>
</nav>
【設定】
  • <ul>.pagination.justify-content-between を追加

ページャーのリンク無効化(Optional disabled state)

見本
設定例
<nav aria-label="...">
  <ul class="pagination justify-content-between">
    <li>
      <a class="btn page-link rounded-pill text-muted disabled" href="#" aria-disabled="true"><span aria-hidden="true">&larr;</span> 古</a>
    </li>
    <li>
      <a class="btn page-link rounded-pill" href="#">新 <span aria-hidden="true">&rarr;</span></a>
    </li>
  </ul>
</nav>
【設定】
  • 無効化したいアンカーリンク(<a>)に、.text-muted.disabledaria-disabled="true" を入れる
【注意】
  • ページ送りでは <li>.disabled を追加しないとリンクが無効にならないが、このページャーでは <a>.disabled を追加しないとリンクが無効にならない