メインコンテンツへスキップ
ホームブログMarkdown の水平線:区切り線の構文とよくある問題の直し方

Markdown の水平線:区切り線の構文とよくある問題の直し方

---、***、___ で Markdown の水平線を作成します。区切り線が見出しになる理由、インデントの影響、改行との使い分けを解説します。

公開日:

Markdown に水平線を追加するには、ハイフンを三つだけ書いた行を用意し、その前後に空行を入れます。

最初のセクションの終わり。

---

次のセクションの始まり。

二つの段落の間に区切り線が表示されます。Markdown では主題の区切りと呼び、HTML では <hr> で表します。Markdown ビューアーに例を貼り付けて、文書の表示を確認できます。

区切り線の三つの書き方

次の形式は、いずれも主題の区切りを作ります。

Markdown のソース 結果
--- 水平線
*** 水平線
___ 水平線
* * * 水平線

同じ種類のハイフン、アスタリスク、アンダースコアを三つ以上使います。記号の間に空白を入れることもできます。種類の違う記号を混ぜる、同じ行に文字を追加する、記号を二つだけにすると、水平線にはなりません。詳しくは CommonMark の主題区切りの仕様を参照してください。

ハイフンの数は表示される線の幅を決めません。20 個でも三つでも生成される HTML 要素は同じで、見た目は出力先のスタイルで決まります。

水平線が見出しになるのはなぜですか?

次のソースは「更新履歴」の下に区切り線を置くものではありません

更新履歴
---

これはレベル 2 の見出しになります。段落のすぐ下のハイフンは Setext 形式の見出しを作ることがあり、その解釈が水平線より優先されます。空行を入れて分離してください。

更新履歴

---

文書のセクションには、明示的な見出しのほうがわかりやすい場合があります。

## 更新履歴

読み込み処理が CSV ファイルに対応しました。

セクション名には Markdown の見出しを使います。手紙と付録を分ける場合など、内容の切り替わり自体に意味があるときは水平線を使います。

区切り線が普通の文字として表示されるのはなぜですか?

水平線の前後のソースを確認してください。

症状 考えられる原因 修正方法
コードブロック内に --- が表示される 独立したブロックの先頭に四つの空白がある、またはコードフェンスが閉じていない インデントを除くかコードフェンスを閉じる
-- がそのまま表示される ハイフンが二つしかない 三つ以上にする
記号の隣に文字が表示される 同じ行に別の文字がある 記号だけの行にする
文中に --- が表示される 記号をバッククォートで囲んでいる 区切り線にするならバッククォートを外す
直前の段落が見出しになる --- の前に空行がない 空行を入れる

文書の最上位では、主題の区切りの前に最大三つの空白を置けます。リスト内ではインデントが内容の所属する項目も決めるため、すべての空白を削除するのではなく、周囲のリスト構造を確認してください。

水平線と改行は異なります

区切り線はセクションを分けます。後ろの文字を単に次の行へ送るものではありません。

住所には明示的な改行を使います。

マーケット通り 120 番地\
カリフォルニア州サンフランシスコ

新しい段落には空行を入れます。セクションを分けるには、独立した行に --- を書きます。Markdown の改行ガイドでは、行末の空白、バックスラッシュ、GitHub のファイルとコメントでの改行の違いを説明しています。

引用の中に区切り線を入れる

区切り線と空行を含むすべての行に > を付けます。

> 最初の提案。
>
> ---
>
> レビュー担当者からの補足。

区切り線は引用の中に残ります。水平線の > を削除すると引用が終わり、区切り線が文書の外側の階層に移る場合があります。複数の段落と入れ子の引用については引用の例を参照してください。

表の区切り行は水平線ではありません

次の区切り行は表の一部です。

| 形式 | 編集可能 |
| --- | :---: |
| Markdown | はい |

パイプと必要に応じて付けるコロンは列を定義します。ページ全体に区切り線を挿入するものではありません。表を作るには Markdown 表ジェネレーター、既存のスプレッドシートのデータには CSV から Markdown への変換を使用できます。

水平線と文書のエクスポート

主題の区切りは改ページの命令ではありません。PDF や Word の出力ツールはレイアウトと改ページの規則に基づいてページの終わりを決めます。ハイフンを増やしても、次のセクションを新しいページから始める指定にはなりません。

自分で CSS を管理できるウェブページなら、生成された <hr> をサイトのスタイルシートで装飾できます。ホスティング型の Markdown サービスでは独自の CSS が使えないことがあります。特に、印刷後も区切り線の意味が伝わる必要がある場合は、公開先や出力した文書を確認してください。

よくある質問

水平線の前後に空行は必要ですか?

CommonMark はすべての場合に空行を必須としているわけではありませんが、入れておくと --- が見出しと解釈される問題を避け、ソースも読みやすくなります。

HTML の hr タグを使えますか?

生の HTML を許可するレンダラーでは <hr> を使えます。Markdown 文書には --- のほうが適しています。MD File Viewer エディターはユーザーが入力した HTML タグを除去しますが、Markdown の区切り線構文は通常どおり表示します。

区切り線を作らずにハイフンを三つ表示するには?

構文例にはインラインコード `---` を使います。独立した行に通常の文字として表示する場合は、最初のハイフンをエスケープして \--- と書きます。

ほかのよく使う書式は Markdown チートシートで確認できます。

ブラウザーで試す

ホームのエディターを開けば、Markdownの表示・編集・エクスポートがインストール不要で即座にできます。

その他の記事

Markdown の水平線:区切り線の構文とよくある問題の直し方 | MDファイルビューアー