---
title: カード
slug: Web/CSS/Layout_cookbook/Card
tags:
  - CSS
  - CSS Grid
  - card
  - cookbook
  - css layout
translation_of: Web/CSS/Layout_cookbook/Card
---
<p>{{CSSRef}}</p>

<p class="summary"><span class="seoSummary">このパターンは、オプションのフッター付きの「カード」コンポーネントのリストです。</span></p>

<p><img alt="1行に3つのカードコンポーネント" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p>

<h2 id="Requirements" name="Requirements">要件</h2>

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

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

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

<h2 id="Recipe" name="Recipe">レシピ</h2>

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

<div class="note">
<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html">この例をダウンロードする</a></p>
</div>

<h2 id="Choices_made" name="Choices_made">行った選択</h2>

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

<pre class="brush: css">.card {
  display: grid;
  grid-template-rows: max-content 200px 1fr;
}</pre>

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

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

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

<h2 id="Useful_fallbacks_or_alternative_methods" name="Useful_fallbacks_or_alternative_methods">便利な代替方法</h2>

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

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

<p>これらの各レイアウト方法のデモについては、<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">欄のレシピ</a>を参照してください。</p>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>

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

<h4 id="grid-template-columns" name="grid-template-columns">grid-template-columns</h4>

<p>{{Compat("css.properties.grid-template-columns")}}</p>

<h4 id="grid-template-rows" name="grid-template-rows">grid-template-rows</h4>

<p>{{Compat("css.properties.grid-template-rows")}}</p>

<p> </p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{Cssxref("grid-template-columns")}}、{{Cssxref("grid-template-rows")}}、{{Cssxref("grid-gap")}}</li>
 <li><a href="https://inclusive-components.design/cards/">包括的なコンポーネント: カード</a>（英語）</li>
</ul>