ウェブディレクターが覚えておきたいマークダウン記法

Jan 19, 2016

ウェブディレクターが覚えておきたいマークダウン記法

2016-01-19 最終更新日:2016-01-20
markdown マークダウン web HTML

さてマークダウンとは何でしょうか?

HTMLに変換できる軽量なマークアップ言語なんです。 実はこのブログもマークダウンで書いています。

HTMLでタグを書くのはちょっと面倒なのでこの記法を覚えると割とらくにHTMLがかけます。といってもすべてのタグを網羅しているわけではないのでちょっとしたメモ書きやブログなどでよく利用されています。マークダウン対応エディタなどで確認が出来ます。

以下エディタAtom、MarkDown#Editor、MarkdownPad、MacDown、sublimetext、etc…私はSublimetextです。その他簡単に確認できるブラウザ上で編集できたりするブラウザエディタなどもあります。Stackedit、Dillinger、Marxico、Wri.peなど結構探せばあります。chromeのブラウザならMarkdown Preview Plusというエクステンションもあります。

覚えるルールはだいたい10個ぐらいなので比較的に覚えやすいですね。


スポンサーリンク


マークダウン

まずは見出しから

1.見出し

#と半角スペースでh要素になり#の数でh1~h6が決まります。タイトルの下に=(イコール)でh1-(ハイフン)でh2などの表示も可能。

Markdown

# 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5
###### 見出しh6

見出しh1違うパターン-文字の下に=が在るとh1扱いになります
=
見出しh2違うパターン(3つ以上つけると水平線になる)
-

HTML

見出しh1

見出しh2

見出しh3

見出しh4

見出しh5
見出しh6

見出しh1違うパターン-文字の下に=が在るとh1扱いになります

見出しh2違うパターン(3つ以上つけると水平線になる)


2.改行

段落は一段落空ける、改行は半角スペース2つ

Markdown

始めの文章の[][]  
ここで改行

段落を開けたのでpタグが入ります。

HTML

始めの文章の[][]
ここで改行

段落を開けたのでpタグが入ります。


3.水平線

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

Markdown

----
____
****

HTML





4.強調

強調を示す場合は、*(アスタリスク)か、_(アンダーバー)で文言を囲みます。個数で強調が変わります。1つ(em)2つ(strong)3つ(strong+em)打ち消し線は~チルダ2つで囲む

Markdown

ここの文章は*アクセント*です。
ここの文章は**太字**です。
ここの文章は***アクセント太字***です。
これは~~打ち消し線~~です。

HTML

ここの文章はアクセントです。
ここの文章は太字です。
ここの文章はアクセント太字です。
これは打ち消し線です。


5.リスト

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

Markdown

* リスト1
  - リスト1-2
  - リスト1-3
* リスト2
  + リスト2-2
* リスト3

1. 番号付きリスト1
1. 番号付きリスト2
1. 番号付きリスト3
1. 番号付きリスト4
1. 番号付きリスト5

ホームページ
: インターネットの用語で、ウェブサイトの表紙にあたるフロントページのこと。またはFacebookやTwitterなど、ユーザー毎に表示が異なるウェブサイトのページ。

HTML

  • リスト1
    • リスト1-2
    • リスト1-3
  • リスト2
    • リスト2-2
  • リスト3
  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3
  4. 番号付きリスト4
  5. 番号付きリスト5
ホームページ
インターネットの用語で、ウェブサイトの表紙にあたるフロントページのこと。またはFacebookやTwitterなど、ユーザー毎に表示が異なるウェブサイトのページ。

6.リンク

リンクは主に下記の4つのパターンに分けてみました。

  • 自動リンク
  • インラインリンク
  • 外部参照リンク
  • 画像

6-1.自動リンク

<リンクアドレス>でURLリンクを表記します。

Markdown

<http://www.google.com>
<info@php-fan.org>

HTML

6-2.インラインリンク

[名前](アドレス "タイトル")でリンクを表記します

Markdown

