HTML 直書きよりはるかに早くブログを書ける Markdown 記法厳選5つ

photo credit: peteoshea via photopin cc
photo credit: peteoshea via photopin cc

皆さんは Markdown ってご存知でしょうか?読みやすさと書きやすさを意識して設計された軽量マークアップ言語で、シンプルな記法で簡単に HTML 文書を書くことができます。自分は HTML を直書きするのをやめ、Markdown に移行してからブログの記事を効率よく、そしてはるかに早く書けるようになりました。今回はブログの執筆に使える5つの記法をピックアップしてお伝えします。

目次

  1. Markdown とは
  2. 使い方
  3. 記法1: パラグラフ
  4. 記法2: 見出し
  5. 記法3: リスト
  6. 記法4: リンク
  7. 記法5: 引用
  8. HTML と併用すると便利
  9. 参考ページ

Markdown とは

Markdown について、Wikipedia では次のように説明されています。

Markdown は、文書を記述するための軽量マークアップ言語のひとつである。

「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グルーバー(John Gruber)により作成された。

via Markdown – Wikipedia

ポイントは「書きやすくて読みやすい」と「HTML 文書に変換できる」の2点。自分で HTML タグを書かなくても、最後にまとめて変換してくれるので文章の執筆に専念しやすい環境をつくれます。

使い方

では、どうやって Markdown を使うのかですが、単純に Markdown に対応したテキストエディタを使うのが1番手っ取り早いです。iPhone で言えば、Drafts, Textwell, Byword など、対応アプリは数多くあります。Byword は Mac アプリもあります。

Markdown に対応したエディタで Markdown 記法に則って文章を書き、プレビューして問題なければ HTML に変換。あとはブログの投稿画面にコピー&ペーストするだけです。

記法1: パラグラフ

Markdown の公式ドキュメントはそれなりのボリュームがありますが、実際にブログの記事部分で使う HTML タグはそんなに多くありません。これから説明する5つの記法を覚えるだけでも多くの記事に対応できると思います。

最初はパラグラフ。HTML では <p>テキスト・・・</p> ですが、すべての段落に <p> タグを振るのは本当に手間ですよね。Markdown なら、パラグラフとパラグラフの間に空白行を入れるだけで済みます。

Markdown:

1つ目のパラグラフ・・・

2つ目のパラグラフ・・・

このように書いておくだけで、次のように変換されます。

HTML:

<p>1つ目のパラグラフ・・・</p>

<p>2つ目のパラグラフ・・・</p>

大げさでなく、<p> タグを手入力するのを省くためだけに Markdown を使っても十分にメリットを感じられるはずです。

記法2: 見出し

HTML で <h1>テキスト</h1> などと表現する見出しは、Markdown では # を使って表せます。# の後に半角スペースを1つ入れ、見出しのテキストを続けます。# の数で見出しのレベルを変えられます。

Markdown:

# レベル1の見出し
## レベル2の見出し
・
・
・
###### レベル6の見出し

HTML:

<h1>レベル1の見出し</h1>
<h2>レベル2の見出し</h2>
・
・
・
<h6>レベル6の見出し</h6>

記法3: リスト

Markdown は箇条書きのリストも簡単に書くことができます。アスタリスク(*)以外にプラス記号(+)やハイフン(-)も使えます。

Markdown:

* リスト項目1
* リスト項目2
* リスト項目3

HTML:

<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>

番号付きのリストにしたい時は記号ではなく、数字とピリオドで始めます。

Markdown:

1. リスト項目1
2. リスト項目2
3. リスト項目3

HTML:

<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>

記法4: リンク

リンクはいろいろな書き方ができますが、1番基本的なのは次の記法です。

Markdown:

[リンクにするテキスト](http://example.com)

HTML:

<a href="http://example.com">リンクにするテキスト</a>

記法5: 引用

引用文はメールと同じ感覚で書けます。

Markdown:

> 引用するテキスト・・・

HTML:

<blockquote>
<p>引用するテキスト・・・</p>
</blockquote>

複数の段落の引用もできます。

Markdown:

> 引用文の1つ目のパラグラフ・・・
>
> 引用文の2つ目のパラグラフ・・・

HTML:

<blockquote>
<p>引用文の1つ目のパラグラフ・・・</p>

<p>引用文の2つ目のパラグラフ・・・</p>
</blockquote>

HTML と併用すると便利

いかがでしたでしょうか。この5つの記法を使うだけでも、たいていの記事は書けてしまいます。

Markdown の文章内に通常の HTML を書くこともできるので、自分は Markdown で表現できる部分は Markdown で書き、Markdown が対応していない HTML の表現だけ 直接 HTML で書くようにしています。たとえば id や class(クラス)の指定はできないので、それは自分で書いています。

Markdown:

通常のテキスト<span class="my-class">クラスを適用するテキスト</span>通常のテキスト・・・

HTML:

<p>通常のテキスト<span class="my-class">クラスを適用するテキスト</span>通常のテキスト・・・</p>

ブロック要素も書けます。

Markdown:

通常のパラグラフ

<div>ブロック要素</div>

HTML:

<p>通常のパラグラフ</p>

<div>ブロック要素</div>

Markdown に慣れるまでの間は、まず文章の骨組みを Markdown で書いてしまって、HTML にコンバートしてから、必要な HTML タグを付け足していくと書きやすいと思います。

参考ページ

これ以外にも、Markdown には強調表現やソースコード、テーブルなどを書くための記法があります。

自分はもともとブログを始めた時は Markdown で書いていて、途中から HTML 直打ちに切り替えたのですが、現在は Markdown と HTML を併用する書き方に落ち着きました。

わざわざ自分で HTML タグを書かなくても、Markdown でできることは Markdown に任せてしまった方が楽ですし、文章の見た目がきれいなので執筆や推敲もやりやすいです。

気になる方は次の公式サイト(英語)や、日本人の方が公式サイトを翻訳されたページをご覧になってみてください。