HTMLとCSSのページネーションジェネレーター

HTMLとCSSのページネーションジェネレーター: 用途

ブログ、ショップ、検索結果リストのページネーションを作成します。総ページ数、現在のページ、表示する前後のページ数、アドレスの形式（/blog/page/{n}や?page={n}など）を入力してください。スタイルは角、丸、ミニマルから選べ、アクセントカラーも選べます。

コードはaria-label付きのnav、現在のページのaria-current="page"、後続ページの項目を見つけるためにGoogleがたどれる本物のa hrefリンクを使います。各番号には44pxのタップ領域があり、スマートフォンでは「前へ」と「次へ」のテキストが矢印だけになります。

使い方

1. 総ページ数と現在のページを入力します。
2. アドレス、スタイル、色を選びます。
3. コードをサイトにコピーします。

使うタイミング

• 投稿が多いブログ。
• ショップの商品リスト。
• 検索結果。

よくある質問

なぜボタンではなくリンクを使うのですか？

リストの各ページには、/blog/page/2や?page=2のような固有のアドレスが、通常のa hrefリンクとして必要です。そうすることで、Googleがリンクをたどって後続ページの項目を見つけられ、ユーザーもページを別のタブで開いたりアドレスを共有したりできます。

省略記号はどう動きますか？

ページ数が多いと、最初と最後のページ、現在のページの近くのいくつかを表示し、それ以外の部分を…に置き換えます。左右に何ページ表示するかは選べます。

rel="prev"とrel="next"は必要ですか？

Googleには不要です。2019年にこれらのマークアップの使用をやめました。害はなく、他のシステムが読む可能性もあるため、このツールは前へと次へのリンクにrelを付けます。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール