投稿者: Zinsoku

マークダウン（Markdown）はテキストをHTMLに変換するための記法です。

「マークダウン記法」と呼ぶこともあります。

マークダウンの例

マークダウンはブログなどの文章をHTMLで書きたいときに知っていると便利です。

例えば、以下のような文章を書くとします。

<h1>こんにちは</h1>

<p>元気ですか？</p>

<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>

これを全て入力するのは面倒です。

しかし、マークダウンなら以下のように入力するだけで同じ意味になります（正確には対応しているサービスを使うことで、上記のHTMLに変換されます）。

#こんにちは
元気ですか？

- りんご
- みかん
- ぶどう

マークダウンに対応しているサービスを使えばHTMLの文書も非常にカンタンに書くことができるので便利です。

マークダウンが使えるサービス

マークダウンは有名なサービスだとWordPressやTumblr、Qiita、GitHubなどで使用することができます。

ただし、これらの中には完全に対応していないサービスもあります（WordPressなど）。

マークダウンの基本情報

マークダウンで作ったファイルの拡張子は「.md」「.markdown」です。

公式サイトは「Daring Fireball: Markdown」になります。（英語）

また、以下のページで実際にマークダウンをHTMLに変換し、プレビューすることができます。

Daring Fireball: Markdown Web Dingus

（マークダウンを入力したら「Convert」をクリック）

マークダウンの書き方のまとめ（チートシート）です。

段落を表す方法（pタグ）

マークダウンで段落を表す場合は、空行を入れます。

以下のように1行空ければOKです。

こんにちは。こんにちは。こんにちは。こんにちは。

さようなら。さようなら。さようなら。さようなら。

HTMLに変換すると以下のようになります。

<p>こんにちは。こんにちは。こんにちは。こんにちは。</p>

<p>さようなら。さようなら。さようなら。さようなら。</p>

それぞれの行がpタグで囲まれていて、段落が変わったことがわかると思います。

改行する方法（brタグ）

マークダウンではどれだけ改行しても、最終的な結果（HTMLに変換した結果）では無視されます。

改行したい場合は、行末に半角スペースを2つ挿入しましょう。

こんにちは  
こんにちは

わかりづらいですが、最初の「こんにちは」の後ろに半角のスペースが2つ入っています。これをHTMLに変換すると以下のようになります。

<p>こんにちは <br />
こんにちは</p>

改行を表すbrタグ<br />が挿入されているのがわかると思います。

また、2行に渡っていますが、1組のpタグで囲まれており、1つの段落であることがわかるかと思います。

強調（斜体・emタグ）

文字を斜体(イタリック)にするには斜体にしたい文字をアスタリスク「*」かアンダースコア「_」で挟めばOKです。

*斜体*
_斜体_

これをHTMLに変換すると以下の様になります。

<em>斜体</em>

文字を斜体にするemタグ<em>に変わったのがわかると思います。

強い強調（太字・strongタグ）

文字を強い強調(太字)にする方法もあります。

太字にしたい文字を2つのアスタリスク「*」かアンダースコア「_」で挟めばOKです。ちなみに<b>タグではなく<strong>になります。

**強調**
__強調__

こちらをHTMLに変換すると以下の様になります。

<strong>強調</strong>

strongタグ<strong>で囲まれているのがわかりますね。

引用（blockquotタグ）

引用を表すためには、文の先頭に半角で「>」を入れればOKです。空行を入れなければ、複数行でも問題ありません。

>こんにちは。こんにちは。こんにちは。こんにちは。

マークダウンをHTMLに変換すると、以下のようになります。

<blockquote>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
</blockquote>

空行を入れたい場合は、全ての行に「>」をつければOKです。

>テキストテキストテキストテキストテキスト

>テキストテキストテキストテキスト

<blockquote>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
</blockquote>

二重引用

「>」の記号を複数つけることで何重にも引用をすることができます(引用した文章内に引用文がある状態)。

>テキストテキストテキストテキスト
>>テキストテキストテキストテキスト
>>>テキストテキストテキストテキスト
>>>>テキストテキストテキストテキスト

<blockquote>
  <p>テキストテキストテキストテキスト</p>

<blockquote>
  <p>テキストテキストテキストテキスト</p>

<blockquote>
  <p>テキストテキストテキストテキスト</p>

<blockquote>
  <p>テキストテキストテキストテキスト</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>

順序なしのリスト（ulタグ）

マークダウンで順序なしのリストを書くにはハイフン「-」、「+」プラス、「*」アスタリスクを使います。

これらの記号を使って箇条書きに書くと、リストタグに変換されます。

- ハイフン
- ハイフン
- ハイフン

+ プラス
+ プラス
+ プラス

* アスタリスク
* アスタリスク
* アスタリスク

このように書きます。記号の後に半角スペースを必ず入れてください。

このように書いたマークダウンをHTMLに変換すると以下のようになります。

<ul>
<li>ハイフン</li>
<li>ハイフン</li>
<li>ハイフン</li>
</ul>

