# カード

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

調整できます [中サイズまたは大サイズのカードに切り替える](#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="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FHAbAKXyi5SHXH1rDhg4E%2FGitBook%20homepage.png?alt=media&#x26;token=b2ced317-e488-408b-94a2-03bf72cce821">25_12_10_cards_3.png</a></td><td><a href="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FYYaAqhyC3yLcBknZdlmW%2FGitBook%20homepage.png?alt=media&#x26;token=8478251c-456e-4f30-8b32-39cbcc5640ef">25_12_10_cards_2.png</a></td><td></td><td><a href="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FYYaAqhyC3yLcBknZdlmW%2FGitBook%20homepage.png?alt=media&#x26;token=8478251c-456e-4f30-8b32-39cbcc5640ef">25_12_10_cards_2.png</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="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F1wL4yuiP0Pi9Oeu0wnmm%2FDeveloper%20docs.png?alt=media&#x26;token=95e0440c-530d-4ce8-8910-607902fc563c">25_12_10_cards_1.png</a></td><td></td><td><a href="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FLpBdK9z1nnfqwZiJxOuD%2FDeveloper%20docs.png?alt=media&#x26;token=32bed668-de47-427b-9371-0cb4ae6976f0">25_12_10_cards.png</a></td><td><a href="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FLpBdK9z1nnfqwZiJxOuD%2FDeveloper%20docs.png?alt=media&#x26;token=32bed668-de47-427b-9371-0cb4ae6976f0">25_12_10_cards.png</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="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2Fg2kgdfMsxOpWQx1Meq8s%2FSign%20up.png?alt=media&#x26;token=e7ef635a-1864-4944-b5a9-2ba7893f6cc0">25_12_10_cards_5.png</a></td><td></td><td></td><td><a href="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2Fp4zjlQyIPTIdwuCeremo%2FSign%20up.png?alt=media&#x26;token=2b8904a8-917f-4eb1-b5fe-5a5575757376">25_12_10_cards_4.png</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="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture>を開きます。ここでターゲットリンクを追加でき、ユーザーはカードをクリックするだけで直接目的の場所へ移動できます。

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

### 画像の追加

カードにカーソルを合わせて、その **オプションメニュー** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture>。ここでカードにカバー画像を追加できます。あるいは、カード自体の **カバー画像を追加** オプションをクリックするだけでも構いません。

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

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

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

これを行うには、カードの **オプションメニュー** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt=""></picture> を開いて **カバー** > **カバーを編集** > **ダークモード用のカバーを追加**を選択します。これにより **ファイルを選択** モーダルが開き、新しい画像をドラッグ＆ドロップするか、以前にアップロードした画像を選択できます。

#### 適切な画像サイズを選ぶ

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

<figure><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FnX5tZdJgW1Yhf61ZXpGJ%2F26_01_06_cards_desktop%402x.png?alt=media&#x26;token=a49b6556-194d-47ce-a13b-773561703f5b" alt="A GitBook screenshot showing card images on desktop"><figcaption><p>デスクトップでは、カード画像はサイズに関係なくすべて横長の 16:9 比率で表示されます。一貫性のため、同じサイズを使用することをおすすめします。</p></figcaption></figure>

<figure><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FxUUSyA6H7QwA8p9Nihz1%2F26_01_06_cards_mobile%402x.png?alt=media&#x26;token=df76e62d-dfb4-4197-a140-48d268c52240" alt="A GitBook screenshot showing card images on mobile"><figcaption><p>モバイルでは、正方形または縦長の画像は左側のように表示されます。横長の画像は右側のように表示されます。</p></figcaption></figure>

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

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

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

カードブロックの左側にある **オプションメニュー** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> を開くことで、カードのサイズを選択できます。 **中** のオプションでは横一列に 3 枚のカードが作成され、 **大** のオプションでは各行に 2 枚の大きめのカードが表示されます。

{% hint style="info" %}
カードブロックを [ウィンドウ幅いっぱいに広げる](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/..#full-width-blocks) には、ブロックの横にある **オプションメニュー** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FaS1QvPIBVYwhpFTGcPBN%2Foptions-menu.svg?alt=media&#x26;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook" data-size="line"></picture> をクリックして **全幅**.
{% endhint %}

### 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>
```