[グーグル](http://www.google.com/ "グーグルのアドレスだよ")

HTML

6-3.外部参照リンク

URLを注釈化にして見やすくしたパターンです。数値じゃなくてアルファベットなどでも良いです。

Markdown

主な検索エンジンは[グーグル][1]を主力エンジンとして[Yahoo!JAPAN][2]や[MSN][3]等があります。

[1]: http://google.com/ "Google"
[2]: http://www.yahoo.co.jp/ "Yahoo!Japan"
[3]: http://jp.msn.com/ "MSN"

HTML

主な検索エンジンはグーグルを主力エンジンとしてYahoo!JAPANMSN等があります。

6-4.画像

![alt](画像パス "画像タイトル1")で画像を表記します。

Markdown

![イメージテキスト](/common/img/blog/sample11.jpg "画像タイトル1")

[![リンク画像](http://its-office.jp/common/img/blog/sample12.jpg "画像タイトル2")](http://its-office.jp/)

![外部参照画像][img]

[img]:http://its-office.jp/common/img/blog/sample13.jpg "画像タイトル3"

HTML

イメージテキスト

リンク画像

外部参照画像


7.引用

文頭に>を使うことで引用になります。メール時の引用と同じです。 上下には空行がないと正しく表示されません。 引用の中に別のマークダウンを使用することも可能です。

Markdown

> 引用文  
> 引用文  
> 引用文  

>> 引用の引用文  
>> 引用の引用文  

HTML

引用文
引用文
引用文

引用の引用文
引用の引用文


8.コードブロック

バッククオート(`)でコードブロックができます。 タブか4つの半角スペースで複数行のコードブロックができます。

Markdown

`var x = "This is text";`

↓タブ
function echo(){
	var v = "This is Outer";
	return function (){
	alert(v);
	};
}
var s =  echo();
s();

```bootstrap
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
	├── glyphicons-halflings-regular.eot
	├── glyphicons-halflings-regular.svg
	├── glyphicons-halflings-regular.ttf
	├── glyphicons-halflings-regular.woff
	└── glyphicons-halflings-regular.woff2
```

↓スペース
$ sudo gem install jekyll
$ jekyll new myblog
$ cd myblog
$ jekyll serve
# => http://localhost:4000 を見てください

HTML

var x = "This is text";


↓タブ
function echo(){
	var v = "This is Outer";
	return function (){
	alert(v);
	};
}
var s =  echo();
s();
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

↓スペース
$ sudo gem install jekyll
$ jekyll new myblog
$ cd myblog
$ jekyll serve
# => http://localhost:4000 を見てください

9.テーブル

テーブル記法は下記参照

Markdown

名前 | 好きな食べ物 | 年齢  |場所
:----|:------------:|------:|-----
田中 | カレーライス | 29    |東京
斉藤 | お寿司       | 47    |神奈川
中田 | ハンバーグ   | 32    |埼玉
佐藤 | スパゲッティ | 41    |千葉

HTML

名前 好きな食べ物 年齢 場所
田中 カレーライス 29 東京
斉藤 お寿司 47 神奈川
中田 ハンバーグ 32 埼玉
佐藤 スパゲッティ 41 千葉

10.エスケープ

\(バックスラッシュ)でエスケープ。例えば# はh1属性ですが#でシャープの記号を利用することができます。h要素にならない。

\# h要素

以上になります。シンプルでとても簡単ですね。あまり複雑なことはできません。id要素とかclass要素など入れたい場合はタグで書くしかないのですがmarkdownはhtmlタグを混在させても構いません。

よく使われるのは見出し、強調、リストとリンクぐらいですかね。例えばレシピなどを考えた時などに下記のように書いてもいいですよね。

Markdown

# 材料 (20×20cm型)

* 日清エキストラバージンココナッツオイル_40g_
* チョコレート(スイート)_110g_
* 卵2個
* 三温糖またはきび砂糖_80g_
* レーズン_50g_
* くるみ_50g+30g_

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

## 【A】
* 薄力粉_60g_
* ベーキングパウダー小さじ_1/2_

[詳しい作り方はこちら](http://cookpad.com/recipe/3535443)

HTML

材料 (20×20cm型)

  • 日清エキストラバージンココナッツオイル_40g_
  • チョコレート(スイート)110g
  • 卵2個
  • 三温糖またはきび砂糖_80g_
  • レーズン_50g_
  • くるみ_50g+30g_

【A】

  • 薄力粉_60g_
  • ベーキングパウダー小さじ_1/2_

詳しい作り方はこちら


ぜひこの記法使ってみてください。


∞Tadashi Suyama∞

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
使いやすいメモツールDropBoxPaper

軽量なメモ帳はGoogleKeepを使っておりましたが[クラウド時代にオススメしたいメモアプリ](/blog/memo/2016/03/12/cloud-memo.html)で感想を述べておりま...

15 May 2017

アイキャッチ
みろくの里 ダイナソーパーク

行ってみた率直の感想は蒜山高原センタージョイフルパークと感じは似ています。昔ながらのアトラクションといった感じです。いつか来た道という昭和30年代の昔ながらの道といったところもあります。こどもは...

07 May 2017

アイキャッチ
テキスト選択させないCSS

今回はcssのプロパティのご紹介です。 サイトによってですが選択できないサイトとかを見たことがないでしょうか?あれ?選択できないぞ。。。 これはCSSで制御しているからなんです。いやJava...

30 Apr 2017

アイキャッチ
GIF Brewery3の使い方をご紹介

GIF Brewery3のご紹介です。Macしかないアプリです。そして有料です。600円 ビデオファイルからgifファイルを作成することができ、また、iOSやMac画面録画からGIFを作成する...

25 Apr 2017

アイキャッチ
オンラインツールPDF Candyのご紹介

アイスクリームアップス([Icecream Apps - Free & tasty software!](http://icecreamapps.com/))というソフトウェア開発の会社...

15 Apr 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

markdown マークダウン web HTML
フッターイメージ