KOJIKA17

文章作成やメモ書きにも便利、Markdown記法

HTMLは、手軽なマークアップ言語ですが、開始タグや終了タグなどあり、文章作成やちょっとしたメモ書きには不向きです。

今回紹介するのは、Markdownという軽量なマークアップ言語です。
GitHubのREADMEや、Tumblrなどでも採用されており、様々なCMSのプラグインも存在しています。

汎用性が高く便利な記法なので紹介します。

Markdownとは

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

Markdown - Wikipedia

Markdownの書き方

Markdownには1つのHTMLのタグを示す場合でも、様々な書き方があります。
詳細はMarkdownの考案者 ジョン・グル―バーのサイトに掲載されていますが、その中の一部を紹介します。

見出し

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

Markdown

# 見出し h1

## 見出し h2

### 見出し h3

HTML

<h1>見出し h1</h1>

<h2>見出し h2</h2>

<h3>見出し h3</h3>

段落と改行

空白行で囲まれた1行、または複数行の文章は、ひとつの段落になります。
改行が入っていても、1行以上の空白が入っていなければ、ひとつの段落と見なされます。

Markdown

色は匂へど 散りぬるを

我が世誰ぞ 常ならむ
有為の奥山 今日越えて
浅き夢見じ 酔ひもせず

HTML

<p>色は匂へど 散りぬるを</p>

<p>我が世誰ぞ 常ならむ有為の奥山 今日越えて浅き夢見じ 酔ひもせず</p>

もし複数行で改行を入れたい場合は、改行したい末尾に半角スペースを2スペース以上入れてください。

Markdown

色は匂へど 散りぬるを  (半角スペースを2つ)
我が世誰ぞ 常ならむ  (半角スペースを2つ)
有為の奥山 今日越えて
浅き夢見じ 酔ひもせず

HTML

<p>色は匂へど 散りぬるを<br>
我が世誰ぞ 常ならむ<br>
有為の奥山 今日越えて浅き夢見じ 酔ひもせず</p>

強調

強調を示す場合は、2つの*(アスタリスク)か、_(アンダースコア)で文言を囲みます。

Markdown

色は匂へど **散りぬるを** 我が世誰ぞ

常ならむ 有為の奥山 今日越えて __浅き夢見じ__ 酔ひもせず

HTML

<p>色は匂へど <strong>散りぬるを</strong> 我が世誰ぞ</p>

<p>常ならむ 有為の奥山 今日越えて <strong>浅き夢見じ</strong> 酔ひもせず</p>

リスト

リストを示す場合は、*(アスタリスク), -(ハイフン), +(プラス)のどれかを入力し、スペース、またはタブを挿入します。
リストの途中で、スペース、タブを入れて記号を変更すると、入れ子として扱われます。

Markdown

* 色は匂へど
* 散りぬるを
* 我が世誰ぞ
  - 常ならむ
  - 有為の奥山
* 今日越えて  (半角スペースを2つ)
浅き夢見じ
+ 酔ひもせず

HTML

<ul>
  <li>色は匂へど</li>
  <li>散りぬるを</li>
  <li>我が世誰ぞ
    <ul>
      <li>常ならむ</li>
      <li>有為の奥山</li>
    </ul>
  </li>
  <li>今日越えて<br>浅き夢見じ</li>
  <li>酔ひもせず</li>
</ul>

この他に順序リストとして示す場合は、数字とピリオドで示すことができます。
ただし数字の順列は無視され、並びが優先されます。

Markdown

1. 色は匂へど
2. 散りぬるを
3. 我が世誰ぞ

7. 色は匂へど
5. 散りぬるを
3. 我が世誰ぞ

HTML

<ol>
  <li>色は匂へど</li>
  <li>散りぬるを</li>
  <li>我が世誰ぞ</li>
</ol>

<ol>
  <li>色は匂へど</li>
  <li>散りぬるを</li>
  <li>我が世誰ぞ</li>
</ol>

罫線

3つ以上の*(アスタリスク), -(ハイフン), _(アンダースコア)と半角スペースのみの行は、罫線として扱われます。

Markdown

***

* * *

*****

- - -

---------------------------------------

___

上記の全ての行は<hr>に変換されます。

リンク

角括弧で文言、丸括弧でURLを囲むと、リンクになります。

Markdown

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

HTML

<a href="http://localhost">ローカルホスト</a>

またリンクを変数のように扱うこともできます。
この時、リンクの定義は文中のどこに設置しても構いません。

Markdown

I get 10 times more traffic from [Google] [1] than from
[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

<p>I get 10 times more traffic from <a href="http://google.com/" title="Google">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>

よく使うであろう記法を紹介しました。
紹介したもの以外にも別の書き方や、引用、コードを表すマークアップなども用意されています。

Markdownの例

私はメモ書きでよく使用する場合が多いです。
以下は、メモを取ったMarkdownの例です。

# 鍋会

* 場所: 自宅
* 時間: 13:00


## 買出し(ピェンロー鍋)

[ピェンロー鍋参考](http://localhost)

* 豚バラ肉
* 白菜
* 鶏肉
* 春雨
* 昆布
* しいたけ
* その他
  - 割り箸
  - 皿
  - 紙コップ


## 手順

1. 鍋に昆布としいたけで出しをとる
2. 白菜を切る
  * 葉は大きめに切る
  * 芯の方は細かく切る
3. 作る
4. 食べる

Markdownは、上記のようなメモ書きを行う場合にも簡単に作成することができます。
この程度であれば、私はHTMLに変換せずに閲覧と編集を行っています。

ただし通常の場合は、プレビューで確認を行い、HTMLに変換します。

ツール・プラグイン

MarkdownをHTMLに変換、またはプレビューを行うツールは色々あります。

いくつか挙げましたが、上記以外にもiPhoneやAndroid用など、ツールはもっと多くあります。 自分の利用シーンに合せて、探してみると面白いかもしれません。

Markdownの利点

Markdownの利点は、書くだけなら特別なツールを必要としない点です。WordなどのGUIアプリケーションの煩わしいマウス操作を行わずに、普通のテキストエディタでも見出しやリストを明確にし、文章を作成していくことができます。
さらにMarkdown専用のアプリケーションを使用すれば、さらに可読性が増し、文章の作成や整理が行いやすくなります。

複雑なHTMLの作成は難しいですが、単純な文章であれば、Markdownで十分です。
私は文章の作成やメモ書き、セミナーでも多用しています。セミナーはMouを使用する場合が多いですが、ちょっとしたメモなら拡張子を.txtにしたままでDropboxに入れ、閲覧・編集している場合が多いです。

HTMLが多少書ける人であれば、学習時間もそれほどかからないと思います。
文章やメモを多くとるという方は習得してみてはいかがでしょうか?