このサイトはMarkdownを使用して記述しています。
まだ使い始めたばかりですが、これからサクサク記事を書いていくために
Markdown記法についてまとめてみました。

Markdownとは

  • 文書を記述するための軽量マークアップ言語
  • HTMLタグを記述するより簡単
  • メモ書きにも便利
  • 最近流行りのAtomエディタに標準でMarkdownをプレビューする機能がある

よく使う記法一覧

Markdown HTML
見出し 行頭に「#」(1~6個) <h1>~<h6>
改行 行末半角スペース2個以上 <br>
段落 行間に空行 <p>
強調(イタリック) *文字列* or _文字列_ <em>
強調(Bold) **文字列** or __文字列__ <strong>
強調(イタリック&Bold) ***文字列*** or ___文字列___ <strong><em>
打ち消し ~~文字列~~ <del>
リスト(順序なし) 行頭に「*」「-」「+」のいずれか <ul><li>
リスト(順序付き) 行頭に数字と.(ピリオド) <ol><li>
リンク [リンク文字列](URL) <a>
画像 ![代替テキスト](URL “タイトル”) <img>
引用文 行頭に「>」 <blockquote>
インラインコード `インラインコード` -
コードブロック ```
コードブロック
```
-

見出し

行頭に「#」をつけると見出しになります。「#」の個数が見出しのレベルに対応します。 h1とh2はそれぞれ「=」、「-」2個以上でも可。

書き方
# レベル1
## レベル2
レベル1
==
レベル2
--
### レベル3
#### レベル4
##### レベル5
###### レベル6
HTML出力

<h1>レベル1</h1>
<h2>レベル2</h2>
<h1>レベル1</h1>
<h2>レベル2</h2>
<h3>レベル3</h3>
<h4>レベル4</h4>
<h5>レベル5</h5>
<h6>レベル6</h6>

実際の表示

レベル1

レベル2

レベル1

レベル2

レベル3

レベル4

レベル5
レベル6

改行

行末に半角スペース2つ以上入れると改行になります。

書き方
1行目
2行目 ←半角スペース1個
3行目  ←半角スペース2個
4行目
…
HTML出力

1行目 2行目 3行目<br> 4行目 …

実際の表示

1行目 2行目 3行目
4行目 …

段落

行間に空行を入れると段落になります。

書き方
段落1の文章です。

段落2の文章です。
HTML出力

<p>段落1の文章です。 </p>
<p>段落2の文章です。 </p>

実際の表示

段落1の文章です。

段落2の文章です。

強調

強調した文字列を 「*」 または 「_」 で囲むと強調表示されます。
通常の強調(em)は1つ、強い強調(strong)は二つで囲みます。
三つで囲むとstrongとemが適用されます。
Internet Explorerなど多くのブラウザでは<em>はイタリック体、<strong>は太字で表示されます。

書き方
*baseball* と *soccer* が好き。   
**カレー** と __ステーキ__ が好き。
***Japan*** と ___America___ 。
HTML出力

<em>baseball </em><em>soccer </em>が好き。
<strong>カレー </strong><strong>ステーキ </strong>が好き。
<strong><em>Japan </em></strong><strong><em>America </em></strong>

実際の表示

baseballsoccer が好き。
カレーステーキ が好き。
JapanAmerica

打ち消し

打ち消したい文字列を「~」二つで囲むと打ち消しになります。

書き方
私の年齢は~~48歳~~50歳です。   
実際の表示

私の年齢は48歳50歳です。

リスト

「*」、「-」、「+」のいずれかの後に半角スペースまたはタブを入れるとリスト表示されます。
階層にするには半角スペース4個必要。
三種類の記号を混在させてもOK。
順序付きリストを表示する場合は「1.」のように数字とピリオドにします。
ただし、入力した数字に関わらず1からの連番が割り当てられます。

書き方
# 「-」のみ使用して階層表示
- 第1章
  - 第1節
    - 第1章
    - 第2章
  - 第2節
    - 第1章
- 第2章
  - 第1節

1. りんご
2. バナナ
3. ぶどう

HTML出力

<ul>
  <li>第1章
    <ul>
      <li>第1節
        <ul>
          <li>第1章</li>
          <li>第2章</li>
        </ul>
      </li>
      <li>第2節
        <ul>
          <li>第1章</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>第2章
    <ul>
      <li>第1節
    <ul>
  <li>
<ul>

<ol>
  <li>りんご</li>
  <li>バナナ</li>
  <li>ぶどう</li>
</ol>

実際の表示
  • 第1章
    • 第1節
      • 第1章
      • 第2章
    • 第2節
      • 第1章
  • 第2章
    • 第1節
  1. りんご
  2. バナナ
  3. ぶどう

リンク

リンク文字列を[]で囲み直後にURLを()で囲むとリンクになります。

書き方
[Yahoo!](http://www.yahoo.co.jp/)

HTML出力

<a href=“http://www.yahoo.co.jp/" >Yahoo!</a>

実際の表示

Yahoo!

画像

!の後に代替テキストを[]で囲み、直後にURLと"で囲んだタイトルを()で囲むとリンクになります。
タイトルは省略可。

書き方
![サンプル画像](画像URL "サンプル")
HTML出力

<img href=“画像URL” alt=“サンプル画像” title=“サンプル” >

実際の表示

画像にカーソルを合わせるとtitleで指定した文字列が吹き出しで表示されます。 サンプル画像

引用文

「>」で始まる行は引用文になります。

書き方
>Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。  
>本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
HTML出力

<blockquote>
<p>
Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。<br>
本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
</p>
</blockquote>

実際の表示

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。
本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

ソースコード

インラインで文中にソースコードを表示する場合は、「`」(バッククオート)で囲みます。複数行のコードブロックの場合は、「`」(バッククオート)三つで囲みます。

書き方

`function hoge(){alert(“Hello”);}`

```
function hoge(){
alert(“Hello”);
}
```

実際の表示

function hoge(){alert("Hello");}

function hoge(){  
    alert("Hello");  
}