• web制作
  • Markdown

【Markdown】知っておくと捗るマークダウン記法

熊谷
このエントリーをはてなブックマークに追加

どうも熊谷です [▓▓]=͟͟͞͞=͟͟͞͞ εː)

マークアップという言葉はご存知かもしれませんが、その逆のマークダウンってご存知ですか?
今回はマークダウン記法についてご紹介してみようと思います。
ある程度の初級者向け記事となりますが、たまに「どう書くんだっけ…」と忘れることもあるので、分かる方は復習程度に流し読みしていただければと思います。
※自分の備忘録がてらの記事なのはナイショ(^p^)

マークダウン記法とは

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

Markdown – Wikipedia

HTMLなどのマークアップ言語は開始〜終了タグがあったり、簡単な文章作成やメモには不向きですよね。
以下に簡単な例を挙げます。

HTMLにて記述すると上記のようなフォーマットになると思います。
※メモ程度でHTML使う人居ないと思いますが。。

さて、上記例をマークダウン記法にて記述するとこうなります。


今夜の晩ご飯
# 今夜はカレー!
## 以下の材料を買う!
* 鶏もも肉
* 玉ねぎ
* にんじん
* じゃがいも

※タイトルはエディタにもよりますが一行目の文章がタイトル扱いになる物もあります。

それでは実際に、マークダウンでの記述・HTMLで記述した場合・実際のプレビューをサンプル付きで紹介していきます。
※サンプルのHTMLは[Play]をクリックすると実際のプレビューを確認出来ます。

マークダウンの記述方法

見出し

頭に#をつけることで作ることが可能です。h1〜h6まで対応します。

  • # 見出し(h1)
  • ## 見出し(h2)
  • ### 見出し(h3)
  • #### 見出し(h4)
  • ##### 見出し(h5)
  • ###### 見出し(h6)

段落と改行

段落は1行以上の空行が入って入れば段落を分けることが可能です。ただの改行だとひとつの段落と見なされてしまいます。
また、改行は行末に半角スペースを2回入れることで可能となります。

ポラーノの広場

あのイーハトーヴォのすきとおった風、  [半角スペース2回]
夏でも底に冷たさをもつ青いそら、  [半角スペース2回]
うつくしい森で飾られたモリーオ市、

郊外のぎらぎらひかる草の波。

テキストの強調

*(アスタリスク)か _(アンダースコア)で囲むとイタリック、
2つの*(アスタリスク)か _(アンダースコア)で囲むとボールドになります。
また3つで囲むと斜体・太字となります。

  • _イタリック その1_
  • *イタリック その2*
  • __ボールド その1__
  • **ボールド その2**
  • ___イタリック・ボールド___

水平線

3つ以上の*(アスタリスク)か -(ハイフン)か _(アンダースコア)は、水平線になります。

  • ****
  • - – – – -
  • _ _ _ _ _ _ _ _ _ _

引用

文頭に>を入れることで引用文となります。
上下に空行がそれぞれ入ってないと正しく表示されないので注意。

>ポラーノの広場
>>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、 郊外のぎらぎらひかる草の波。

コード表示

バッククオート(`)で対象を囲むことでコード表示ができます。また、複数行のコード表示したい場合にはそれぞれの行頭にタブか4つ半角スペースを入れます。

`ver hoge = "hello world!",`

var i = 0; while (i < 10) { console.log(i); i++; }

リスト

+(プラス)か *(アスタリスク)か -(ハイフン)を行頭に入れるとリストとなります。
入れ子を作る際にはタブを入力することで作ることができます。

    
    
  • + 今夜の晩ご飯
  • * 今夜はカレー!
  • - 以下の材料を買う!
  • + 鶏もも肉
  • * 玉ねぎ
  • - にんじん
  • + じゃがいも

数字によるリストも可能です。
最初に数字が入っていれば、以降数字リストとなります。
※入れ子にも同様の処理を行います。

    
    
  • 1. 今夜の晩ご飯
  • + 今夜はカレー!
  • + 以下の材料を買う!
  • * 鶏もも肉
  • 1. 玉ねぎ
  • - にんじん
  • + じゃがいも

定義リストも作れます。
「タイトル」、改行後に「: コンテンツ」、のフォーマットで作ることが出来ます。
※定義語や説明文は複数重ねることもできます。

カレー
: カレー(英: Curry、カリー)は、複数の香辛料を使って野菜や肉などのさまざまな食材を味付けした料理。

インド
: インド料理は香辛料を多用するため、外国人の多くはインド料理の煮込み料理を「カレー」と認識している。しかし外国人がカレーと呼ぶインドの煮込み料理は、サーグ、サンバール、コルマ、ダールなど、それぞれに固有の名称があり、「カレー」という料理はない。ただし、インドの観光客向けのレストランやインド国外のインド料理店では便宜上、メニューに「○○カレー」という表記をしていることも多い。

リンク

括弧でそれぞれ囲むことで作成出来ます。
[タイトル](URL)

[合同会社チームサンタ](http://teamsanta.info)

注意

Markdown記述に対応しているアプリケーションで記述しないと変換できないのは勿論なのですが、サービス(ソフトウェア)によっては上記説明した物が使えない場合があるようなので、それぞれのリファレンスをご確認することをお薦めします。

リンク集

まとめ

全部紹介すると長くなってしまいそうだったので、よく使いそうな記法をまずは紹介させていただきました。
今更感がありましたが、マークダウン記法は覚えておいて損は無いかと思います。
様々なサービスでもマークダウン対応されていますし、HTMLにて記述しないと大変なコンテンツもある程度マークダウンで記述できますし、タグをいちいち書いている時間が削減できます。
※まぁHTMLもHaml使ったりとか短縮できる書き方など色々あるんですが。。

ちなみにWordpressやMovableTypeなどの記事もマークダウンで書けると思いますので試してみると良いかと思います。

それでは、また (‘、3_ヽ)_

rss登録
このエントリーをはてなブックマークに追加