From 2b6bb8800819416d121a9f8d3136b1be2c6b4969 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 25 Dec 2021 22:41:29 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/layout_cookbook/card/index.md | 85 +++++++++++++------------- 1 file changed, 41 insertions(+), 44 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/layout_cookbook/card/index.md b/files/ja/web/css/layout_cookbook/card/index.md index 42395b2050..df830156c8 100644 --- a/files/ja/web/css/layout_cookbook/card/index.md +++ b/files/ja/web/css/layout_cookbook/card/index.md @@ -3,80 +3,77 @@ title: カード slug: Web/CSS/Layout_cookbook/Card tags: - CSS - - CSS Grid - - card - - cookbook - - css layout + - CSS 料理帳 + - CSS グリッド + - ガイド + - カード + - css レイアウト translation_of: Web/CSS/Layout_cookbook/Card --- -

{{CSSRef}}

+{{CSSRef}} -

このパターンは、オプションのフッター付きの「カード」コンポーネントのリストです。

+このパターンは、オプションでフッターが付く「カード」部品のリストです。 -

1行に3つのカードコンポーネント

+![1 行に 3 つのカード部品](cards.png) -

要件

+## 要件 -

カードコンポーネントには、見出し、画像、コンテンツ、フッターなど、さまざまなコンテンツを含めることができます。

+カード部品には、見出し、画像、コンテンツ、フッターなど、さまざまなコンテンツを含めることができます。 -

各カードは同じ高さでなければならず、フッターはカードの一番下に固定する必要があります。

+各カードは同じ高さでなければならず、フッターはカードの一番下に固定する必要があります。 -

カードのコレクションに追加すると、カードは2次元に並ぶ必要があります。

+カードのコレクションに追加すると、カードを 2 次元に並べる必要があります。 -

レシピ

+## レシピ -

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

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

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

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

行った選択

+## 行った選択 -

このカードは、1次元レイアウトであるにもかかわらず CSS グリッドレイアウトを使用してレイアウトされています。 これは、グリッドトラックに対してコンテンツのサイズ変更の使用が可能になるためです。 単一列グリッドを設定するときは、次のようにします。

+このカードは、 1 次元レイアウトであるにもかかわらず [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)を使用してレイアウトされています。 これは、グリッドトラックに対してコンテンツのサイズ変更の使用が可能になるためです。 単一列グリッドを設定するときは、次のようにします。 -
.card {
+```css
+.card {
   display: grid;
   grid-template-rows: max-content 200px 1fr;
-}
+} +``` -

見出しトラックは {{cssxref("max-content")}} に設定されているため、伸縮は行われません。 画像は 200 ピクセルの高さのトラック内に収めることにしました。 それから、その次のトラック（コンテンツが存在する場所）を 1fr に設定します。 これは、残りのスペースを占有することを意味します。

+見出しトラックは {{cssxref("max-content")}} に設定されているため、伸縮は行われません。 画像は 200 ピクセルの高さのトラック内に収めることにしました。 それから、その次のトラック（コンテンツが存在する場所）を `1fr` に設定します。 これは、残りの空間を占有することを意味します。 -

暗黙的にグリッドに作成された行はデフォルトで自動サイズ変更されるため、トラックにフッターがある場合は自動サイズ変更されます。 したがって、これは追加されたコンテンツにフィットします。

+暗黙的にグリッドに作成された行は、既定で自動的にサイズ変更されるため、トラックにフッターがある場合は自動的にサイズ変更されます。 したがって、これは追加されたコンテンツに合わせられます。 -
-

注: 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 グリッドレベル 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。

-
+> **Note:** 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 Grid Level 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。 -

便利な代替方法

+## 有用な代替策またはその他の方法 -

フレックスボックスを使ってカードをレイアウトすることもでき、その場合は、コンテンツ領域を大きくし、他の項目は大きくしないようにする必要があります。 これはカードをレイアウトするための合理的な方法ですが、私は、項目に規則を追加する必要があるのではなく、コンテナからトラックを制御できることをやや好みます。

+[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)を使ってカードをレイアウトすることもできます。その場合は、コンテンツ領域を大きくし、他のアイテムは大きくしないようにする必要があります。これは合理的なカードのレイアウト方法ですが、私は、アイテムにルールを追加するよりも、コンテナーからトラックを制御できる方がやや好きです。 -

全体的なレイアウトのためにフレックスボックスを使うことができますが、これは最終的なフレックス行の上で伸縮するカードをもたらすでしょう。 あるいは、CSS 段組みを使用することもできます — これにより、カードが段の上にレイアウトされることになりますが、これは問題になる場合もあれば、そうでない場合もあります。

+全体的なレイアウトのためにフレックスボックスを使うことができますが、この場合は最終的なフレックス業の上でカードが伸縮するでしょう。あるいは、[CSS 段組み](/ja/docs/Web/CSS/CSS_Columns)を使用することもできます。これにより、カードが段の上にレイアウトされることになりますが、これは問題になる場合もあれば、そうでない場合もあります。 -

これらの各レイアウト方法のデモについては、欄のレシピを参照してください。

+これらの各レイアウト方法のデモについては、[欄のレシピ](/ja/docs/Web/CSS/Layout_cookbook/Column_layouts)を参照してください。 -

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

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

カードの内容によっては、アクセシビリティを高めるためにできること、あるいはすべきことがあるかもしれません。 これらの問題のとても詳細な説明については、Heydon Pickering による包括的なコンポーネント: カード（英語）を参照してください。

+カードの内容によっては、アクセシビリティを高めるためにできること、あるいはすべきことがあるかもしれません。 これらの問題のとても詳細な説明については、 Heydon Pickering による[包括的な部品: カード](https://inclusive-components.design/cards/)（英語）を参照してください。 -

ブラウザー実装状況

+## ブラウザーの互換性 -

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

+レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。 -

grid-template-columns

+#### grid-template-columns -

{{Compat("css.properties.grid-template-columns")}}

+{{Compat("css.properties.grid-template-columns")}} -

grid-template-rows

+#### grid-template-rows -

{{Compat("css.properties.grid-template-rows")}}

+{{Compat("css.properties.grid-template-rows")}} -

 

+## 関連情報 -

関連情報

- - +- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} +- [包括的な部品: カード](https://inclusive-components.design/cards/)（英語） -- cgit v1.2.3-54-g00ecf