ブログへ戻る

Thursday, April 16, 2026

Markdown 改行: 余白と行送りを迷わず制御する方法

投稿者

RE

React Dev

@reactdev

Markdown 改行: 余白と行送りを迷わず制御する方法

Markdown の改行は単純そうに見えて、実際はレンダラー差分や書き方の癖で崩れやすいポイントです。段落にしたいのか、同じ段落内で行だけ変えたいのかを分けて考えると整理しやすくなります。

Quick answer

段落を分けたいなら空行を 1 行入れます。同一段落で強制改行したいなら、末尾スペース 2 つか <br> を使います。迷ったら Markdown Editor で書き、Markdown Preview で実際の見え方を確認してください。

リンクや構文との兼ね合いを見たいなら Markdown Link、全体の構文整理は Markdown Editing Syntax Hub が入口になります。

なぜ改行で事故が起こるのか

よくある原因は次のとおりです。

  • 書き手は改行したつもりでも、レンダラーが同じ段落として扱う
  • 末尾スペース 2 個が保存時に消える
  • HTML を許可する環境と禁止する環境が混ざる

つまり、見た目の期待と実際の解釈がズレやすい箇所です。

Workflow map

段落と改行の違い

段落分けは空行で行います。

1 行目の段落

2 行目の段落

同じ段落の中で行だけ変えたいなら、ハード改行を使います。

1 行目の末尾にスペース 2 つ  
2 行目

または:

1 行目<br>
2 行目

段落なのか、同段落の中の改行なのかを先に決めると混乱しません。

どのハード改行が安全か

環境が固定されているなら末尾スペースでも構いません。ただ、エディタの整形やコピー時に消えやすいので、チーム運用では <br> のほうが意図が明確なこともあります。

一方で、HTML を制限する環境では <br> が期待通りに動かない場合もあります。だからこそ Markdown Preview で実際の出力を見ておく価値があります。

レンダラー差分で注意すること

次の差分は見落とされやすいです。

  • GitHub 系レンダラーと CMS で行送りが違う
  • WYSIWYG へ貼り付けると空白が詰まる
  • 表やリストの中では改行の扱いがさらに変わる

複雑な本文ほど、エディタだけで判断せずプレビューを見るべきです。

よくあるミス

ミス 1: Enter だけで改行したつもりになる

1 行目
2 行目

多くの環境では、これは 1 つの段落として扱われます。

ミス 2: すべてを <br> で済ませる

段落分けまで <br> に頼ると、文章構造が読みにくくなります。まとまりを分けたいところは空行に戻したほうが自然です。

エディタとプレビューの役割

Markdown Editor は改行ルールを試す場所として便利です。Markdown Preview は、最終的に読者が見る行間や余白を確認する場所です。

リンク混在時の崩れは Markdown Link、全体の構文設計は Markdown Editing Syntax Hub へつなげると理解しやすくなります。

Final takeaway

Markdown の改行は、「段落を分けるのか」「同じ段落で行だけ折るのか」を先に決めると安定します。

Markdown Editor で改行パターンを試し、Markdown Preview で実際の余白まで確認してから公開してください。

FAQ

Markdown で段落を分けるには？

空行を 1 行入れます。

強制改行はどう書きますか？

行末スペース 2 つ、または <br> を使います。

なぜ環境によって改行結果が違うのですか？

レンダラーごとにハード改行や HTML の扱いが違うためです。Markdown Preview で実際の出力を確認してください。