MENU

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

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タグを使用する方法が最も汎用的で確実です。

コラム