Markdown 画像サイズ・中央寄せジェネレーター
画像のURLを貼り付けて幅・高さ・配置を指定するだけで、どこでも同じように表示されるMarkdownまたはHTMLをコピーできます。処理はすべてブラウザ内で完結します。
Markdownで画像のサイズを変更するには？
標準のMarkdownには画像サイズを指定する記法がないため、HTMLの<img>タグを使い、width属性で幅を指定します。GitHubを含むほとんどのレンダラーはこのHTMLをそのまま通します。widthだけ指定すれば縦横比は自動で保たれ、中央寄せはalign="center"のdivで囲むだけです。
<img src="image.png" alt="代替テキスト" width="300">
<div align="center">
<img src="image.png" alt="代替テキスト" width="300">
</div>1つ目は画像を幅300ピクセルで表示し、高さは比例して自動計算されます。2つ目は同じ画像をページの中央に配置します。
Markdown 画像サイズ・中央寄せジェネレーターを使う
設定
出力
サイズと配置
Markdownの画像記法とサイズ・配置の指定
画像の挿入は1行で済みますが、大きさと位置の指定にはHTMLが必要です。CommonMarkが見た目に関する指定を意図的に仕様から外しているためです。実務で必要になる書き方をすべて挙げます。
標準の画像記法
感嘆符、角括弧の中に代替テキスト、丸括弧の中にパス、という順で書きます。丸括弧の中に引用符で囲んだタイトルを足すと、マウスを乗せたときのツールチップになります。
画像が元のサイズで表示されます。ファイルを読み込めない場合は「代替テキスト」が代わりに表示されます。
HTMLタグでサイズを指定する
Markdown自体にwidthやheightはないため、<img>タグに切り替えます。GitHubを含むほぼすべてのレンダラーは、素のHTMLをそのまま出力します。widthだけを指定すれば、高さはブラウザが比例計算してくれます。
<img src="/images/photo.png" alt="代替テキスト" width="300">
<img src="/images/photo.png" alt="代替テキスト" width="50%">1つ目は幅300ピクセル、2つ目はコンテナ幅の50%で表示され、狭い画面でも可変のままです。どちらも元の縦横比を保ちます。
中央寄せ・左寄せ・右寄せ
align属性を付けたdivで画像を囲みます。GitHubはインラインのstyle属性を取り除く一方でalignは残すため、この書き方がもっとも互換性に優れます。div内でMarkdownの記法も解釈させたい場合は、タグの内側に空行を1行入れてください。
<div align="center">
<img src="/images/photo.png" alt="代替テキスト" width="400">
</div>画像がページの中央に配置されます。centerをleftまたはrightに変えると、その側に寄せられます。
画像をクリックできるようにする
画像の記法をリンクの記法で丸ごと包むと、拡大版や別ページへ飛べるサムネイルになります。クリックでき、なおかつサイズも固定したい場合は、入れ子のHTMLで書く必要があります。
[](https://example.com)
<a href="https://example.com"><img src="/images/thumb.png" alt="代替テキスト" width="200"></a>どちらもクリックできる画像になりますが、幅を200ピクセルに固定できるのはHTML版だけです。
参照形式の画像
長いURLを本文から追い出し、ラベルだけで参照します。同じスクリーンショットが何度も登場する場合や、CDNのURLが長くて本文が読みにくい場合に便利です。
![代替テキスト][logo]
[logo]: /images/photo.png "任意のタイトル"インライン形式とまったく同じ結果になります。定義行そのものは何も出力しないため、ファイルの末尾にまとめて置けます。
エディタ独自のサイズ指定
いくつかのエディタは独自のサイズ記法を持っています。手元では便利ですが、GitHubや多くの静的サイトジェネレーターでは効かないため、外部に公開する文書には使わないでください。
![[photo.png|300]]1つ目はTyporaとimsizeプラグインを入れたmarkdown-itで有効、2つ目はObsidianのウィキリンク記法です。GitHubではどちらもそのまま文字として表示されます。
各サービスでのサイズ指定と配置の対応状況
基本の画像記法はどこでも共通ですが、サイズと配置はそうではありません。各サービスのサニタイザーがHTMLをどこまで通すかによって結果が変わります。
| プラットフォーム | 対応状況 | 備考 |
|---|---|---|
| GitHub / GitLab | 対応 | <img> の width と height、<div align> が使えます。インラインのstyle属性は除去されます。 |
| Obsidian | 対応 | ![[photo.png|300]] や  の短縮記法に加え、素のHTMLも使えます。 |
| VS Code プレビュー | 対応 | HTMLのimgタグを描画します。=300x200 の短縮記法は認識されません。 |
| Qiita / Zenn | 一部 | QiitaはHTMLのimgタグで幅を指定できます。Zennは  という独自記法でサイズを指定します。 |
| Notion | 一部 | 貼り付けたMarkdownは画像ブロックになり、サイズは記法ではなくハンドルのドラッグで調整します。 |
| Discord | 非対応 | 画像記法は描画されません。URLをそのまま貼ると、Discord側がプレビューを埋め込みます。 |
Markdownで画像のサイズと配置を指定する手順
画像の種類を選ぶ
本文に直接書くのか、ラベルで一度だけ定義するのか、クリックで遷移させたいのかに応じて、標準・参照形式・リンク付きから選びます。
URLと代替テキストを入力する
画像のURLか相対パスを貼り付け、代替テキストを書きます。スクリーンリーダーの読み上げにも、画像を読み込めなかった読者にも使われます。
サイズと配置を指定する
幅・高さのどちらか、または両方を入力し、中央・左・右から配置を選びます。純粋なMarkdownではサイズを表現できないため、生成結果は自動的にHTML形式に切り替わります。
結果をコピーする
MarkdownまたはHTMLの出力をコピーします。コミットする前にプレビュータブで、意図した位置と大きさで表示されるか確認してください。
よくある質問
Markdownで画像のサイズを変えるには？
標準のMarkdownにはサイズを指定する記法がないため、HTMLタグを使います。<img src="image.png" alt="代替テキスト" width="300"> のようにwidthだけを指定すれば、高さはブラウザが計算して縦横比を保ちます。50% のようなパーセント指定も有効で、狭い画面では自動的に縮みます。
Markdownで画像を中央寄せするには？
align属性を付けたdivで囲みます。<div align="center"> と書き、その中に画像タグを置き、</div> で閉じます。GitHubとGitLabはインラインCSSを除去する一方でalign属性は残すため、この方法がもっとも確実です。style属性が許可されているレンダラーであれば、style="display: block; margin: 0 auto" でも中央寄せできます。
GitHubのMarkdownで画像をリサイズするには？
GitHubはMarkdown内のHTMLを解釈するため、widthとheightを付けた<img>タグがREADME、Issue、プルリクエスト、Wikiのいずれでも正しく表示されます。 の短縮記法には対応しておらず、style属性も除去されるので、必ずwidth属性とheight属性を使ってください。
Markdownで画像を挿入するには？
感嘆符を書き、角括弧に代替テキスト、丸括弧にパスを入れます。 の形です。パスの後ろに引用符で囲んだタイトルを足すと、マウスを乗せたときのツールチップになります。パスは完全なURLでも、/images/photo.png のようなサイトルートからのパスでも、相対パスでも構いません。
ローカルの画像をMarkdownで表示するには？
ファイルの保存場所ではなく、文書が描画される場所を基準にした相対パスを使います。同じフォルダなら ./images/photo.png、1つ上のフォルダなら ../images/photo.png です。GitHubでは相対パスがリポジトリ内で解決されるため、フォークされてもクローンされても画像は表示され続けます。
Markdownの画像にリンクを付けるには？
画像の記法をリンクの記法で包みます。[](https://example.com) と書くと、画像そのものがリンクの中身になります。クリックできる画像のサイズも固定したい場合は、HTMLで書き直し、width属性を付けたimgタグをaタグで囲んでください。
Markdownの画像にキャプションを付けるには？
キャプション専用の記法はありません。一般的にはHTMLのfigure要素を使い、figureの中にimgタグとfigcaption要素を並べます。多くの静的サイトジェネレーターはこれを正しく描画します。どこでも動く代替案としては、画像のすぐ下に短い斜体の行を置く方法があります。
Markdownで画像が表示されないのはなぜですか？
よくある原因は、相対パスの誤り、ログインが必要だったり直リンクが禁止されていたりするURL、角括弧の前の感嘆符の書き忘れ、そして閉じ角括弧と開き丸括弧の間の空白です。GitHubの画像を参照するときは、ファイルを表示するページではなくraw形式のURLを指定してください。
 というサイズ指定は使えますか？
一部のエディタでしか使えません。Typoraとimsizeプラグインを入れたmarkdown-itは対応していますが、CommonMark、GitHub、GitLab、VS Code標準のプレビューは非対応で、記法がそのまま文字として表示されます。ツール間を行き来する文書では、HTMLのimgタグに統一してください。
代替テキスト（alt）は書く必要がありますか？
必要です。代替テキストはスクリーンリーダーが読み上げる内容であり、画像を読み込めなかったときにブラウザが表示する文字でもあり、検索エンジンが画像を理解する手がかりでもあります。ファイル名ではなく内容を説明してください。screenshot.png より「デプロイパイプラインの構成図」のほうが適切です。