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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

ページ送り(Pagination) v4.0.0設定変更

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

概要(Overview) v4.0.0設定変更

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

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

見本
Bootstrap3.xの設定例
<nav aria-label="ページ送りの実例">
	<ul class="pagination">
		<li><a href="#">前へ</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">次へ</a></li>
	</ul>
</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
コピー<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 属性を入れる

【Bootstrap3.xとの変更箇所】

  • <li>.page-item を入れる
  • <a>.page-link を入れる

 

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

ページ送りのリンクのテキストの代わりにアイコンやシンボルを使用したいのなら、aria 属性と .sr-only ユーティリティで適切なスクリーンリーダーをサポートするようにすること。

見本
設定例
コピー<nav aria-label="...">
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="前">
				<span aria-hidden="true">&laquo;</span>
				<span class="sr-only">前</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>
				<span class="sr-only">次</span>
			</a>
		</li>
	</ul>
</nav>

【設定】

  • リストのラベルとして、記号やアイコンの使用が可能。
  • «, », , を使うときは、それぞれ &laquo;, &raquo;, &larr;, &rarr; と記述してエスケープ処理をする

アクセシビリティの設定】

  • 記号やアイコンを使用する場合は、それを囲む <span>aria-hidden="true" 属性(スクリーンリーダー等での読み上げをスキップさせる)を入れる
  • "前へ"と"次へ"を意味するリスト部分には、ユーザー補助用として aria-label 属性(代替テキスト)と span.sr-only を入れる

 

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

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

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

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

見本
設定例
コピー<nav aria-label="...">
	<ul class="pagination">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1">前へ</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active">
			<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> のアンカーを有効または無効にしたり、前後の矢印のアンカーを省略したり、クリック機能を削除して、意図したスタイルを維持しながらキーボードのフォーカスを防止することも可能。

設定例
コピー<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">
			<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 を追加し、ユーザー補助用に span.sr-only を入れて現在の位置であることを表示
  • 無効またはアクティブ化するページはアンカーリンク(<a>)でなく <span> にしても可

【Bootstrap3.xとの変更箇所】

  • リンクにカーソルを合わせた際に、無効化カーソル(cursor: not-allowed;)に変化しなくなった

 

ページ送りのサイズ(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) v4.0.0復活

Flexユーティリティを使用してページ設定コンポーネントの配置を変更。

見本

●中央揃え

●右寄せ

設定例
中央揃えコピー<nav aria-label="...">
	<ul class="pagination justify-content-center">
		...
	</ul>
</nav>
右寄せコピー<nav aria-label="...">
	<ul class="pagination justify-content-end">
		...
	</ul>
</nav>

【設定】

  • 中央揃え:.pagination.justify-content-center を追加
  • 右寄せ:.pagination.justify-content-end を追加

【Bootstrap3.xとの変更箇所】

  • ページ送りの右寄せや中央揃えはv3で廃止となったが、v4で復活。

 

ページャー(Pager) v4.0.0代用的使用

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

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

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

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav aria-label="ページャー">
	<ul class="pager">
		<li><a href="#">&larr; 前</a></li>
		<li><a href="#">現在</a></li>
		<li><a href="#">次 &rarr;</a></li>
	</ul>
</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
コピー<nav aria-label="ページャー">
	<ul class="pagination justify-content-center">
		<li>
			<a class="btn page-link badge-pill" href="#">&larr; 前</a>
		</li>
		<li class="mx-2">
			<a class="btn page-link badge-pill" href="#">現在</a>
		</li>
		<li>
			<a class="btn page-link badge-pill" href="#">次 &rarr;</a>
		</li>
	</ul>
</nav>

【設定】

  • nav[aria-label] > ul.pagination.justify-content-center > <li> > a.btn.page-link.badge-pill
  • «, », , を使うときは、それぞれ &laquo;, &raquo;, &larr;, &rarr; と記述してエスケープ処理をする

【注意】

  • ページャーのリンクボタンの間には空白がないので、<li>空白ユーティリティクラスを追加する必要がある(上記の見本では真ん中のページャーで左右のマージンを0.5remに設定)
  • a.btn.page-link.badge-pilla.btn.btn-outline-{themecolor}(アウトラインボタン)などを利用しても可

アクセシビリティの設定】

  • ラベリングとして nav[aria-label] で囲む
  • 記号やアイコンを使用する場合は、それを囲む <span>aria-hidden="true" 属性を入れる

【Bootstrap3.xとの変更箇所】

  • ul.pagerul.pagination.justify-content-center
  • <a>a.btn.page-link.badge-pill

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

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav aria-label="...">
	<ul class="pager">
		<li class="previous">
			<a href="#">古</a>
		</li>
		<li>
			<a href="#">現在</a>
		</li>
		<li class="next">
			<a href="#">新</a>
		</li>
	</ul>
</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
コピー<nav aria-label="...">
	<ul class="pagination justify-content-between">
		<li>
			<a class="btn page-link badge-pill" href="#">古</a>
		</li>
		<li>
			<a class="btn page-link badge-pill" href="#">現在</a>
		</li>
		<li>
			<a class="btn page-link badge-pill" href="#">新</a>
		</li>
	</ul>
</nav>

【設定】

  • <ul>.pagination.justify-content-between を追加

【Bootstrap3.xとの変更箇所】

  • ul.pagerul.pagination.justify-content-between
  • <li>.previous.next は不要に

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

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav aria-label="...">
	<ul class="pager">
		<li class="previous disabled">
			<a href="#"><span aria-hidden="true">&larr;</span> 古</a>
		</li>
		<li class="next">
			<a href="#">新 <span aria-hidden="true">&rarr;</span></a>
		</li>
	</ul>
</nav>
Bootstrap4.xの設定例 緑背景が変更箇所
コピー<nav aria-label="...">
	<ul class="pagination justify-content-between">
		<li>
			<a class="btn page-link badge-pill text-muted disabled" href="#" aria-disabled="true"><span aria-hidden="true">&larr;</span> 古</a>
		</li>
		<li>
			<a class="btn page-link badge-pill" href="#">新 <span aria-hidden="true">&rarr;</span></a>
		</li>
	</ul>
</nav>

【設定】

  • 無効化したいアンカーリンク(<a>)に、.text-muted.disabledaria-disabled="true" を入れる

【注意】

  • ページ送りでは <li>.disabled を追加しないとリンクが無効にならないが、この代用ページャーでは <a>.disabled を追加しないとリンクが無効にならない

【Bootstrap3.xとの変更箇所】

  • li.disabled > <a><li> > a.btn.page-link.badge-pill.text-muted.disabled
  • リンクにカーソルを合わせた際に、無効化カーソル(cursor: not-allowed;)に変化しなくなった