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

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

  • 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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

タグクラウド

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