Markdown内で画像の位置指定を行う方法

この記事では、Markdownで画像の位置指定や中央揃えを行う方法を、資料作成上の注意点とあわせて整理します。

この記事で分かること

• Markdownで画像位置を調整する基本的な考え方
• 中央揃えやサイズ指定を行う際の注意点
• Markdown資料をPowerPointやHTMLに展開するときの見方

関連する読み物・相談テーマ

• Markdown・Pandoc資料作成レポート集：関連する記事群をまとめて確認できます。
• AI導入方針・研修設計の整理：社内での判断、導入、研修、論点整理に落とし込む際の入口です。

Markdown自体には画像の位置指定を行う標準の機能がありませんが、HTMLやスタイルを組み合わせることで位置を指定することが可能です。以下にいくつかの方法を紹介します。

1. HTMLを使った位置指定

Markdown内でHTMLを使うことができます。例えば、<div>タグを使って画像を中央に配置する場合、次のように記述します。

<div style="text-align: center;">
  <img src="https://example.com/cute-cat.jpg" alt="かわいい猫" width="300">
</div>

2. CSSを使った位置指定

CSSスタイルを直接指定して画像を左、中央、右に配置することも可能です。Markdown内に直接CSSを書き込むことはできませんが、HTMLスタイル属性を使うことで代用できます。

• 中央揃え

  <img src="https://example.com/cute-cat.jpg" alt="かわいい猫" style="display: block; margin: 0 auto;" width="300">

• 左揃え

  <img src="https://example.com/cute-cat.jpg" alt="かわいい猫" style="float: left; margin-right: 10px;" width="300">

• 右揃え

  <img src="https://example.com/cute-cat.jpg" alt="かわいい猫" style="float: right; margin-left: 10px;" width="300">

3. MarkdownとHTMLの組み合わせ

Markdownエディタや特定のプラットフォーム（GitHubのリポジトリREADMEなど）では、一部の位置指定が反映されない場合もあります。その場合、HTMLを使用すると効果的です。また、MarkdownがHTMLと混在しても正常に表示されるエディタやプラットフォームを使用すると便利です。

4. 特定のMarkdownエディタの機能を活用

一部のMarkdownエディタ（Typoraなど）では、右クリックメニューや拡張機能を使用して画像の位置を指定できることもあります。プラットフォーム固有の機能については、ドキュメントを参照してください。

以上の方法で、Markdown内の画像の位置を指定できます。環境やプラットフォームによって動作が異なる場合もあるため、HTMLタグを使用する方法が最も汎用的で確実です。