> 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/insert-images.md).

# 画像

ページに画像や画像ギャラリーを追加し、ダークモード用の画像バリエーションを追加したり、必要に応じて画像のサイズ変更や配置ができます

ページに画像を挿入し、サイズを選び、左・中央・右のいずれかに配置できます。必要に応じて、画像ブロックに代替テキストやキャプションも追加できます。

{% hint style="info" %}
**ヒント：** アクセシビリティの観点から、画像には代替テキストを設定することをおすすめします。
{% endhint %}

### 画像ブロックの例 <a href="#example-of-an-image-block" id="example-of-an-image-block"></a>

<div align="center"><figure><img src="https://images.unsplash.com/photo-1446776709462-d6b525c57bd3?crop=entropy&#x26;cs=srgb&#x26;fm=jpg&#x26;ixid=M3wxOTcwMjR8MHwxfHNlYXJjaHwyfHxzcGFjZXxlbnwwfHx8fDE3MzMxOTY5NTR8MA&#x26;ixlib=rb-4.0.3&#x26;q=85" alt="A photograph taken from space looking back towards Earth. A satellite is in the foreground, and in the background is an ocean-covered part of our planet with patchy clouds."><figcaption><p>キャプション付きの画像ブロックの例</p></figcaption></figure></div>

### 画像をアップロードする

コンテンツに画像を追加する方法は 2 通りあります：

