Markdownの書き方

執筆・検証: MD Converter編集部

Markdownで文字を中央寄せ・右寄せする方法

Markdownに標準の中央寄せ記法がない理由と、HTML、CSS、表の配置指定を使う方法、PDF変換時の注意点を解説します。

Markdownには本文を中央寄せする標準記法がない

Markdownは文書の構造を簡潔に表すための書式で、本文を中央寄せ・右寄せする標準記法はありません。配置を変えるには、変換先のHTMLとCSSを利用するか、利用中のツールが提供するレイアウト機能を使います。

ただし、HTMLタグやCSSを含むMarkdownは、GitHub、CMS、変換ツールなど表示先によって結果が変わります。実際に配布へ使うレンダラでHTMLを生成し、画面表示と印刷プレビューの両方を確認してください。

方法1：HTMLのstyle属性を使う

HTMLを許可する環境では、text-alignを指定できます。

<p style="text-align: center;">中央寄せの文章</p>

<p style="text-align: right;">右寄せの文章</p>

短く書けますが、セキュリティ対策のサニタイザーによってstyle属性が削除されることがあります。GitHubなど、HTMLの一部は許可しても自由なCSSを許可しない環境では、意図した配置になりません。

また、HTMLブロック内のMarkdownを解析しない処理系もあります。<p>の中へ**太字**を書いても太字にならない場合があるため、HTMLを使う部分はHTMLとして完結させるか、プレビューで確認します。

方法2：クラスを付けてCSSで指定する

継続的に使う文書やWebサイトでは、配置用クラスを定義すると管理しやすくなります。

<p class="text-center">中央寄せの文章</p>
<p class="text-right">右寄せの文章</p>

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

配置ルールをCSSへ集めれば、後から全体を変更できます。一方、MarkdownとCSSを別ファイルで配布すると、CSSの読み込みが切れたときに配置も失われます。1ファイルHTMLへCSSを含めるか、配布フォルダの構成を固定します。

方法3：表の列を右寄せ・中央寄せする

GFMの表では、区切り行のコロンで列ごとの配置を指定できます。

| 項目 | 状態 | 金額 |
|:---|:---:|---:|
| 利用料 | 支払済み | 12,000円 |

:---は左寄せ、:---:は中央寄せ、---:は右寄せです。数値は右寄せにすると桁を比較しやすく、短い状態表示は中央寄せにすると表が整います。

この指定は表の列に対するもので、通常の段落や見出しには使えません。また、表に対応しないMarkdown環境では反映されません。

画像を中央寄せする

画像記法だけでは配置を指定できないため、HTMLで囲む方法があります。

<p style="text-align: center;">
  <img src="diagram.png" alt="処理フロー">
</p>

CSSを使えるなら、画像へクラスを付け、左右の余白を自動にする方法もあります。

.figure-center {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}

max-width: 100%を付けると、画像が本文幅を超えるのを防ぎやすくなります。配置だけでなく、代替テキストと画像サイズも確認してください。

PDFで配置が変わる場合

HTMLプレビューで中央寄せになっていても、PDF用CSSが別に設定されていると印刷時に上書きされることがあります。@media print内のtext-align、表の幅、ページ余白を確認します。

右寄せした日付や署名欄がページ外へ出る場合、固定幅や大きな左余白が原因かもしれません。画面幅を基準とするvwより、本文コンテナ内のtext-alignを使う方がPDFでは安定します。

中央寄せを使いすぎない

中央寄せは表紙タイトル、短いキャッチコピー、図のキャプションなどには向きますが、複数行の長文では行頭がそろわず読みにくくなります。本文は左寄せを基本にします。

右寄せは日付、金額列、短い補助情報に向きます。位置を空白文字で調整するとフォントや画面幅で崩れるため、半角スペースを連続入力して寄せる方法は避けます。行頭の空白が原因で箇条書きが崩れる場合は、Markdownの箇条書きがずれる・連番が崩れるときの直し方で解説しています。

配布前の確認

  • 配布先がHTMLとstyle属性を許可している
  • HTMLブロック内のMarkdownが期待どおり変換される
  • CSSを含めて配布できる
  • スマートフォンでも本文幅を超えない
  • PDF保存後も配置が維持されている
  • 中央寄せの長文が読みにくくなっていない

Markdownでは構造を保ち、配置は必要な箇所だけHTML・CSSへ任せると、別の環境へ移しても修正しやすい文書になります。

なお、見出しを中央寄せする場合も方法は同じです。ただし、すべての見出しを中央にすると階層を追いにくくなるため、表紙のタイトルなど範囲を限定します。印刷用CSSでだけ配置を変える場合は、HTML版との違いを制作ルールに記録しておきます。

よくある質問（FAQ）

Q. HTMLを使わずにMarkdownの見出しを中央寄せできますか？

標準のMarkdown記法だけでは指定できません。中央寄せの見出しが必要な場合は、表紙用のテンプレートを利用するか、自分で管理できるCSSに配置用クラスを定義して適用します。

Q. 公開すると中央寄せや右寄せが反映されないのはなぜですか？

表示先のサニタイザーがstyle属性を削除しているか、より優先度の高いスタイルシートのルールで上書きされている可能性があります。空白文字を追加して位置を合わせようとするのではなく、生成されたHTMLと印刷用CSSの指定を確認してください。

配置の指定は正しいのに表の列がはみ出す場合は、Markdownの表が崩れる・はみ出す原因と対処法も参照してください。

文字の配置をPDFプレビューで確認する