カード

画像の有無にかかわらず、一連のカードで情報をより動的に表示します

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

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

カードの例

GitBook ホームページ

当社のウェブサイトにアクセスして、GitBook について詳しくご覧ください。

開発者向けドキュメント

独自の GitBook 連携を構築しましょう！

GitBook にサインアップ

無料で始めるには、ここをクリックしてください。

リンクの追加

カードにカーソルを合わせ、その オプションメニュー を開きます。ここでターゲットリンクを追加すると、ユーザーはカードをクリックしたときに直接その場所へ移動できます。

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

画像の追加

カードにカーソルを合わせ、その オプションメニュー 。ここでカードにカバー画像を追加できます。あるいは、カード自体の カバー画像を追加 オプションをクリックするだけでも構いません。

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

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

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

そのためには、カードの オプションメニュー を選択し、 カバー > カバーを編集 > ダークモード用のカバーを追加を開きます。すると ファイルを選択 モーダルが開くので、新しい画像をドラッグ＆ドロップするか、以前アップロードした画像を選択できます。

適切な画像サイズを選ぶ

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

デスクトップでは、画像の寸法に関係なく、すべてのカード画像が横長の 16:9 比率で表示されます。統一感のため、同じ寸法を使うことをおすすめします。

モバイルでは、正方形または縦長の画像は左に示すように表示されます。横長の画像は右に示すように表示されます。

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

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

カードのサイズを変更する

カードサイズは、 オプションメニュー カードブロックの左側にあるを開くことで選択できます。 中 オプションでは 1 行に 3 枚のカードが作成され、 大 オプションでは各行に大きめのカードが 2 枚表示されます。

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>