1. ファイル管理システムから画像をページ上の空のブロックに直接ドラッグ＆ドロップします。
2. [画像ブロックを追加し](/docs/documentation/ja-gitbook-documentation/kontentsuwosuru/blocks.md#inserting-a-new-content-block) をページに追加し、 **画像を選択** ウィンドウ右側に表示されるサイドパネルを使用します。

2つ目の手順に従うと、ファイルのアップロード、以前にアップロードしたファイルの選択、画像 URL の貼り付け、または [Unsplash](https://unsplash.com/) の内蔵検索を使用して画像を追加できます。

{% hint style="warning" %}
GitBook では、1 ファイルあたり最大 100MB の画像をアップロードできます。
{% endhint %}

セクション内のアセット総数に上限はありませんが、GitBook は濫用があった場合にアカウントをブロックする権利を留保します。アップロード上限を超えるファイルは、Google Drive や Dropbox などのサービスに保存し、ページからリンクしてください。

アニメーション GIF は 1 ファイルあたり 200 フレームまでです。GIF を含む大きなファイルはページの読み込み時間を遅くするため、可能な限り大きなファイルを直接アップロードするのは避けてください。

#### 画像ギャラリーを作成する

画像ブロックに複数の画像を追加するとギャラリーが作成されます。これを行うには、ブロックの **オプションメニュー** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" 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&amp;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> を選択し、 **画像を追加…** を開くには **画像を選択** サイドパネルを再度開きます。

ギャラリーから画像を削除するには、 **編集メニュー** <picture><source srcset="/files/kN09oTFtAuyaxNIwWuCt" media="(prefers-color-scheme: dark)"><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&amp;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture> を開き、 **Delete ⌫** キーを押します。

### ライトモードとダークモード向けの画像を追加する <a href="#light-and-dark-mode" id="light-and-dark-mode"></a>

公開サイトのライトモード版とダークモード版に、それぞれ異なる画像を設定できます。GitBook は、訪問者がどちらのモードを使用しているかに応じて、正しい画像を自動的に表示します。

ダークモード用の画像を追加するには、画像にカーソルを合わせ、 **編集メニュー** <picture><source srcset="/files/kN09oTFtAuyaxNIwWuCt" media="(prefers-color-scheme: dark)"><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&amp;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture> に戻って **画像を置換** <picture><source srcset="/files/B8EhRVkFXw7nB8Q01UEZ" media="(prefers-color-scheme: dark)"><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F0mPo1tPDFeEbPOr1gc4V%2Freplace%20image.svg?alt=media&amp;token=9f037f9a-0f37-4c5b-9b30-6b55ffb11f5b" alt="The Replace image icon in GitBook"></picture>.

ドロップダウンメニューで、 **ダークモード用の画像を追加**. これを設定すると、この同じメニューからどちらの画像も置き換えられます。

{% hint style="warning" %}
**注：** GitBook では現在、ページのカバーや画像カバーなど、特定の場合のライト/ダークモード画像をサポートしていません： [カード](/docs/documentation/ja-gitbook-documentation/kontentsuwosuru/blocks/cards.md).
{% endhint %}

### GitHub/GitLab Sync を通じたライト/ダークモード画像 <a href="#light-and-dark-mode-through-github-gitlab-sync" id="light-and-dark-mode-through-github-gitlab-sync"></a>

Markdown では HTML 構文（`<picture>` 、 `<source>`).

ブロック画像の場合は、 `<figure>` HTML 要素を使い、 `<picture>` 、 `<source>` その中に

```html
Text before

<figure>
  <picture>
    <source
      srcset="
        https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
      "
      media="(prefers-color-scheme: dark)"
    />
    <img
      src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
      alt="GitHub のロゴ"
    />
  </picture>
  <figcaption>キャプションテキスト</figcaption>
</figure>

Text after
```

インライン画像（テキストと同じ行に配置される画像）の場合は、 `<picture>` HTML 要素を使い、 `<source>` その中に

```html
画像の前のテキスト
<picture
  ><source
    srcset="
      https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
    "
    media="(prefers-color-scheme: dark)" />
  <img
    src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
    alt="GitHub のロゴ"
/></picture>
画像の後のテキスト
```

{% hint style="warning" %}
**注：** まだサポートしていません [GitHub 専用の構文](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) を通じて `#gh-dark-mode-only` または `#gh-light-mode-only`.
{% endhint %}

### サイズ変更

画像のサイズを変更するには、画像にカーソルを合わせて **編集メニュー** <picture><source srcset="/files/kN09oTFtAuyaxNIwWuCt" media="(prefers-color-scheme: dark)"><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&amp;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture>を開き、 **サイズ** ボタンをクリックして、利用可能なオプションから画像サイズを変更します。

<figure><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F1cWY3c3CgGXIK4Bgnhb6%2Fimage_resizing%402x.png?alt=media&amp;token=112c7e1d-6a04-4a59-a69d-6292a74297ff" alt="A GitBook screenshot showing how to resize an image"><figcaption><p>画像のサイズを変更する</p></figcaption></figure>

* **小** – 画像サイズの 25%
* **中** – 画像サイズの 50%
* **大** – 画像サイズの 75%
* **フィット** – すべてのサイズ指定を削除し、フルサイズで表示するか、最大幅を **735** **ピクセル** に制限して表示します（大きな画像の場合）。

画像がエディタよりも幅広い場合、GitBook は画像の幅をエディタの幅に制限し、サイズ変更はこの制限に基づいて行われます。

{% hint style="info" %}
**注：** 画像ギャラリー内で画像のサイズを変更すると、個別の画像を変更した場合とは結果が異なることがあります。
{% endhint %}

### Git Sync を通じた画像のサイズ変更

画像サイズをより細かく制御したい場合は、GitHub または GitLab の Markdown で正確なサイズを指定できます。

画像をエクスポートする際は、HTML タグ `<img/>`を使用します。仕様に従い、 `width` 、 `height` 属性を使って画像の寸法を指定できます。これらの属性は、ピクセル単位の値、または数値と `%` 記号の組み合わせのみ受け付けます。\n\n画像サイズを指定する有効なバリエーションは次のとおりです：\
\
`<img width="100" />` 画像幅を 100 ピクセルに設定します\
`<img width="100%" />` 画像をフルサイズに設定します（ただし、エディタによる制限があります）

### 画像の配置

デフォルトでは、画像ブロックは画像を中央揃えでフルサイズ表示します。

画像の配置を変更するには、ブロックの **オプションメニュー** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" 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&amp;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt="The Options menu icon in GitBook"></picture> を開き、希望する配置を選択します。これは、エディタより幅が狭い画像、またはすでに [サイズ変更した](#resizing).

### 画像に枠を付ける

画像ブロックに枠を追加して、画像の見た目を統一し、周囲のコンテンツと視覚的に分けることができます。

<div data-with-frame="true"><figure><img src="https://4217681718-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FfL0VWcltHyuCKeqJsW0Q%2Fimage-frame-demo%402x.jpg?alt=media&amp;token=6cac6c68-c288-4c42-abb2-e2bb7de23652" alt="A black and white photograph of a lone figure walking across a stark white landscape"><figcaption><p>枠付き画像にはキャプションを付けることができ、キャプションの背後に控えめなグリッドが表示されます。</p></figcaption></figure></div>

画像に枠を追加するには、画像にカーソルを合わせ、ブロックの **オプションメニュー** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" 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&amp;token=3ee40bbf-f4fb-41fa-aa30-306b559cbe88" alt=""></picture> を開き、 **枠付き** トグルを有効にします。

{% hint style="info" %}
**知っておくとよいこと：** ブロック内で枠を付けられるのは単一画像のみです。複数画像を含む画像ブロックやインライン画像には枠を付けられません。
{% endhint %}

### Markdownでの表記

```markdown
//シンプルなブロック
![](https://gitbook.com/images/gitbook.png)

//キャプション付きブロック
![GitBook のロゴ](https://gitbook.com/images/gitbook.png)

//代替テキスト付きブロック

<figure><img src="https://gitbook.com/images/gitbook.png" alt="GitBook のロゴ"></figure>

//キャプションと代替テキスト付きブロック

<figure><img src="https://gitbook.com/images/gitbook.png" alt="GitBook のロゴ"><figcaption><p>GitBook ロゴ</p></figcaption></figure>

// 枠付き画像のブロック

<div data-with-frame="true"><img src="https://gitbook.com/images/gitbook.png" alt="GitBook のロゴ"></div>

//ダークモードとライトモードで異なる画像を使うブロック、キャプション付き

<figure>
  <picture>
    <source srcset="https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png" media="(prefers-color-scheme: dark)">
    <img src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png" alt="GitHub のロゴ">
  </picture>
  <figcaption>キャプションテキスト</figcaption>
</figure>
```

### 画像が読み込まれないのはなぜですか？

「画像を読み込めません」というエラーは、画像が元の場所で変更または削除されたことを意味します。URL で画像を埋め込んだ場合、GitBook はその URL に依存します。画像が元の場所で移動または消失すると、ページ上に表示されなくなります。

対処するには、画像を GitBook に直接アップロードするか、画像の場所が変わった場合は URL を更新してください。また、あるセクションから別のセクションへ画像をコピーした場合にもこのエラーが表示されることがあります。各セクションには独自のファイルディレクトリがあるためです。新しいセクションに画像を再アップロードしてください。

セクションにアップロードされたすべてのファイルは、 **ライブラリ** タブで **ページ** 目次の上部にある


---

# 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/insert-images.md?ask=<question>&goal=<user_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.
