# カード

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

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

### カードの例

<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 x 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.