ページ付け
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
この料理帳のパターンは、ページ付け(pagination)を表示するために使用されるナビゲーションのパターンを示し、ユーザーは検索結果などのコンテンツのページ間を移動できます。
要件
スクリーンリーダーを使用している人がページ付けであることを理解できるようにするために、項目を <nav>
要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に 1 行で表示します。
通常、ページ付けのコンポーネントはコンテンツの下側にあり、水平方向の中央に配置されます。
レシピ
行った選択
このパターンは、フレックスボックスを使用してレイアウトされています — 一方のフレックスコンテナーは別のフレックスコンテナーの中にネストされています。 <nav>
要素は、justify-content
プロパティを使用してリストを中央に配置できるように、フレックスコンテナーとして指定されています。
リスト自体も、項目を行としてレイアウトするためのフレックスコンテナーになります。 項目を配置するために、フレックスアイテムには margin
を使用します。
代替策
column-gap
プロパティがブラウザーに実装されると、項目の間隔を空けるためにマージンの代わりにこれを使用できます。
.pagination {
list-style: none;
margin: 0;
padding: 0;
display: flex;
column-gap: 2px;
}
アクセシビリティの考慮
スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。 これを手助けするために、 aria-label="pagination"
(en-US) を <nav>
要素に追加しました。
スクリーンリーダーによって読み取られるが視覚的に隠されている追加のコンテンツを追加し、ページング矢印に aria-hidden
(en-US) 属性を設定しました。
このドキュメントの最後にある「関連情報」の節には、関連するアクセシビリティのトピックへのリンクがあります。
ブラウザーの互換性
レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。
align-items を含む以下の例のように、使用したキー・プロパティのコンパチデータを含めます。
justify-content
BCD tables only load in the browser
フレックスレイアウトにおける column-gap
BCD tables only load in the browser