Markdown記法入門

Markdown記法入門 マークアップ

「Markdownの書き方がわからない」

そんなあなたのために、基本的な書き方をまとめました。

Markdown記法とは?

Markdown記法とは、文章の書き方の一種です。テキストを簡単に、HTMLに変換することができます。

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

DARING FIREBALL(https://daringfireball.net/projects/markdown/)より

Markdownの書き方① 見出し、段落、改行

公式サイトのDingusページで、試すことができます。こちらを使って、いくつかの書き方をご紹介しましょう。

「Markdown Source」にMarkdown記法で記述すると、「HTML Source」にHTML変換後のコードが、「HTML Preview」にプレビューが表示されます。

ただ文字を記述すると、p要素に変換されることがわかりますね。

Image from Gyazo

見出し

見出し(h1~6)は「#」を使います。「#」1つでh1要素、2つでh2要素、……というように、h6要素まで表現することが可能です。

Image from Gyazo

「#」と見出しの間には半角スペースを忘れずに。

段落

段落を変えるには、空行を入れます。

Image from Gyazo

改行

改行(br)は「半角スペース2つ」です。

Image from Gyazo

Markdownの書き方② リスト、引用、区切り線

リスト

順序なしリスト

順序なしリスト(ul要素)には、ハイフン(-)アスタリスク(*)プラス(+)のいずれかを使います。

Image from Gyazo

順序つきリスト

順序つきリスト(ol要素)は、「数字.」です。数字は順番どおりでなくても、かまいません。

Image from Gyazo

引用

引用(blockquote要素)は「>」です。

Image from Gyazo

区切り線

「ハイフン3つ(—)」or「アスタリスク3つ(***)」or「アンダースコア3つ(___)」 のいずれかをお使いください。

Image from Gyazo

Markdownの書き方③ 強調、リンク、画像

強調

強調したい部分を、アスタリスクまたはアンダースコアで囲みます。

1つだと、斜体で強調。

2つだと、太字で強調。

3つだと、斜体&太字で強調。

Image from Gyazo

リンク

URLを<>で囲みます。

Image from Gyazo

テキストにリンクを設定したい場合は、「[テキスト](URL)」としましょう。

Image from Gyazo

画像

画像を表示させるには「![alt属性の値](URL)」です。

Image from Gyazo

画像にリンクを設定する場合は「[![alt属性の値](画像のURL)](リンク先のURL)」とします。

Image from Gyazo

まとめ

HTMLはタグで囲む必要があり、書くのに手間がかかります。

その点、Markdown記法なら簡単です。

メモやコーディングなどにお役立てください。

あなたの毎日がハッピーでありますように。

コメント

タイトルとURLをコピーしました