Bootstrap4 Pagination(ページネーション)でページ送りを作るやり方を徹底解説

ここではBootstrap4で利用できるPagination(ページネーション)の使い方を説明していきます。
 

Pagination(ページネーション)の基本

ページネーションとは、一つのキーワードで複数のページが存在する場合などの場合に、ページ送りの機能を提供するナビゲーションです。
 

■表示例

■ソースコード

<nav aria-label="Page Navigation">
	<ul class="pagination">
    <li class="page-item">
			<a  class="page-link" href="#" aria-label="Previous Page">
				<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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
			<a href="#"  class="page-link" aria-label="Next Page">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>

基本的な作り方は下記の通りです。

1. nav要素の中で、paginationをクラス指定したul要素を配置する。
2. li要素には、クラスにlist-itemを指定する。
3. a要素には、クラスにpage-linkを指定する。

ソースコードの中にある、 aria-label=”Page Navigation”やaria-label=”Next(Previous) Page”ってなんですか？必要なんでしょうか？

aria-labelというのは指定の要素にラベルづけ(意味付け)するために利用されます。aria-labelがあると丁寧な書き方になりますが、あってもなくても機能的には大差ないので省いても良いと思います。
(参考)aria-label 属性の使用

disableとactiveの設定

li要素にpage-itemと同時にdisableを追加すると、使用不可状態(グレーになりリンクもなし)になります。また、現在見ているページであることを明示したい場合は、li要素にpage-itemと同時にactiveを追加すると、背景色が変わります。
 

■表示例

■上記のソースコード

<nav aria-label="Page Navigation">
	<ul class="pagination">
    <li class="page-item disabled">
			<a  class="page-link" href="#" aria-label="Previous Page">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
    <li class="page-item active"><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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
			<a href="#"  class="page-link" aria-label="Next Page">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>

まとめ

いかがでしたでしょうか。
 

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のPagination(ページネーション)の使い方の基本をご紹介しました。
 

公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
Pagination | Bootstrap4
 

今回は、以上になります。最後までご覧いただきありがとうございました。