ページ送り（Pagination）

概要（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>

アイコンの操作（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>

ページ送りの無効化とアクティブ化（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.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>

ページ送りのサイズ（Sizing）

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

見本

設定例

大きめ<nav aria-label="...">
  <ul class="pagination pagination-lg">
    ...
  </ul>
</nav>

小さめ<nav aria-label="...">
  <ul class="pagination pagination-sm">
    ...
  </ul>
</nav>

配置（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>

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:                     var(--#{$prefix}body-bg);
$pagination-border-radius:          var(--#{$prefix}border-radius);
$pagination-border-width:           var(--#{$prefix}border-width);
$pagination-margin-start:           calc(#{$pagination-border-width} * -1); // stylelint-disable-line function-disallowed-list
$pagination-border-color:           var(--#{$prefix}border-color);

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

$pagination-hover-color:            var(--#{$prefix}link-hover-color);
$pagination-hover-bg:               var(--#{$prefix}tertiary-bg);
$pagination-hover-border-color:     var(--#{$prefix}border-color); // v6でのTodo：これを削除？

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

$pagination-disabled-color:         var(--#{$prefix}secondary-color);
$pagination-disabled-bg:            var(--#{$prefix}secondary-bg);
$pagination-disabled-border-color:  var(--#{$prefix}border-color);

$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:       var(--#{$prefix}border-radius-sm);
$pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg);

Sassミックスイン（Sass mixins）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>

整列化したページャー（Aligned links）

.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>

ページャーのリンク無効化（Optional disabled state）

見本

設定例

<nav aria-label="...">
  <ul class="pagination justify-content-between">
    <li>
      <a class="btn page-link rounded-pill text-body-secondary 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>