2026年8月6日画像

執筆・検証: MD Converter編集部

Markdown画像のサイズ変更・中央寄せ・左右配置｜PDFで整える方法

Markdown画像を縦横比を保って拡大縮小し、左・中央・右へ配置する方法を解説。PDFの改ページ、画質、画像が表示されないトラブルも解決します。

Markdownだけでは画像サイズと配置を細かく指定できない

標準的なMarkdownの画像記法は、代替テキストと画像の場所を表すシンプルな形式です。

![画面構成図](./images/screen-layout.png)

この記法には、幅、左右寄せ、中央寄せを指定する共通ルールがありません。HTMLのwidth属性や独自記法を使える環境もありますが、表示先によって無視されたり、PDF変換時だけ崩れたりします。GitHub、社内Wiki、エディタ、変換ツールの間で同じMarkdownを使いたい場合は、本文を独自記法で複雑にせず、出力時のレイアウトとして調整する方法が扱いやすいでしょう。

この記事では、画像を読み込み、縦横比を保ってサイズ変更し、左・中央・右へ配置してからPDFへ保存する手順を説明します。

画像をMarkdownへ追加する基本方法

相対パスで指定する

Markdownファイルと一緒に画像フォルダを管理できる場合は、相対パスが便利です。

project/
├── document.md
└── images/
    └── architecture.png

![システム構成図](./images/architecture.png)

ファイルを別の場所へ移すときは、Markdownと画像フォルダの位置関係を保ってください。絶対パスは自分のPCでしか開けないことが多いため、共有資料には向きません。

URLで指定する

![製品画面](https://example.com/images/product.png)

URL画像は取得先が公開されており、印刷時にもアクセスできる必要があります。ログインが必要なURL、有効期限付きURL、外部参照を禁止するセキュリティ設定では表示されない場合があります。長期保存するPDFなら、管理できるローカル画像を使う方が安全です。

HTMLとCSSで画像サイズを指定する

HTMLを許可するMarkdown処理系では、width属性で表示幅を指定できます。heightは固定せず、縦横比を保ちます。

<img src="./images/architecture.png"
     alt="システム構成図"
     width="720">

複数画像の幅を統一するなら、個別のインライン指定よりCSSクラスが管理しやすくなります。

<img class="figure figure--half"
     src="./images/screen.png"
     alt="注文登録画面の入力項目">

.figure {
  display: block;
  max-width: 100%;
  height: auto;
}

.figure--half {
  width: 50%;
}

max-width: 100%で本文幅からのはみ出しを防ぎ、height: autoで縦横比を維持します。小さな画像をCSSで大きくしても画素数は増えないため、文字や細線がぼやける場合は高解像度の元画像へ差し替えてください。

左寄せ・中央寄せ・右寄せをCSSで指定する

ブロック画像はmarginで配置できます。

.figure--left   { margin-right: auto; }
.figure--center { margin-inline: auto; }
.figure--right  { margin-left: auto; }

中央寄せ：構成図、写真、画面全体のキャプチャ
左寄せ：手順内の小さな画面や補足図
右寄せ：比較用の小図など、右に置く理由がある画像

「大きな図は中央、小さな補足は左」のように文書全体の規則を決めると整います。画像の直前に見出しや導入文、直後に説明文を置き、重要な情報を画像内だけに閉じ込めないでください。画像ではなく文章側の配置を変えたい場合は、Markdownで文字を中央寄せ・右寄せする方法で解説しています。

大きな画像の前で改ページする

大きな画像がページ末尾に入りきらない場合は、対象となる図へクラスを付け、印刷CSSで次ページから始めます。

@media print {
  .figure--new-page {
    break-before: page;
  }

  figure {
    break-inside: avoid;
  }
}

1ページに収まらない図へbreak-inside: avoidを使うと、大きな空白や意図しない分割が起きます。本文幅いっぱいの構成図や、縮小すると文字が読めない画面キャプチャなど、必要な画像だけに指定してください。改ページ後は目次と総ページ数も確認します。

PDFで画像が表示されないときの診断

プレビューにも表示されない場合は、まず画像のパス、URL、拡張子を確認します。相対パスの基準が想定と違う、ファイル名の大文字と小文字が一致しない、URLに認証が必要、画像形式をブラウザが表示できない、といった原因が考えられます。詳しくはMarkdownで画像が表示されない原因を参照してください。

プレビューにはあるのにPDFにない場合は、印刷画面を開いた直後に保存せず、画像の読み込みが完了するまで待ちます。外部URL画像はネットワーク状況に左右されるため、重要な資料では埋め込み画像へ置き換えるのが確実です。

画質とファイルサイズを両立する

写真にはJPEG、透過や文字中心の画面キャプチャにはPNG、軽量化を優先するWeb用途にはWebPが一般的です。GIFのアニメーションはPDFでは静止画として扱われるため、伝えたいフレームを静止画像にします。

印刷する画面キャプチャは、最終表示幅の約2倍程度の画素幅があると文字が比較的鮮明です。反対に、スマートフォン写真を未圧縮のまま何十枚も使うとPDFが大きくなります。画像編集時に不要な余白をトリミングし、肉眼で差が分からない範囲まで圧縮します。

背景色を付ける場合、透過PNGの黒い線や白いロゴが見えなくならないかも確認してください。印刷ダイアログでは背景グラフィックの設定によって色の出方が変わることがあります。

代替テキストを具体的に書く

![画像]や空の![]では、画像が見えないと内容が分かりません。![注文登録画面の入力項目]、![MarkdownからPDFへ変換する処理フロー]のように、画像の目的を短く記載します。装飾目的の画像は説明しすぎず、本文の理解に必要な図は要点が分かる名前にします。

代替テキストはアクセシビリティだけでなく、画像ファイルの読み込みに失敗したときの診断や、Markdownソースを検索するときにも役立ちます。

出力前チェックリスト

画像のパスまたはURLが有効である
すべての画像に内容を表す代替テキストがある
height: autoなどで縦横比が維持されている
同じ役割の画像は同じ幅と配置にそろえた
画像内の文字を100%表示で読める
見出し、画像、説明文が不自然に別ページへ分かれていない
背景色上でも線、ロゴ、透過部分が見える
PDFの容量が共有手段の上限を超えていない
保存後のPDFを開き、全ページの画像を確認した

よくある質問

Markdown記法だけで中央寄せできますか？

共通仕様はありません。HTMLを許可する環境では可能ですが、互換性が下がります。複数環境で使うMarkdownは標準記法に保ち、PDF出力時に配置する方法が安全です。

`%`と`px`はどちらを使いますか？

本文幅に追従させるなら%、基準となる表示幅を決めたいならpxが分かりやすいでしょう。どちらの場合もmax-width: 100%を併記すると、狭い画面や印刷領域からのはみ出しを防げます。

画像ごとに改ページできますか？

HTMLと印刷CSSを許可する環境では、対象画像にbreak-before: pageを指定できます。変換器固有の改ページ機能を使う場合は、最終PDFで空白ページが増えていないか確認してください。

まとめ

Markdownの標準画像記法は移植性に優れますが、サイズや配置を細かく持ちません。HTMLを許可する環境では、max-width、height: auto、margin、印刷用のbreak-beforeを組み合わせると、画像を崩さずPDFへ配置できます。

Markdown画像を調整してPDFにする