LoginSignup
272

More than 5 years have passed since last update.

MarkDown記法

Last updated at Posted at 2015-11-04

MarkDownとは

マークアップは今までHTML等に使ってて良く分かっているが
マークダウンはいったい何でしょう。
知らなかったので調べてみたことを備忘録がてら記述します。

MarkDown

文書を記述するための軽量マークアップ言語のひとつである。
「書きやすくて読みやすいプレーンテキストとして記述した
文書を、妥当なXHTML(もしくはHTML)文書へと変換できる
フォーマット」として、ジョン・グル―バー(John Gruber)と
アーロン・スワーツ(Aaron Swartz)によって考案された。
Markdownの記法の多くは、電子メールにおいてプレーン
テキストを装飾する際の慣習から着想を得ている。
                -- Wikipedia(日本語訳)  

  

単純に言うと文章を書くルール、記述方法ですね。

MarkDown記法に従って書くメリットは?
  • 軽量マークアップ言語
  • 簡単にHTML形式に表現できる
  • 読み易い文章が書ける

一番大きいメリットは上記の通りだと思います。
MarkeDownを使う為には書き方を覚えないと行けないですが
HTMLを一度も使ってみた方はすぐ慣れると思います。

MarkDown記法
  • 見出し:#、##、###
  • 斜体:*ABCDEFG*
  • 強調:**ABCDEFG**
  • 箇条書き: ◦「*」「+」「-」(記号の直後にスペースかタブ要) ◦行頭に数字+ピリオド:番号付け(記号の直後にスペースかタブ要) ◦箇条書き・番号付けの後ろで改行は、「行末スペース*2」で出来る ◦レベル2は、「 - 」。
  • 引用:>
  • リンク:[リンクテキスト](URL "タイトル")
  • 画像:![代替テキスト](画像のURL)
  • 段落内での改行:行末にスペース2つ
  • コードの記述:行頭にスペース4つ またはタブ、バッククオート
  • HTMLタグ:直接タグを書く(一部制限あり)

では、MarkeDownの基本書き方について紹介します。
詳細はMarkeDownの考案者であるジョン・グル―バー(John Gruber)のサイトを参考してください。

見出し #h1〜h6

(ハッシュ)の数と見出しのレベルが一致します。

MarkDown
# 見出しh1
## 見出し h2
### 見出し h3
#### 見出し h4
##### 見出し h5
###### 見出し h6
HTML
<h1>見出し h1</h1>
<h2>見出し h2</h2>
<h3>見出し h3</h3>
<h4>見出し h4</h4>
<h5>見出し h5</h5>
<h6>見出し h6</h6>

[結果]

見出しh1

見出し h2

見出し h3

見出し h4

見出し h5
見出し h6

段落 p

MarkDown
段落を分けるには改行の後に(スペース)

空白を入れるだけ。
HTML
<p>段落を分けるには改行の後に</p>

<p>空白を入れるだけ。</p>

[結果]

段落を分けるには改行の後に

空白を入れるだけ。

改行 br

MarkDown
複数行で改行を入れたい場合は、  (スペース)x2
改行の後に半角スペース2回以上入れる。  (スペース)x2
改行するだけでは、(スペース)x2
改行されないので
HTML
<p>複数行で改行を入れたい場合は、<br>  
改行の後に半角スペース2回以上入れる。<br>    
改行するだけでは、<br>  
改行されないので</p>  

[結果]

複数行で改行を入れたい場合は、

改行の後に半角スペース2回以上入れる。

改行するだけでは、

改行されないので

強調 em strong

MarkDown
強調を示す場合は*(アスタリスク) で囲むか  
_(アンダースコア) で囲む  
*em* は*か_で一つ囲む  
__strongは__ *か_で二つ囲む
HTML
<p>強調を示す場合は*(アスタリスク) で囲むか  <br>
_(アンダースコア) で囲む  <br>
<em>em</em> は*か_で一つ囲む  <br>
<strong>strongは</strong>*か_で二つ囲む</p>

[結果]

強調を示す場合は*(アスタリスク) で囲むか

_(アンダースコア) で囲む

em は*か_で一つ囲む

strongは *か_で二つ囲む

引用 blockquote

MarkDown
> 引用な文章です。
> > 入れ子にすることもできる。
HTML
<blockquote>引用な文章です。
<blockquote>入れ子にすることもできる。</blockquote>
</blockquote>

[結果]

引用な文章です。

入れ子にすることもできる。

リスト(リスト番号なし ) ul、li

MarkDown
リストを示すには
*(アスタリスク),-(ハイフン),+(プラス)のどれかを
入力し、スペースまたはタブで挿入する。
* 上下に空白を一つ入れよう
+ 記号の前に空白をつけると見れなくなるよ
- 記号の後に入れるスペースをお忘れなく
HTML
<p>リストを示すには<br>*(アスタリスク),-(ハイフン),+(プラス)のどれかを<br>
入力し、スペースまたはタブで挿入する。<p>
<ul>
    <li>上下に空白を一つ入れよう</li>
    <li>記号の前に空白をつけると見れなくなるよ</li>
    <li>記号の後に入れるスペースをお忘れなく</li>
</ul>

[結果]

リストを示すには
*(アスタリスク),-(ハイフン),+(プラス)のどれかを

入力し、スペースまたはタブで挿入する。
* 上下に空白を一つ入れよう
+ 記号の前に空白をつけると見れなくなるよ
- 記号の後に入れるスペースをお忘れなく

リスト(リスト番号あり) ol 、li

MarkDown
1. item1 数字は適当でも
3. item3 順番に表示
2. item2 されるよ!
2. item4 便利だね。
HTML
<ol>
    <li>item1 数字は適当でも</li>
    <li>item3 順番に表示</li>
    <li>item2 されるよ!</li>
    <li>item4 便利だね。</li>
</ol>

[結果]

  1. item1 数字は適当でも
  2. item3 順番に表示
  3. item2 されるよ!
  4. item4 便利だね。

リンク

MarkDown
[ローカルホスト](http://localhost)

[Google] [1]
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"
HTML
<a href="http://localhost">ローカルホスト</a><br>
<a href="http://google.com/" title="Google">Google</a>
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> or
<a href="http://search.msn.com/" title="MSN Search">MSN</a>

[結果]

ローカルホスト

Google
Yahoo or MSN

参考リンク

GitHubでブログの作成 - Markdown Markup 違い
文章作成やメモ書きにも便利、Markdown記法
脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術
Markdown記法を使うと文書作成効率が2倍になるよ!
Markdown記法

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
272