> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/cards.md).

# カード

カードを使うと、テキストと画像をグリッド状に組み合わせて、見た目の美しいページレイアウトを作成できます。ランディングページの作成や、その他のコンテンツを非線形に表示するのに最適です。

調整できます [中サイズまたは大サイズのカードに切り替える](#changing-the-size-of-cards) そして、それらを関連リソースにリンクします。

### カードの例

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="image">カバー画像</th><th data-hidden data-type="image">カバー画像（ダーク）</th><th data-hidden data-type="image">カバー画像（ダーク）</th><th data-hidden data-card-cover-dark data-type="image">カバー画像（ダーク）</th></tr></thead><tbody><tr><td><strong>GitBook ホームページ</strong></td><td>当社のウェブサイトにアクセスして、GitBook について詳しくご覧ください。</td><td><a href="https://www.gitbook.com/">https://www.gitbook.com/</a></td><td><a href="/files/9b4f8d57139a3cc7e5a6e097d3004aa840c82ae2">/files/9b4f8d57139a3cc7e5a6e097d3004aa840c82ae2</a></td><td><a href="/files/d9e9713861fac0c34dd56bc6de15a7a1cdff92e0">/files/d9e9713861fac0c34dd56bc6de15a7a1cdff92e0</a></td><td></td><td><a href="/files/d9e9713861fac0c34dd56bc6de15a7a1cdff92e0">/files/d9e9713861fac0c34dd56bc6de15a7a1cdff92e0</a></td></tr><tr><td><strong>開発者向けドキュメント</strong></td><td>独自の GitBook 連携を構築しましょう。</td><td><a href="https://developer.gitbook.com/">https://developer.gitbook.com/</a></td><td><a href="/files/b970e715c37bd800c5f58ade40efc606e3cbd271">/files/b970e715c37bd800c5f58ade40efc606e3cbd271</a></td><td></td><td><a href="/files/5781561afe7bf514d29ec1ebb027bcc114a15814">/files/5781561afe7bf514d29ec1ebb027bcc114a15814</a></td><td><a href="/files/5781561afe7bf514d29ec1ebb027bcc114a15814">/files/5781561afe7bf514d29ec1ebb027bcc114a15814</a></td></tr><tr><td><strong>GitBook にサインアップ</strong></td><td>無料で始めるにはここをクリックしてください。</td><td><a href="https://app.gitbook.com/join">https://app.gitbook.com/join</a></td><td><a href="/files/4b364ad52b3213a08fbe1c1c1c50d1aef4ee39d9">/files/4b364ad52b3213a08fbe1c1c1c50d1aef4ee39d9</a></td><td></td><td></td><td><a href="/files/ee80dfc241d6ba1fe3980c65ef7b6f25f98e63c6">/files/ee80dfc241d6ba1fe3980c65ef7b6f25f98e63c6</a></td></tr></tbody></table>

### リンクの追加 <a href="#adding-links-and-images-to-your-cards" id="adding-links-and-images-to-your-cards"></a>

カードにカーソルを合わせて、その **オプションメニュー** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="/files/ce0e0a07ded643c4e219bbfe214239e291d0c7a1" alt="The Options menu icon in GitBook"></picture>。ここでターゲットリンクを追加できるので、読者はカードをクリックすると直接その場所に移動できます。

{% hint style="success" %}
カードを作成する際には、 **ハイパーリンクではなくターゲットリンクを使用することをおすすめします**。ターゲットリンクを使うと、読者はカードのどこをクリックしてもリンクされた URL にアクセスできます。
{% endhint %}

### 画像の追加

カードにカーソルを合わせて、その **オプションメニュー** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="/files/ce0e0a07ded643c4e219bbfe214239e291d0c7a1" alt="The Options menu icon in GitBook"></picture>。ここでカードにカバー画像を追加できます。あるいは、カード上の **カバー画像を追加** オプションをクリックするだけでも構いません。

これにより **ファイルを選択** モーダルが開きます。ここに新しい画像をドラッグ＆ドロップするか、このセクションに以前アップロードした画像ファイルを使用できます。

#### ダークモード用の画像の追加

ダークモードでのみ表示されるカバー画像も追加できます。

これを行うには、カードの **オプションメニュー** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="/files/ce0e0a07ded643c4e219bbfe214239e291d0c7a1" alt=""></picture> を開き、 **カバー** > **カバーを編集** > **ダークモード用のカバーを追加**。これにより **ファイルを選択** モーダルが開き、新しい画像をドラッグ＆ドロップするか、以前アップロードした画像を選択できます。

#### 適切な画像サイズの選び方

GitBook では、横長画像をデスクトップとモバイルの両方で自動的に 16:9 に切り抜きます。アップロードした画像が縦長または 1:1 比率の場合、デスクトップでは 16:9 に切り抜かれ、モバイルでは正方形または縦長で表示されます。

<figure><img src="/files/5e853058af41c9b15cb19d84c0e49dad83cddb89" alt="A GitBook screenshot showing card images on desktop"><figcaption><p>デスクトップでは、サイズに関係なく、すべてのカード画像が横長の 16:9 比率で表示されます。統一感を保つため、同じサイズを使用することをおすすめします。</p></figcaption></figure>

<figure><img src="/files/fde66c3421a006a33d8d688db79f1e13d4c14977" alt="A GitBook screenshot showing card images on mobile"><figcaption><p>モバイルでは、左に示すように正方形または縦長の画像が表示されます。横長画像は右に示すように表示されます。</p></figcaption></figure>

デスクトップとモバイルで一貫性を保つため、カード用の画像はすべて 16:9 形式（例: 1920px × 1080px）でアップロードすることをおすすめします。

画面サイズに応じてカードのレイアウトを変えたい場合は、1:1 比率の画像をアップロードし、画像の内容を中央に配置することをおすすめします。

### カードのサイズの変更

カードブロックの左側にある **オプションメニュー** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="/files/ce0e0a07ded643c4e219bbfe214239e291d0c7a1" alt="The Options menu icon in GitBook"></picture> を開くと、カードのサイズを選択できます。 **中** のオプションでは 1 行に 3 枚のカードが作成され、 **大** のオプションでは各行により大きなカードが 2 枚表示されます。

### Markdown での表記

```markdown
<table data-view="cards">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th data-hidden data-card-target data-type="content-ref"></th>
      <th data-hidden data-card-cover data-type="files"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>例のタイトル 1</strong></td>
      <td>例の説明 1。</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image1.svg">example_image1.svg</a></td>
    </tr>
    <tr>
      <td><strong>例のタイトル 2</strong></td>
      <td>例の説明 2。</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image2.svg">example_image2.svg</a></td>
    </tr>
    <tr>
      <td><strong>例のタイトル 3</strong></td>
      <td>例の説明 3。</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image3.svg">example_image3.svg</a></td>
    </tr>
  </tbody>
</table>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/cards.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.