Markdownの水平線

ハイフンを3つ以上、その行だけに書くと水平線が引かれます。Markdownでいちばん単純な要素で、そしてこの形式でいちばんたちの悪い驚きを隠しています。同じハイフンを段落の真下に置くと、区切り線ではなく見出しが出てくるのです。

上の文章。

---

下の文章。

***

___

この段落のすぐ下にハイフンがあります
---

最後のものをプレビューで見てください。ハイフンが、上の行を <h2> に変えてしまいました。

3つの記号

ハイフン、アスタリスク、アンダースコア。3つ以上を、その行だけに書きます。

---
***
___

3つとも同じ <hr> になります。文字のあいだに空白を入れてもよいので - - - も通りますが、そう書く理由はありません。

慣習で選ばれるのは --- で、エディタが挿入するのもこれです。

空行の落とし穴

このページが存在する理由そのものです。

段落。
---

文書の中の区切り線がどうしても見出しになってしまうなら、原因はこれです。アスタリスクにはこの曖昧さがなく、それが *** を使う唯一の言い分です。

フロントマターも同じ文字を使います

静的サイトジェネレータは、ファイルの先頭でハイフンの行2本のあいだにメタデータを置きます。

---
title: わたしのページ
---

ここから本文が始まります。

このブロックはMarkdownですらありません。YAMLで、Markdownの処理系がファイルを見るより先に道具が処理します。フロントマターとして扱われるのは、それが文書のいちばん先頭にあるときだけです。もっと下にある --- は、ふつうの水平線です。

このサイトのどのガイドも、まさにこういうブロックで始まっています。

いつ使うか

控えめに。水平線は視覚的に強い切れ目で、構造を表すなら見出しのほうがたいていうまくやります。線が場所代を稼ぐのは、こういう場合です。

• 本文と脚注や付録を分けるとき
• 散文で場面転換を示すとき。見出しでは間違いになる場面です
• Markdownをプレゼンに変える道具でスライドを分けるとき。多くが --- をページ区切りに使います

よくある間違い

上に空行がない。 線ではなく <h2> が出ます。改行に次いで多いMarkdownの驚きです。

文字が3つ未満。 -- は何でもなく、--- が線です。

文字を混ぜる。 -*- は効きません。3つとも同じ文字である必要があります。

見出しの代わりに線を使う。 節に名前が要るなら、見出しを付けてください。線は「何かが変わった」とは伝えますが、「何が」は伝えません。

見た目を変えられると思う。 Markdownに太さや色や幅の記法はありません。それはCSSの領分です。

よくある質問

Markdownで横線を入れるには？

ハイフン、アスタリスク、アンダースコアのどれかを3つ以上、その行だけに書き、上に空行を置きます：---。

ハイフンが見出しになってしまうのはなぜですか？

段落のすぐ下のハイフンの行は、見出しの前ではなく下に印を付ける古いSetext記法で、<h2> を意味するからです。段落とハイフンのあいだに空行を入れれば、代わりに線になります。

---、***、___ の違いは？

出力に違いはありません。3つとも同じ水平線になります。--- が慣習で、*** にはSetextの見出しと取り違えられないという利点があります。

Markdownファイルの先頭にある --- のブロックは何ですか？

フロントマターです。タイトル、日付、タグといったYAMLのメタデータの塊で、サイトジェネレータがそれを読み、描画の前に取り除きます。フロントマターとして扱われるのは、ファイルのいちばん先頭にあるときだけです。

水平線の見た目を変えられますか？

Markdownではできません。太さも色も幅もスタイルシートの領分で、Markdownは「ここで切れる」とだけ言います。プレビュースタイルのあるエディタなら、選んだスタイルが見た目を決めます。