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

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

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

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

■表示例

■ソースコード

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

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を追加すると、背景色が変わります。
 

■表示例

■上記のソースコード

▲▲目次に戻る▲▲

まとめ

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

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

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

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

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

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室