技術の犬小屋

Webプログラミングを餌に生きる犬のメモ帳

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タグが使用される。emタグやstrongタグはbタグと違い,マークアップ的にきちんとした意味を持っているので多用するのは避けたい。
 

リスト

* リスト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とか表示したい。
```

 
コードブロックを記述するときは,`(バッククォート)でコードを囲む。何のコードかを明示したいときは,`を3つ並べた後ろにそのコードを記述している言語の名前を書く。ファイル名も明示したいときはその後ろに:(コロン)を繋げ,ファイル名を記述する。
 
ちなみにMacでは,`(バッククォート)は Shiftキー + @キー で入力することが出来る。
 

テーブル

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

 
実際にMarkDownを見た通りのテーブルがHTMLで出力される。
 

水平線

---
***
* * *

 
-もしくは*を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

Gitでコミットメッセージを記述する際のルール arrow-right
Next post

arrow-left 英語における代名詞の使い方
Previous post

コメントを残す