# 画像

ページに画像を挿入し、サイズや左揃え・中央揃え・右揃えを選択できます。また、画像ブロックに代替テキストやキャプションを任意で含めることもできます。

{% 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-open-v2-preview.gitbook.workers.dev/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 %}

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

画像ブロックに複数の画像を追加するとギャラリーが作成されます。これを行うには、ブロックの **オプションメニュー** <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> を開き、 **Delete ⌫** キーを押します。

### ライトモードとダークモード用の画像を追加する <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-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/cards).
{% endhint %}

### カード <a href="#light-and-dark-mode-through-github-gitlab-sync" id="light-and-dark-mode-through-github-gitlab-sync"></a>

上の画像カバーなど、一部のケースでライト/ダークモード用画像をサポートしていません。`GitHub/GitLab同期を通したライト/ダークモード画像` および `Markdown内でHTML構文（`).

\<picture> `<source>` ）を使ってライト/ダークモード画像を追加することもできます。 `GitHub/GitLab同期を通したライト/ダークモード画像` および `Markdown内でHTML構文（` ブロック画像の場合は、

```html
<figure>

<source>
  GitHub/GitLab同期を通したライト/ダークモード画像
    要素を使用し、その中に
      を入れてください:
        前のテキスト
      "
      <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> `GitHub/GitLab同期を通したライト/ダークモード画像` ）を使ってライト/ダークモード画像を追加することもできます。 `Markdown内でHTML構文（` ブロック画像の場合は、

```html
</figure>
後のテキスト
  インライン画像（テキストと同じ行に表示される画像）の場合は、
    を入れてください:
      前のテキスト
    "
    画像の前のテキスト
  srcset="
    https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png
    <picture
><source
media="(prefers-color-scheme: dark)" />
```

{% hint style="warning" %}
**注意：** alt="The GitHub Logo" [/>\</picture>](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) と画像の後のテキストを使用してください `まだサポートしていないのは、` または `GitHub専用構文`.
{% 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>#gh-dark-mode-only **#gh-light-mode-only** リサイズ

<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% **735** **– 画像サイズの75%** フィット

– すべてのサイズ指定を解除し、フルサイズで表示するか、より大きな画像の場合は最大幅を

{% hint style="info" %}
**注意：** ピクセル
{% endhint %}

{% hint style="info" %}
に制限して表示します。 [ウィンドウの全幅に広げる](https://gitbook-open-v2-preview.gitbook.workers.dev/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 %}

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

画像ギャラリー内で画像をリサイズすると、単独の画像をリサイズした場合とは異なる結果になることがあります。

画像ブロックを `にすることができます`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" %}
**フレーム付き画像はキャプションを持つことができ、キャプションの背景に控えめなグリッドを表示します。** 画像にフレームを追加するには、画像にカーソルを合わせ、ブロックの
{% endhint %}

### Markdownでの表現

```markdown
を開いて
を有効にします。

フレームあり
トグル。

補足:

ブロック内でフレームを付けられるのは単一の画像のみです。複数の画像を含む画像ブロックやインライン画像にはフレームを付けることはできません。

//Simple Block

![](https://gitbook.com/images/gitbook.png)

//Block with Caption

![The GitBook Logo](https://gitbook.com/images/gitbook.png)

//Block with Alt text

<source>
  GitHub/GitLab同期を通したライト/ダークモード画像
    <figure><img src="https://gitbook.com/images/gitbook.png" alt="The GitBook Logo"></figure>
    //Block with Caption and Alt text
  <img
  src="https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png"
alt="GitHub logo"
```
