> 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/kontentsuwosuru/blocks/cards.md). # カード画像の有無にかかわらず、一連のカードでより動的に情報を表示しますカードを使うと、テキストと画像をグリッド状に組み合わせて、見た目の美しいページレイアウトを作成できます。ランディングページの構築や、その他のコンテンツを非線形に表示するのに最適です。調整できます [中サイズまたは大サイズのカードを切り替えます](#changing-the-size-of-cards) そして、それらを関連するリソースにリンクできます。 ### カードの例

			カバー画像	カバー画像（ダーク）	カバー画像（ダーク）	カバー画像（ダーク）
GitBookホームページ	当社のウェブサイトをご覧いただき、GitBookの詳細をご確認ください。	https://www.gitbook.com/	25_12_10_cards_3.png	25_12_10_cards_2.png		25_12_10_cards_2.png
開発者向けドキュメント	独自のGitBook連携を構築しましょう。	https://developer.gitbook.com/	25_12_10_cards_1.png		25_12_10_cards.png	25_12_10_cards.png
GitBookに登録	無料で始めるにはここをクリックしてください。	https://app.gitbook.com/join	25_12_10_cards_5.png			25_12_10_cards_4.png

### リンクの追加カードにカーソルを合わせて、その **オプションメニュー**

。ここでターゲットリンクを追加できるので、読者はカードをクリックすると直接その場所へ移動できます。 {% hint style="success" %} カードを作成する際は、 **ハイパーリンクではなくターゲットリンクを使用することをおすすめします**。ターゲットリンクを使うと、読者はカードのどこをクリックしてもリンク先URLにアクセスできます。 {% endhint %} ### 画像の追加カードにカーソルを合わせて、その **オプションメニュー**

。ここでカードにカバー画像を追加できます。あるいは、カード自体の **カバー画像を追加** オプションをクリックするだけです。これにより **ファイルを選択** モーダルが開きます。ここに新しい画像をドラッグ＆ドロップするか、セクションに以前アップロードした画像ファイルを使用できます。 #### ダークモード用の画像の追加ダークモードでのみ表示されるカバー画像も追加できます。そのためには、カードの **オプションメニュー**

を選択し、 **カバー** > **カバーを編集** > **ダークモード用カバーを追加**。これにより **ファイルを選択** モーダルが開き、新しい画像をドラッグ＆ドロップするか、以前にアップロードした画像を選択できます。 #### 適切な画像サイズの選択 GitBookは、横長画像をデスクトップとモバイルで自動的に16:9比率にトリミングします。アップロードした画像が縦長または1:1比率の場合、デスクトップでは16:9にトリミングされ、モバイルでは正方形または縦長として表示されます。

A GitBook screenshot showing card images on desktop — デスクトップでは、カード画像はサイズに関係なくすべて横長の16:9比率で表示されます。統一感のため、同じサイズを使用することをおすすめします。

A GitBook screenshot showing card images on mobile — モバイルでは、正方形または縦長の画像は左のように表示されます。横長の画像は右のように表示されます。

デスクトップとモバイルで一貫性を保つため、カード用の画像はすべて16:9形式（例: 1920px × 1080px）でアップロードすることをおすすめします。カードのレイアウトを画面サイズに応じて変化させたい場合は、1:1比率の画像をアップロードし、画像の内容を中央に配置することをおすすめします。 ### カードのサイズの変更カードサイズは、 **オプションメニュー**

カードブロックの左側にあるメニューを開いて選択できます。The **中** オプションでは1つの横一列に3つのカードを作成し、 **大** オプションでは各行に大きめのカードを2つ表示します。 ### Markdownでの表記 ```markdown


例のタイトル 1	例の説明 1。	https://example.com	example_image1.svg
例のタイトル 2	例の説明 2。	https://example.com	example_image2.svg
例のタイトル 3	例の説明 3。	https://example.com	example_image3.svg

``` --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://gitbook.com/docs/documentation/ja-gitbook-documentation/kontentsuwosuru/blocks/cards.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.