# カード

カードを使うと、テキストと画像をグリッド状に組み合わせて視覚的に魅力的なページレイアウトを作成できます。ランディングページの作成や、非線形な方法でコンテンツを表示するのに最適です。

調整できます [中サイズまたは大サイズのカードを切り替える](#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 x 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>
```
