カード
画像の有無にかかわらず、一連のカードで情報をより動的に表示します
カードを使うと、テキストと画像をグリッド状に組み合わせた、見た目に美しいページレイアウトを作成できます。ランディングページの作成や、その他のコンテンツを非線形に表示するのに最適です。
調整できます 中サイズまたは大サイズのカードに切り替える そして、それらを関連するリソースにリンクできます。
カードの例
リンクの追加
カードにカーソルを合わせて、その オプションメニュー 
を開きます。ここでターゲットリンクを追加でき、ユーザーはカードをクリックするだけで直接目的の場所へ移動できます。
カードを作成する際は、 ハイパーリンクではなくターゲットリンクを使用することをおすすめします。ターゲットリンクを使うと、読者はカードのどこをクリックしてもリンク先の URL にアクセスできます。
画像の追加
カードにカーソルを合わせて、その オプションメニュー 。ここでカードにカバー画像を追加できます。あるいは、カード自体の カバー画像を追加 オプションをクリックするだけでも構いません。
これにより ファイルを選択 モーダルが開きます。ここに新しい画像をドラッグ＆ドロップするか、以前にスペースへアップロードした画像ファイルを使用できます。
ダークモード用の画像を追加する
ダークモードのときだけ表示されるカバー画像も追加できます。
これを行うには、カードの オプションメニュー を開いて カバー > カバーを編集 > ダークモード用のカバーを追加を選択します。これにより ファイルを選択 モーダルが開き、新しい画像をドラッグ＆ドロップするか、以前にアップロードした画像を選択できます。
適切な画像サイズを選ぶ
GitBook は、横長画像をデスクトップとモバイルの両方で自動的に 16:9 比率に切り抜きます。アップロードした画像が縦長、または 1:1 比率の場合、デスクトップでは 16:9 に切り抜かれ、モバイルでは正方形または縦長として表示されます。
デスクトップとモバイル全体で見た目を統一するため、カード用の画像はすべて 16:9 形式（例: 1920px × 1080px）でアップロードすることをおすすめします。
カードのレイアウトを画面サイズに応じて変えたい場合は、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>最終更新
役に立ちましたか？