この料理帳のパターンは、ページ付け(pagination)を表示するために使用されるナビゲーションのパターンを示し、ユーザーは検索結果などのコンテンツのページ間を移動できます。

ページ付きリスト内のページのセットへのリンク

要件

ページ付けのパターンは通常、項目を1行に表示します。 スクリーンリーダーを使用している人がページ付けであることを理解できるようにするために、項目を <nav> 要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に1行として表示します。

通常、ページ付けのコンポーネントはコンテンツの下側にあり、水平方向の中央に配置されます。

レシピ

行った選択

このパターンは、フレックスボックスを使用してレイアウトされています — 一方のフレックスコンテナは別のフレックスコンテナの中にネストされています。 <nav> 要素は、justify-content プロパティを使用してリストを中央に配置できるように、フレックスコンテナとして指定されています。

リスト自体も、項目を行としてレイアウトするためのフレックスコンテナになります。 項目を配置するために、フレックス項目には margin を使用します。

代替方法

column-gap プロパティがブラウザーに実装されると、項目の間隔を空けるためにマージンの代わりにこれを使用できます。

.pagination {
  list-style: none;
  margin: 0; 
  padding: 0;
  display: flex;
  column-gap: 2px;
}

アクセシビリティへの懸念

スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。 これを手助けするために、<nav> 要素に aria-label="pagination" を追加しました。

スクリーンリーダーによって読み取られるが視覚的に隠されている追加のコンテンツを追加し、ページング矢印に aria-hidden 属性を設定しました。

このドキュメントの最後にある「関連情報」セクションには、関連するアクセシビリティのトピックへのリンクがあります。

ブラウザー実装状況

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

justify-content

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Flex LayoutChrome 完全対応 52
完全対応 52
部分対応 29
補足
補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 20
補足
完全対応 20
補足
補足 Before Firefox 27, Firefox supported only single-line flexbox.
未対応 18 — 20
無効
無効 From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11Opera 完全対応 12.1Safari 完全対応 9WebView Android 完全対応 52
完全対応 52
部分対応 4.4
補足
補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 52
完全対応 52
部分対応 29
補足
補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 20
補足
完全対応 20
補足
補足 Before Firefox 27, Firefox supported only single-line flexbox.
未対応 18 — 20
無効
無効 From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Supported in Grid LayoutChrome 完全対応 57Edge 完全対応 16Firefox 完全対応 52IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 52Edge Mobile 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.2

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

フレックスレイアウトの column-gap

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Flex LayoutChrome 未対応 なしEdge ? Firefox 完全対応 63IE 未対応 なしOpera 未対応 なしSafari 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 63Opera Android 未対応 なしSafari iOS 完全対応 2
接頭辞付き
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,