# 画像 ページに画像を挿入して、そのサイズや左・中央・右のどこに配置するかを選べます。また、画像ブロックに代替テキストやキャプションを任意で追加することもできます。 {% hint style="info" %} **ヒント:** アクセシビリティの観点から、画像には代替テキストを設定することをおすすめします。 {% endhint %} ### 画像ブロックの例
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.

キャプション付き画像ブロックの例

### 画像をアップロードする コンテンツに画像を追加する方法は 2 つあります。 1. ファイル管理システムから画像をドラッグ＆ドロップして、ページ上の空のブロックに直接入れます。 2. [画像ブロックを追加する](/docs/documentation/ja-gitbook-documentation/creating-content/blocks.md#inserting-a-new-content-block) をページに追加し、 **画像を選択** 右側に表示されるサイドパネルを使います。 2 つ目の方法では、ファイルをアップロードする、以前にアップロードしたファイルを選択する、画像 URL を貼り付ける、または [Unsplash](https://unsplash.com/) から組み込み検索を使って画像を追加することができます。 {% hint style="warning" %} GitBook では、1 ファイルあたり最大 100MB の画像をアップロードできます。 {% endhint %} #### 画像ギャラリーを作成する 画像ブロックに 1 枚以上の画像を追加すると、ギャラリーが作成されます。これを行うには、ブロックの **オプションメニュー** The Options menu icon in GitBook を選択し、 **画像を追加…** を開いて、再び **画像を選択** サイドパネルを開きます。 ギャラリーから画像を削除するには、削除したい画像の **編集メニュー** を開き、 **Delete ⌫** キーを押します。 ### ライトモードとダークモード用の画像を追加する 公開サイトのライトモード版とダークモード版で、異なる画像を設定できます。GitBook は、訪問者がどちらのモードを使用しているかに応じて、適切な画像を自動的に表示します。 ダークモード用の画像を追加するには、画像にカーソルを合わせて **編集メニュー** をクリックし、 **画像を置換** The Replace image icon in GitBook. ドロップダウンメニューで **ダークモード用の画像を追加**を選択します。設定後は、同じメニューからどちらの画像も置換できます。 {% hint style="warning" %} **注：** GitBook では現在、ページカバーや次の上の画像カバーなど、一部のケースではライトモードとダークモードの画像をサポートしていません。 [カード](/docs/documentation/ja-gitbook-documentation/creating-content/blocks/cards.md). {% endhint %} ### GitHub/GitLab Sync を使ったライトモードとダークモードの画像 Markdown でも HTML 構文（`` 、 ``). ）を使って、ライトモードとダークモードの画像を追加できます。ブロック画像の場合は、 `
` HTML 要素の中に `` 、 `` を入れて使います。 ```html 前のテキスト
GitHub logo
キャプションのテキスト
後のテキスト ``` インライン画像（テキストと同じ行に表示される画像）の場合は、 `` HTML 要素の中に `` を入れて使います。 ```html 画像の前のテキスト GitHub のロゴ と画像の後のテキストを使います。 ``` {% 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 %} ### リサイズ 画像のサイズを変更するには、画像にカーソルを合わせて **編集メニュー** を開きます。 **サイズ** ボタンをクリックして、利用可能なオプションから画像サイズを変更します。
A GitBook screenshot showing how to resize an image

画像のサイズを変更する

* **小** – 画像サイズの 25% * **中** – 画像サイズの 50% * **大** – 画像サイズの 75% * **フィット** – すべてのサイズ指定を削除し、フルサイズで表示するか、より大きな画像では最大幅 **735** **ピクセル** に制限して表示します。 画像の幅がエディタより広い場合、GitBook は代わりにエディタの幅に画像の幅を制限し、サイズ変更はこの制限に基づいて行われます。 {% hint style="info" %} **注：** 画像ギャラリー内の画像をサイズ変更すると、個別の画像をサイズ変更した場合とは結果が異なることがあります。 {% endhint %} ### Git Sync を使った画像のサイズ変更 画像サイズをより細かく制御したい場合は、GitHub または GitLab で Markdown を使って正確なサイズを指定できます。 画像を書き出す際には、HTML タグ ``を使用します。仕様に従い、画像の寸法は `width` 、 `height` 属性で指定できます。これらはピクセル単位の値、または数値と `%` 記号の組み合わせのみを受け付けます。\ \ 画像の寸法を指定する有効な形式は次のとおりです。\ \ `` 画像の幅を 100 ピクセルに設定します\ `` 画像をフルサイズに設定します（ただし、これはエディタによって制限されます） ### 画像の配置 デフォルトでは、画像ブロックは画像をフルサイズで中央揃えに表示します。 画像の配置を変更するには、ブロックの **オプションメニュー** The Options menu icon in GitBook を開いて、希望する配置を選択します。これは、エディタより狭い画像、または [サイズ変更した](#resizing). ### 画像の枠線 画像ブロックに枠線を追加して、画像の見た目を統一し、周囲のコンテンツと視覚的に分けることができます。
A black and white photograph of a lone figure walking across a stark white landscape

枠線付きの画像にはキャプションを付けることができ、キャプションの背後にうっすらとしたグリッドが表示されます。

画像に枠線を追加するには、画像にカーソルを合わせてブロックの **オプションメニュー** を開き、 **枠線あり** トグルを有効にします。 {% hint style="info" %} **補足:** ブロック内で枠線を付けられるのは 1 枚の画像だけです。複数の画像を含む画像ブロックやインライン画像には枠線を付けられません。 {% 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
The GitBook Logo
//Block with Caption and Alt text
The GitBook Logo

GitBook Logo

// Frame付き画像を含むブロック
The GitBook Logo
// ダークモードとライトモードで別の画像を使う、キャプション付きブロック
GitHub logo
キャプションのテキスト
``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://gitbook.com/docs/documentation/ja-gitbook-documentation/creating-content/blocks/insert-images.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.