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

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

2016-01-19 最終更新日:2016-01-20

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

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∞

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

最近の投稿

アイキャッチ
とっとりバーガーフェスタ2017(第7回)に行ってきました

去年も載せましたが今回も行ってきたので感想などを書いてみたいと思います。[⇒去年の記事はコチラ](/blog/private/2016/10/11/burgerfesta.html) 今年も行...

09 Oct 2017

アイキャッチ
ワードプレスでテーマの編集が出来ない対処方法

さて、今回はワードプレスのテーマ編集についてです。テスト用サイトでふと気がついたのですが、あれ?テーマ編集が出来なくなっている!セキュリティ上なくしたのかと思いました。現状のバージョンは4.8....

06 Oct 2017

アイキャッチ
新しくなったfotorの使い方

fotorのサイトが一新されました。HTML5で書き直されて高いパフォーマンスが期待できます。 新しくなった部分のみ記載しておりますので機能的に見たい方は[⇒以前の記事](/blog/app/...

01 Oct 2017

アイキャッチ
WordPressのプラグインReallySimpleSSLを手動で解除する方法

さて今回もトラブル系です。Let's Encryptがいろいろなサーバーに取り入れられ手軽にSSL化が出来るようになりましたが、まだ対応できていないサーバーも多いです。 ワードプレスを入れた際...

23 Sep 2017

アイキャッチ
バックドア型ウィルスにかかった時のワードプレスセキュリティ対策

今回はセキュリティについてご紹介したいと思います。ワードプレスでのセキュリティ対策って何をすれば良いの?という方も多いかと思います。相談が多かったので記事にしました。 ほんとうは怖いワードプレ...

14 Sep 2017

著者

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

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

タグクラウド

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