---
title: 画像
slug: MDN/Editor/Images
tags:
  - Guide
  - MDN Meta
translation_of: MDN/Editor/Images
---
<div>{{MDNSidebar}}</div>

<p><span class="seoSummary">記事に画像を混ぜるのはしばしば便利です。画像は例えば、スクリーンショットや、レンダリングがどのようになるかの例や、プログラムフローのSVG図です。この記事ではMDNのコンテンツに画像を使う方法を記します。</span></p>

<div class="note"><strong>Note: </strong>When uploading an image, please be sure to use an image optimization tool to make the file as small to download as possible. This improves page load time and helps MDN's performance overall. You may use your preferred tool, if you have one. Otherwise, we suggest <a href="https://tinypng.com/">TinyPNG</a>, a handy Web tool.</div>

<p id="Adding_images_to_an_article">いったん画像をページに添付したら ({{SectionOnPage("/en-US/docs/MDN/Contribute/Editor/Basics", "The attachments box")}} を見てください)、記事内で使用できます。MDN上のどこの画像にもリンクできます。画像を挿入するには、ツールバーの "イメージ" ボタンを使用し、それはこのようなものです: <img alt="" src="https://mdn.mozillademos.org/files/5349/image-icon.png" style="height: 19px; width: 22px;"></p>

<p>画像のプロパティダイアログが、次のように出てきます:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5331/image-properties-empty.png" style="height: 617px; width: 483px;"></p>

<p>3つのタブがあります。最初 (で最もよく使う) は画像情報タブです。残り2つはリンクと、高度な設定タブです。</p>

<h2 id="画像情報">画像情報</h2>

<p>ここにはたくさんのオプションがあります:</p>

<dl>
 <dt>添付ファイル</dt>
 <dd>このポップアップメニューはページの添付ファイル一覧を表示します。現在の編集セッションでアップロードしたものか、既にページの他の場所で使われているものだけが表示されます。</dd>
 <dt>URL</dt>
 <dd>添付ファイル一覧にない画像を使いたい場合 (例えば、MDNの他の場所で使われているものや、以前の編集セッションでアップロードされたもの)、この欄にURLを入力できます。</dd>
 <dt>代替テキスト</dt>
 <dd>画像が表示されない場合に表示される代替テキスト。このテキストは、スクリーンリーダーでも使われるので、アクセシビリティのためにも、適切な記述を入れてください。</dd>
 <dt>幅 / 高さ</dt>
 <dd>記事に表示される画像の幅と高さをここで調整できます。デフォルトでは、比率がロックされていますが、ロックアイコンをクリックして解除できます。</dd>
 <dt>枠線の幅</dt>
 <dd>オプションとして、画像の周りに黒い枠線を指定できます。ここには 0 (や未入力のまま) または 1 を入れて<strong>ください</strong>、そうすると画像の背景が透明で、記事の背景から目立たせる場合に、枠線を使うかどうかの選択になります。</dd>
 <dt>水平間隔 / 垂直間隔</dt>
 <dd>これは、画像を囲む空白の長さを、水平/垂直それぞれ指定するものです。通常は、下記の行揃えオプションを使う場合にのみ必要となるでしょう。</dd>
 <dt>行揃え</dt>
 <dd>デフォルトでは、画像は独自ブロックに単独で表示されます。しかし、テキストをラップ可能にすることで、ここでは画像をフロートとして左/右寄せできます。めったにこうしません。つまり画像がとても小さく(またはとても幅が狭く縦が長い)て、その横に整形するのに十分な長さのテキストがある、特別な場合のみ使われます。少し判断が要ります。このオプションを使った場合、たぶんテキストと画像が近づき過ぎないように、水平間隔と垂直間隔をセットしたくなるでしょう。通常はそれぞれを6か8とするとうまくいきます。</dd>
</dl>

<p>プレビューボックスは、今の設定で画像がどうなるかを例示します。</p>

<h2 id="リンク">リンク</h2>

<p>The Link options tab for images lets you set a URL to go to when the image is clicked on. This is most commonly used to simply link to a larger version of the image itself (by providing the same URL as in the Image Info tab). The Link panel looks like this:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5333/image-properties-link.png" style="height: 525px; width: 479px;"></p>

<p>Other than the URL field, in which you place the URL of the link's destination, you can set a target. However, <strong>please do not do so</strong>. We prefer all links to open in the same tab.</p>

<h2 id="サポートされる画像の種類">サポートされる画像の種類</h2>

<p>You may upload GIF, JPEG, and PNG images, as well as SVG diagrams. For screenshots, we prefer PNG, and we're trying to transition to using SVG for diagrams because they can be translated into other languages more easily than other image types.</p>

<p>Photoshop files may also be uploaded. <strong>However</strong>, they may not be used as images inline in content. They are only available for download.</p>

<h2 id="画像を削除変更する">画像を削除/変更する</h2>

<p>To remove an image from the article, you can simply select it and press your delete key, or place the cursor after it and press delete.</p>

<div class="note">
<p><strong>Note:</strong> You cannot delete attachments on MDN; we will eventually have a mechanism for this, but at this time, they remain on the server for potential later re-use.</p>
</div>

<p>You can also revise the image properties for an image by double-clicking it, or right-clicking on it and choosing "Image Properties" from the context menu that appears. This will present the same dialog as above.</p>

<p>{{EditorGuideQuicklinks}}</p>