MarkDownの書き方

MarkDownはWebページを作る為だけではなく,メモを取りたいときなど,日常的に使うことが出来るテクニックである。構造化された文章は誰の目から見ても分かり易く,仕事の効率化にも結びつく。一度知ってしまえば,長く活用出来るスキルの1つになると思うので,是非覚えていきたい。

MarkDownとは

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。
「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として開発された。

MarkDownが書き易いエディタ

リアルタイムでMarkDownを記述しつつ,どのように出力されるかを確認しながら作業が行えるエディタをメモしておく。これらのエディタは特に複雑な設定も必要無く,MarkDownの記述を行うことが出来る。

  • MacDown
  • MOU
  • Atom

MacDownがお勧め。

MarkDownの書き方

見出し

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5

見出し1はh1タグ,見出し5はh5タグによってマークアップされる。ブログを書く際の見出しの使い方の注意点としては多くの場合,ブログのタイトルに使われるのがh1タグでブログの記事のタイトルに使われるのがh2タグなのでブログの本文中で見出しを使いたいときはh3から使うべきである。

イタリック,太字

*イタリック*
_イタリック_
**太字**
__太字__

*もしくは_で文字を囲むとイタリックになり,2つ以上で囲むと太字になる。MarkDownでイタリックになるように記述するとemタグが使用され,太字になるように記述するとstrongタグが使用される。

リスト

* リスト1
* リスト2
* リスト3

- リスト1
- リスト2
- リスト3

1. 番号付きリスト1
2. 番号付きリスト2
3. 番号付きリスト3

*もしくは-を並べるとリストになり,「1.」などの形式のものを並べると番号付きのリストになる。MarkDownでリストになるように記述するとulタグとliタグが使用され,番号付きのリストになるように記述するとolタグとliタグが使用される。

リストのネスト

- ひらがな
    - 「あ」の行
        - あ
        - い
        - う
        - え
        - お 
    - 「か」の行
        - か
        - き
        - く
        - け
        - こ

半角スペースを4つ並べることでリストを構造化することが出来る。

引用

> ここが引用になります。
>> ここが二重引用になります。
>>> ここが三重引用になります。

コードブロック

`echo 'マークダウン';`

```
php echo 'マークダウン'; 
echo 'したいです。';
```

```html:sample.html
<html>
<body>
HTMLを表示したい。
</body>
</html>
```

コードブロックを記述するときは`(バッククォート)でコードを囲む。何のコードかを明示したいときは`(バッククォート)を3つ並べた後ろにそのコードを記述している言語の名前を書く。ファイル名も明示したいときはその後ろに:(コロン)を繋げてファイル名を記述する。

ちなみにMacでは`(バッククォート)は Shiftキー + @キーで入力することが出来る。

テーブル

| Left align | Center align | Right align |
|:---|:---:|---:|
| aaa | bbb | ccc |

上記では3行3列のテーブルを表示することが出来る。2行目の:(コロン)の位置で文字をどちらに寄せるかを指定することが出来る。

水平線

---
***
* * *

-もしくは*を3つ続けると水平線になる。

取り消し線

 ~~取り消し線~~

~~で囲むと取り消し線になる。

リンク

[リンクテキスト](http://example.com/)

aタグによってリンクを出力する。

画像を表示

![Alt属性のテキスト](http://example.com/example.png)

!(エクスクラメーション)から始まり,[]内にAlt属性に持たせたいテキストを記述し,()内に画像のURLを指定する。

リンク付き画像を表示

[![Alt属性のテキスト](http://example.com/example.png)](http://example.com)

リンクと画像の表示を上手く組み合わせた方法で記述すると,リンク付き画像も表示することが出来る。

参考
Markdown – Wikipedia
Markdown書き方メモ – Qiita