一歩ずつ学ぶ

最終更新日:

Markdown記法入門: 使用頻度の高い記法を紹介

目次 Markdown記法

Markdownとは

Markdownとは、ジョン・グル―バーによって作成された 軽量マークアップ言語のひとつ。 「プレーンテキストとして記述した文書を HTML文書又はXHTML文書として変換できるフォーマット」として考案されました。 HTMLの記述にはもちろん、ちょっとしたメモやメール文でも使用できます。 使い慣れるとやめられない便利な記法です。

通常はHTMLサイトを作成する際に使用します。その時は
「Markdown」-> 「ツールでHTMLに変換」というプロセスになります。

ブログによってはMarkdown記法で記述して、そのまま投稿した文書を 自動的にHTMLに変換してくれるブログもあります。

ここでは使用頻度の高い記法と、最後に便利なエディタを紹介します。

見出し <h1>~</h1>

見出しは、先頭に#を付けます。#の数で見出しのレベルを表します。

HTMLで記述する場合、次にMarkdown記法で記述する場合の順に表示します。

HTML

<h1>これはh1見出しです</h1>

<h2>これはh2見出しです</h2>

<h3>これはh3見出しです</h3>

Markdown記法

# これはh1見出しです

## これはh2見出しです

### これはh3見出しです

段落 <p>~</p>

段落は空行によって囲まれた1行又は複数行であらわします。

HTML

<p>これは1行の段落です。</p>

<p>これは2行にわたって書いていますが、
一つの段落です。</p>

<p>これは3行にわたってかいてますが、
これも
1つの段落です。</p>

Markdown記法

これは1行の段落です。

これは2行にわたって書いていますが、
一つの段落です。

これは3行にわたってかいてますが、
これも
1つの段落です。

改行 <br>

改行はテキストの末尾に半角スペースを二つ入れます。

HTML

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

Markdown記法

テキスト (半角スペース2つ)
テキスト

細かい所を言うと、通常HTMLの改行は<br>、XHTMLの改行は<br />です。 ツールによって<br>に変換するか、<br />に変換するかが違いますので 気になる方は注意してください。どちらでもブラウザは解釈してくれますので あまり気にする必要はないと思いますが一応。

強調 <em>~</em>、<strong>~</strong>

強調は*(アスタリスク)か_(アンダースコア)で囲みます。 1つなら<em></em>、2つなら<strong></strong>となります。

HTML

<p>テキストを<em>強調</em>します</p>

<p>テキストを<em>強調</em>します</p>

<p>テキストを<strong>強調</strong>します</p>

<p>テキストを<strong>強調</strong>します</p>

Markdown記法

テキストを*強調*します

テキストを_強調_します

テキストを**強調**します

テキストを__強調__します

リスト <ul>~</ul>

リストは、*(アスタリスク)、+(プラス)、-(ハイフン)のいずれかに 半角スペースを入れます。 リストは入れ子も可能です。まずはシンプルなリストから見てみます。

HTML

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

Markdown記法

* A
* B
* C

次はAの部分を入れ子にしてみます。 タブかスペースで字下げして、記号を変更すれば入れ子になります。

HTML

<ul>
<li>A</li>
  <ul>
  <li>A-1</li>
  <li>A-2</li>
  <li>A-3</li>
  </ul>
<li>B</li>
<li>C</li>
</ul>

Markdown記法

* A
  - A-1
  - A-2
  - A-3
* B
* C

リスト(番号付き) <ol>~</ol>

番号付きのリストを作成する場合は、数値と.(ピリオド)とスペースです。 記入した数値番号は無視され、並び順に番号が振られる点に注意が必要です。

HTML

<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>

Markdown記法

1. A
2. B
3. C

以下のように数値が違っても表示内容は同じです。 HTMLでは単に<li></li>でしかないので、 あくまで並び順に番号が振られます。

3. A
2. B
1. C

リンク <a>~</a>

リンクは角括弧と丸括弧を並べて[リンク文言](URL)と記述します。 ここでは、Yahoo!へのリンクを作成してみます。

HTML

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

Markdown記法

[Yahoo! Japan](http://www.yahoo.co.jp/)

リンクの注意点 (target="_blank"

別のサイトへのリンクを作成するときに、 target="_blank"を指定して別タブで表示することがよくあります。 ですが、Markdownではtarget="_blank"の指定に対応していません。

その場合は自分で<a>~</a>タグを記述するか、 jQueryを使うことで対応できます。 jQueryを使ってtarget="_blank"を自動的に挿入する方法はコチラの記事にあります。

Markdownでリンクにtarget="_blank"を付けて別タブ表示にする

画像 <img>

画像の埋め込みは記述形式がリンクと似ています。 ![alt用テキスト](画像URL)と記述します。 先頭に!(エクスクラメーションマーク)を付けてください。 指定できるのはalt属性とtitile属性です。

HTML

<img src="画像URL" alt="alt用テキスト">

<img src="画像URL" alt="alt用テキスト" title="タイトルテキスト">

Markdown記法

![alt用テキスト](画像URL)

![alt用テキスト](画像URL "タイトルテキスト")

水平線 <hr>

*(アスタリスク)、-(ハイフン)、_(アンダースコア)を3つ以上並べると水平線となります。 記号の間に空白を入れても大丈夫です。

水平線に関しては、*(アスタリスク)を3つ並べた場合にうまく変換されない場合があります。 *(アスタリスク)はリストや強調でも使う記号なので 水平線ではなるべく使わないほうが無難かと思います。 見やすさ、わかり易さの点からは-(ハイフン)が一番おすすめです。

HTML

<hr>

Markdown記法

以下は全て<hr>となります。

*** (アスタリスク3つ)
--- (ハイフン3つ)
___ (アンダースコア3つ)
* * *
- - - -
_ _ _ _ _

コード <code>~</code>

インラインコードはコード部分をバッククオートで囲みます。

例えば、 「インラインコードbackground-color: redのサンプル。」 という文章があって、 「background-color: red」をコード部分だとします。

HTML

<p>インラインコード<code>background-color: red</code>のサンプル。</p>

Markdown記法

コード部分のbackground-color: redをバッククオートで囲みます。

インラインコード`background-color: red`のサンプル。

複数行のコード <pre><code>~</code></pre>

複数行にまたがるコードを記述する場合は行頭に4つ以上のスペースかタブを挿入します。

HTML

<pre><code>function myfunc(){
  var i;
}
</code></pre>

Markdown記法

    function myfunc(){
      var i;
    }

Markdown記法用のエディタ

Backpager - Online Markdown Editor

オンラインエディタです。左側にMarkdown、右側にプレビューとHTMLコードが表示されます。 プレビューとHTMLコードはタブで切り替え。ユーザーインターフェースがわかりやすくて、 初心者でも迷うことなく使えるおすすめのオンラインエディタです。

Online Markdown Editor

これもオンラインエディタです。左側にMarkdown、右側にプレビューとHTMLコードが表示されます。 プレビューとHTMLコードはコンボボックスから選択します。 最初にスタートするときは、右側ボックスの下にあるStart with a blank pageをクリックすると 開始できます。

MarkDown# Editor

Windows環境で使えるエディタです。 Markdown、Markdown Extra記法に対応しています。

テキストエディタ

Mery

テキストエディタですが、アウトライン機能を利用するとMarkdownを記述するエディタとして便利です。 この場合は「Mery(テキストエディタ)」+「Markdown Preview Plus(Chromeの拡張機能)」 という組み合わせで表示を確認します。

(参考記事: Markdown Preview Plusの設定と使い方

↑ PAGE TOP