# 画像

画像をページに挿入し、そのサイズや左・中央・右のいずれに配置するかを選べます。画像ブロックに代替テキストやキャプションを任意で追加することもできます。

{% 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. [画像ブロックをページに追加し、](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/..#inserting-a-new-content-block) にある **画像を選択** サイドパネルを使用します。

2 つ目の方法を使う場合は、ファイルをアップロードする、以前にアップロードしたファイルを選択する、画像 URL を貼り付ける、または以下から画像を追加することができます: [Unsplash](https://unsplash.com/) 内蔵検索を使って。

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

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

画像ブロックに 2 枚以上の画像を追加すると、ギャラリーが作成されます。これを行うには、ブロックの **オプションメニュー** <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%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&#x26;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></picture> を開き、 **削除 ⌫** キーを押します。

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

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

ダークモード用の画像を追加するには、画像にカーソルを合わせて、 **編集メニュー** <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%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&#x26;token=6f70239f-d889-4e64-9ec6-4801df47a48d" alt=""></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%2F0mPo1tPDFeEbPOr1gc4V%2Freplace%20image.svg?alt=media&#x26;token=9f037f9a-0f37-4c5b-9b30-6b55ffb11f5b" alt="The Replace image icon in GitBook"></picture>.

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

{% hint style="warning" %}
**注:** GitBook は現在、ページのカバーや以下の画像カバーを含む一部のケースではライトモードとダークモードの画像をサポートしていません: [カード](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/cards).
{% 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
テキストの前

<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 logo"
    />
  </picture>
  <figcaption>キャプションのテキスト</figcaption>
</figure>

テキストの後
```

インライン画像（テキストと同じ行に配置される画像）には、 `<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="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%2FA3OfGjPkE5GnOQvN36jN%2Fedit.svg?alt=media&#x26;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&#x26;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 %}

{% hint style="info" %}
画像ブロックを [ウィンドウ幅いっぱいに広げる](https://gitbook-v2-q67etdj25-gitbook.vercel.app/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"></picture> をクリックして **全幅**.
{% endhint %}

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

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

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

### 画像の配置

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

画像の配置を変更するには、ブロックの **オプションメニュー** <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> を開いて希望する配置を選びます。これは、エディターよりも幅が狭い画像、または [サイズ変更した](#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&#x26;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="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> を開き、 **フレーム付き** トグルを有効にします。

{% hint style="info" %}
**知っておくとよいこと:** 1 つのブロックでフレームを付けられるのは単一の画像だけです。複数の画像を含む画像ブロックやインライン画像にはフレームを付けることはできません。
{% 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>
```