やってみよう下の数字や「次へ」を押してページを切り替えてみてください
ナビゲーションメジャー(よく見る)
ページネーション
Pagination
「‹ 1 2 3 … 8 ›」のような番号のボタンで、ページを切り替える。
別名ページ送りページャーページ番号ページング
どこで使われている?
- よく見かける場所
- Google検索の結果、通販の商品一覧、掲示板
- 使うとよい場面
- 目当ての物を探して、「何ページ目にあったか」を覚えておきたい一覧
- 避けたい場面
- SNSのように眺めて楽しむ一覧(無限スクロールにする)
補足下までスクロールすると自動で続きが出るものは「無限スクロール」です。
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「ページネーション(Pagination)」を実装してください。 動き:一覧を決まった件数ごとにページに分け、下部に「前へ」「ページ番号」「次へ」のボタンを並べる。現在のページ番号を強調し、ページ数が多いときは途中を「…」で省略する。最初のページでは「前へ」を押せないようにする。 使う部品:Pagination(<nav aria-label="ページ送り"> で自作)
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Pagination(<nav aria-label="ページ送り"> で自作) |
|---|---|
| iPhoneアプリなら | 一般的ではない(無限スクロールが主流) |
| Androidアプリなら | 一般的ではない(無限スクロールが主流) |
| Flutterなら | 標準部品なし。自作(number_paginator パッケージ) |
| React Nativeなら | 標準部品なし。自作 |