[CSSフレームワーク]BulmaWebページでは、table要素などを使用してデータを表形式のリストで表示することがあります。表示するデータ(行)の件数が少なければ、すべてのデータを表示しても問題にはなりませんが、データの件数が多い場合は画面上のレイアウトや読み込みのパフォーマンス等の問題がありますので、データをいくつかのページに分割(ページング)して表示したい時があります。ページングすることで、ユーザーが一度に扱いやすい量のデータをページごとに区切って表示することができます。Bulmaにはページングを行った時に全体でどれくらいのページがあるのかを表示する現時点ではどのページが表示されているのかを表示するユーザー表示させるページを選択させるなどの機能を実装するためのページネーションを作成するためのクラスが用意されています。今回は、ページネーションを簡単に配置できるpaginationクラスを紹介します。大サイズ応答性が高く使いやすい柔軟なページ付けができるpaginationクラスpaginationクラスを使うと、テーブル(表)やリストなどのページングしたい要素の上または下に、ページ番号のついたボタンを配置できます。paginationクラスとサブクラスpaginationクラスを使用してページネーションのスタイルを設定する際は、paginationクラスを指定した要素の子要素に前のページに移動するボタン次のページに移動するボタン各ページに移動するボタンのリストを配置するためのクラスを指定します。前のページに移動するボタンの要素には、pagination-previousクラスを指定します。次のページに移動するボタンの要素には、pagination-nextクラスを指定します。各ページに移動するボタンのリストの要素には、pagination-listクラスを指定します。--></ul></nav>各ページに移動するボタンのリストには、ページ番号のボタンを配置します。ページ番号のボタンの要素には、pagination-linkクラスを指定します。aria-label="5ページ目へ">5</a></li></ul></nav>ブラウザーでの表示ページ番号の数が多く一度に配置できない場合は、途中のページ番号を省略するための記号「...(エスケープ文字の&hellip;)」を表示することができます。ページ番号の省略を表す要素には、pagination-ellipsisクラスを指定します。aria-label="25ページ目へ">25</a></li></ul></nav>ブラウザーでの表示ページネーションのボタンは、画面のサイズ(横幅)によって配置が変化します。現在のページ番号を強調するBulmaのページネーションでは、現在のページ番号のボタンを強調してユーザーに知らせるためのクラスが用意されています。aria-label="25ページ目へ">25</a></li></ul></nav>特定のページ番号を強調する際は、強調する番号のボタン(上記の例ではa要素)に、is-currentクラスを指定します。ここでは、13ページ目のボタンを強調しています。ボタンの無効化ページャーに配置するボタンは無効にすることができます。disabled属性を指定して無効にしたボタンは、次のように表示されます。aria-label="5ページ目へ">5</a></li></ul></nav>ここでは、4ページ目のボタンと前のページへ移動するボタンを無効にしています。通常(デフォルト)では、ページ番号のボタンが左寄せで配置されますが、ページ番号のボタンの位置は、中央や右寄せで配置できます。ページ番号のボタンの表示位置を中央や右寄せにする場合は、paginationクラスを指定している要素にクラスの指定を追加します。中央に配置する場合は、is-centeredクラスを追加で指定します。右に配置する場合は、is-rightクラスを追加で指定します。aria-label="25ページ目へ">25</a></li></ul></nav>ブラウザーでの表示ボタンのスタイルを丸くするページ番号のボタン、前のページへ移動するボタン、次のページへ移動するボタンは、丸くすることができます。丸いボタンのスタイルにする場合は、paginationクラスを指定している要素にis-roundedクラスを追加で指定します。aria-label="25ページ目へ">25</a></li></ul></nav>ブラウザーでの表示ページネーションのサイズページネーションのサイズは、通常サイズの他に小サイズ、中サイズ、大サイズの3つが用意されています。サイズを変更する場合は、paginationクラスを指定している要素にサイズのクラスを追加で指定します。小サイズ小さいサイズにする場合は、is-smallクラスを指定します。中サイズ中くらいのサイズにする場合は、is-mediumクラスを指定します。大サイズ大きいサイズにする場合は、is-largeクラスを指定します。[CSSフレームワーク]Webページでは、サイドバーにナビゲーションのメニューを配置する場合があります。[CSSフレームワーク]Webページでは、ヘッダーやサイドバーにドロップダウンメニューを配置することがあります。[CSSフレームワーク]Webサイトでは、商品紹介ページやダッシュボードのアイテムなど、いろいろな場面でカード型のUIを使用することがあります。[CSSフレームワーク]前回の記事では、テキストボックス(input要素)のスタイルを設定するinputクラスをご紹介しました。[CSSフレームワーク]Webページをレイアウトしていると、いくつかの要素の集まりを1つのボックスにまとめて配置したい場合があります。[CSSフレームワーク]Bulmaには、テキストを記述する際のコンテナとなるクラスが用意されています。[CSSフレームワーク]Webページにサイズの大きい画像を配置した際、画像の読み込みに時間がかかってしまう場合やまったく読み込まれない場合があります。[CSSフレームワーク]前回に引き続き、CSSフレームワークのBulmaを使ったグリッドシステムの使い方について記載します。Bulma]Bulmaのボタンクラスを使用するとWebページに簡単にボタンを配置することができます。[CSSフレームワーク]ユーザーの入力を受け付けるWebサイトやWebシステムでは、HTMLのフォームを配置します。