<ul>
<li>プラス</li>
<li>プラス</li>
<li>プラス</li>
</ul>

<ul>
<li>アスタリスク</li>
<li>アスタリスク</li>
<li>アスタリスク</li>
</ul>

リストの中に文章を入れる

また、リストの中に文章を入れることもできます。

文章の前後に空行を入れ、行頭に半角スペースを1つ入れればOKです。

- りんご
- みかん

 フルーツです。

- ぶどう

わかりにくいですが「フルーツです。」の行頭には半角スペースが1つ入っています。

これでリスト内の項目として字下げされたHTMLに変換できます。

<ul>
<li>りんご</li>
<li><p>みかん</p>

<p>フルーツです。</p></li>
<li><p>ぶどう</p></li>
</ul>

リストの中にリストを作る（入れ子）

リスト内にリストを作る(入れ子)こともできます。

半角スペースを1ついれて、字下げすればOKです。

- りんご
 - 青リンゴ
 - ブレイバーン
- みかん
- ぶどう

この様にマークダウンを書くと、「青リンゴ」と「ブレイバーン」が「りんご」内に入ったリストになります。

<ul>
<li>りんご
<ul><li>青リンゴ</li>
<li>ブレイバーン</li></ul></li>
<li>みかん</li>
<li>ぶどう</li>
</ul>

ちょっとわかりづらいかもしれませんが、以下の様になるということです。

• りんご
  • 青リンゴ
  • ブレイバーン
• みかん
• ぶどう

ちなみに、階層構造は番号なしリストの中に番号付きリストを作ることもできます。

順序ありのリスト（番号付きリスト、olタグ）

マークダウンでは順序ありのリスト(行頭に数字が付いた箇条書き)も書くには、リストの最初に半角数字とピリオドを書けばOKです。

1. 番号
2. 番号
3. 番号

ピリオドの後には半角スペースを必ず入れてください。

これをHTMLに変換すると、以下のようになります。

<ol>
<li>番号</li>
<li>番号</li>
<li>番号</li>
</ol>

なお、数字は以下のように全て同じ数字を使たり、順番がめちゃくちゃでもOKです。

1. 番号
1. 番号
1. 番号
5. 番号

これでも問題なくHTMLに変換できます。

全て同じ数字でリストを作ると、リストに後から項目を足したり、順番を変える際にも番号を振り直さずに済むのでオススメです。

また、こちらも順序なしのリストと同様の方法で、リスト内に文章を入れたり、階層構造（入れ子）にすることができます。

コード（codeタグ）

プログラミング等のコードをシンタックスハイライトでインライン(文中)に記すには、コードをバッククオート(`)で囲めばOKです。

HTMLの例です。`<h1>Hello World</h1>`こんな感じ。

<p>HTMLの例です。<code>&lt;h1&gt;Hello World&lt;/h1&gt;</code>こんな感じ。</p>

また、複数行にわたるコードをシンタックスハイライト(codeタグで囲む)には、タブもしくは4つ以上の空白(半角スペース)を行頭におくか、3つのバッククオートで囲めばOKです。

    function x() {
      return x;
    }

```
function x() {
    return x;
}
```

これらをHTMLに変換すると、codeタグがpreタグで囲まれ、複数行のコードをシンタックスハイライトすることができます。

<pre><code>function x() {
  return x;
}
</code></pre>

画像（imgタグ）

画像を表示するには以下のように書きます。

![image](https://example.com/image.jpg)

![image](https://example.com/image.jpg "画像です。")

角括弧([])の中に書いたテキストがalt属性、ダブルクォーテーションで囲ったテキストの中身がtitle属性になります。

<p><img src="https://example.com/image.jpg" alt="image" title="" /></p>

<p><img src="https://example.com/image.jpg" alt="image" title="画像です。" /></p>

画像をリンクにする

画像を表示するマークアップをリンクを表示するマークアップと組み合わせれば、画像をリンクにすることができます。

[![image](https://example.com/image.jpg "画像です。")](https://example.com)

<p><a href="https://example.com"><img src="https://example.com/image.jpg" alt="image" title="画像です。" /></a></p>

水平線・区切り線（hrタグ）

1行の中に、3つ以上のアスタリスク（*）、ハイフン（-）、アンダースコア（_）だけを並べると水平線になります。

***
---
___
- - -

これらは全て<hr>/に変換されます。

<hr />

なお、ハイフン、アスタリスク、アンダースコアを並べる際は、間にスペースが入っていても構いません（表示は同じです）。

また、ハイフンで水平線を表す時は、その前のパラグラフ（段落）との間に空行を入れないと<h2>の見出しになってしまう場合があるので注意しましょう。

マークダウンの方言

マークダウンは使用するサービスやエディタによってローカルルール（方言）があるため、ここで記載した通りに動かない場合もあります。

この記事の通りに記述してもうまく表示されない場合は、サービスのローカルルールを確認してみてください。