From c5ac1796d2047310544a4be83f7bef83bf0660cf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 25 Dec 2021 09:31:05 +0900 Subject: 2021/11/20 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/layout_cookbook/pagination/index.md | 81 +++++++++++----------- 1 file changed, 40 insertions(+), 41 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/layout_cookbook/pagination/index.md b/files/ja/web/css/layout_cookbook/pagination/index.md index c35e0b27dc..754d4e7c93 100644 --- a/files/ja/web/css/layout_cookbook/pagination/index.md +++ b/files/ja/web/css/layout_cookbook/pagination/index.md @@ -3,80 +3,79 @@ title: ページ付け slug: Web/CSS/Layout_cookbook/Pagination tags: - CSS - - Layout - - cookbook - - flexbox + - CSS 料理帳 + - ガイド + - CSS レイアウト + - フレックスボックス - pagination translation_of: Web/CSS/Layout_cookbook/Pagination --- -

{{CSSRef}}

+{{CSSRef}} -

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

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

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

+![ページ付きリスト内のページのセットへのリンク](pagination.png) -

要件

+## 要件 -

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

+画面リーダーを使用している人がページ付けであることを理解できるようにするために、項目を {{htmlelement("nav")}} 要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に 1 行で表示します。 -

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

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

レシピ

+## レシピ -

{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}} -
-

この例をダウンロードする

-
+> **Callout:** +> +> [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html) -

行った選択

+## 行った選択 -

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

+このパターンは、[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)を使用してレイアウトされています — 一方のフレックスコンテナーは別のフレックスコンテナーの中にネストされています。 {{htmlelement("nav")}} 要素は、{{cssxref("justify-content")}} プロパティを使用してリストを中央に配置できるように、フレックスコンテナーとして指定されています。 -

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

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

代替方法

+## 代替策 -

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

+{{cssxref("column-gap")}} プロパティがブラウザーに実装されると、項目の間隔を空けるためにマージンの代わりにこれを使用できます。 -
.pagination {
+```css
+.pagination {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   column-gap: 2px;
 }
-
+``` -

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

+## アクセシビリティの考慮 -

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

+画面リーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。 これを手助けするために、 [`aria-label="pagination"`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) を `