富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. ライフハック
  3. ブログ

非エンジニアにもおすすめのMarkdown入門

eyecatch

パソコンをつかって何か文章を書くとき皆さんはどうしているでしょうか?
Wordで綺麗に仕上げる方もいれば、テキストエディタ(メモ帳)でシンプルに書く方もいると思います。

ちなみに私はほとんどの文章をテキストエディタで打ち込みます。 流れとしてはこんな感じです。

  1. エディタを使ってMarkdown形式のテキストを作る
  2. HTMLかPDFに変換する (綺麗に見せたいとき)

Markdownとは?

Markdownはシンプルなマークアップ言語のことで、 HTMLやXMLとは異なり見出しやリストなどをすべてテキストで装飾するものです。

概要についてはWikipediaから引用します。

「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML) 文書へと変換できるフォーマット」として、ジョン・グル―バー(英語版)により作成された。 アーロン・シュバルツ(英語版)も大きな貢献をしている。 Markdown の記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。

Markdown – http://ja.wikipedia.org/wiki/Markdown

本来はMarkdown形式で書いたテキストをHTMLに変換するために使います。
ですがこれはちょっとした文書を書くときにとても便利で、ワープロソフトをつかわなくてもメモ帳だけあればOKです。 (変換しなくても十分便利です!)

Markdownで表現できること

sample-lipsum

HTMLに変換しなくても役に立つもの

  • 見出し
  • リスト(箇条書き)
  • 引用文
  • 水平線
  • 強調
  • インラインコード
  • コードブロック

HTMLに変換すると便利なもの

  • リンク
  • 画像

見出しを表現する

見出しは2種類の表現方法があります。

パターン1) テキストの下に線を引く

見出しにしたいテキストの次の行にハイフン、またはイコールを並べます。
テキストと下線の文字数を揃えると綺麗に見えますが、下線の部分は3文字以上あればOKです。
ポイントはイコール(=)が見出し1, ハイフン(-)が見出し2になることです。

これは一番大きい見出しです
=====================

これは二番目に大きい見出しです
-------------------------

sample-header

パターン2) テキストの前にシャープを置く

こちらはよりシンプルに書けるかもしれません。
シャープ(#)の数が見出しのレベルを表し、この形式では見出しレベルが6段階あります

# これは一番大きい見出しです
## これは二番目に大きい見出しです
### これは三番目に大きい見出しです
#### これは四番目に大きい見出しです
##### これは五番目に大きい見出しです
###### これは六番目に大きい見出しです

sample-header2

リスト(箇条書き)を表現する

パターン1) シンプルな箇条書き

箇条書きの先頭記号としてアスタリスクを使います。
HTMLではUL>LIに相当します。

* アスタリスクを先頭につけるだけで
* 箇条書きを表現します
    * インデントはスペース4文字以上開けます 

sample-ul

パターン2) 順序付きのリスト

順序付きのリストは数字+ピリオド(.)を使います。 HTMLではOL>LIに相当します

1. 手順を表すときにつかうといいですね
2. でも順番に数字を振るのは面倒ですね
6. Markdownから変換する場合は、数字の並びは適当でもOKなんです
9. 変換すると綺麗に1から順番に数字が振られます

sample-ol

引用文を表現する

引用文は行の先頭を > で始めます。これはメールソフトでよく見かけますね! 引用文の中に別の書式を含めることもできます。 HTMLではblockquoteに相当します。

> いつもお世話になっております。〇〇商事の××です。
>
> チェックリストを送ります
>
> * 12時までに書類をFAXする
> * 15時までに銀行へ行く

sample-quote

水平線(罫線)を表現する

段落と段落の間を区切りたいときはハイフン、アスタリスクをたくさん並べます。 間にスペースを挟んでもOKです。 HTMLではHRに相当します。

* * *

*******

- - - -

--------

sample-hr

テキストの強調を表現する

テキストの強調は2段階あり、斜体(HTMLでは<em>)・太字(HTMLでは<strong>)に相当します。アンダーバー(_)またはアスタリスク(*)で挟んだ部分が強調を表します。 1つで挟むか、2つで挟むかで強調度合いが変わります。

ここは_やや強調_したいところ。
ここは**すごく強調**したいところ。

sample-em

コードを表現する

プログラマー以外はコードを表現する必要はないかもしれませんが… 文章中のコードはバックスラッシュ(`)で囲み、段落丸ごとコードの場合は各行の先頭に4つ以上のスペースを入れます。

このソースを実行するには `go foobar.go` と打ち込んでください。

    type Foobar struct {
       baz string
    }
    func (f *Foobar) doEcho (c string) {
        fmt.Println(c)
    }

sample-code

リンクを表現する

リンクを表現するためにはまずキーワードを[]で囲みます。
そしてその直後に()で囲ったURLを置きます。
この形式はHTMLに変換しなければあまり役に立たないかもしれません。

これは[リンク](http://example.com)です。

この[リンク](http://example.com "リンクタイトル")にはタイトルがついています。

sample-link

画像を表現する

こちらもHTMLに変換しなければ役にたたないですが、画像(の埋め込み)も表現できます。 リンクの表現と似ていますが、先頭に!が必要ですのでご注意ください。

![代替テキスト](/path/to/image.png)

![代替テキスト](/path/to/image.png "画像タイトル")

sample-img

すべての要素を含めたサンプル

ここまで説明した書式をつかって忘年会の案内文を書いてみます。

忘年会のお知らせ
--------------

### 日時

平成30年12月20日 19時から

### 会場

◯◯◯ホテル 4F 大宴会場  
[地図はこちら](http://example.com/map/xxxxxxxxxxxxxxxxxx)

### 会費

¥4,000 (新入社員の方は**無料**です)

* * * * * * * * * * * * * * * *

### 特記事項

* お車を運転される方は飲酒なさらないようお願いいたいます。
* 開始時間に間に合わない場合は幹事<staff@example.com>までご連絡ください。
* 当日の様子を撮影した[写真をネットでご覧いただけます][1]。パスワードは`hello`です。

[1]: https://example.com/share/1324 "Example写真共有"

変換してみたい方は

オンラインですぐ試せるサイトをいくつか紹介します。

Online Markdown Editor – Dillinger
http://dillinger.io/

Markable.in
http://markable.in/editor/

Macの方はMouがおすすめです。(この記事はMouで書いて、画像はMouをキャプチャーしたものです)
http://mouapp.com/

さいごに

ちょっとテキストの書き方を工夫するだけで、その文章が後々有効活用できるかもしれないというお話でした。

必要な物はメモ帳だけです。ぜひ試してみてください。

この記事を書いたスタッフ
Kazuyuki Hayashi
Symfony / Node.js / React.js / Swift を中心にテクノロジー系の記事を書きます。趣味はコーヒーです。