メインコンテンツへスキップ

ページ送り(Pagination)

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

目次

概要(Overview)

大きなヒット領域を提供しながら、リンクを逃しにくく簡単に拡大縮小するために、ページングのための接続されたリンクの大きなブロックを使用。ページ送りはリストの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 属性を入れる

 

アイコンの操作(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)v5.0.0-alpha3設定変更

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

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

1. アンカーリンク <a> に設定

見本
Bootstrap5.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</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.disabled を追加する場合は、a.page-link と同じ要素に、[tabindex="-1"](リンクにキーボードフォーカスを受け取らないようにする)と [aria-disabled="true"](支援技術に要素が無効の状態であることを伝える)を入れる(span.page-link には不要)
  • 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)は不要に

 

ページ送りのサイズ(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ユーティリティを使用してページ設定コンポーネントの配置を変更。

見本

●中央揃え

●行末揃え

●等間隔に配置

設定例
中央揃え<nav aria-label="...">
	<ul class="pagination justify-content-center">
		<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">前へ</a></li>
		...
	</ul>
</nav>
行末揃え<nav aria-label="...">
	<ul class="pagination justify-content-end">
		...
	</ul>
</nav>
等間隔に配置<nav aria-label="...">
	<ul class="pagination justify-content-around">
		...
	</ul>
</nav>
【設定】
  • 中央揃え:.pagination.justify-content-center を追加
  • 行末揃え:.pagination.justify-content-end を追加
  • 等間隔に配置:.pagination.justify-content-around を追加

 

ページャー(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 を追加しないとリンクが無効にならない