カテゴリー WEB

ディレクターが知っておいて欲しい10個のMarkdown-マークダウン記法

by 管理人コメントをどうぞ (ディレクターが知っておいて欲しい10個のMarkdown-マークダウン記法)

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

マークダウンは、軽量マークアップ言語のひとつです。プレインテキスト文書をhtmlに変換する言語です。
覚える要素が少ないので学習コストが低いです。そして読み書きしやすい文章というのが特徴です。

しかしマークダウン記法は万能ではないので直接HTMLを記述して補うことも可能です。
マークダウンとhtmlが混合になっても問題はありません。

またGithubやBitBucketなどでも標準的なマークアップ言語として採用されており
READMEやWikiなどの記述でマークダウンをお見かけする機会は多いと思います。

マークダウン用のソフトも多数有ります。
windowsならMarkDown#EditorやMarkdownPadなど
Mac用アプリKobitoやMarsEditやMultiMarkdown Composerなどなど
chromeの拡張でもTextdownというアプリがあります。
sublimeTextにもMarkdownPreviewというプラグインがあります。

最近よくマークダウンに関する記事を見かけるので自分なりにまとめてみました。

スポンサーリンク

記法1 .見出しヘッダー(h1~h6)

#と半角スペースでh要素になり#の数で1～6が決まります。タイトルの下に=でh1-でh2などの表示も可能。

Markdown
# 見出し-h1
## 見出し-h2
### 見出し-h3
#### 見出し-h4
##### 見出し-h5
###### 見出し-h6
見出しh1違うパターン
===============
見出しh2違うパターン
---------------
HTML
<h1>見出し-h1</h1>
<h2>見出し-h2</h2>
<h3>見出し-h3</h3>
<h4>見出し-h4</h4>
<h5>見出し-h5</h5>
<h6>見出し-h6</h6>
<h1>見出しh1違うパターン</h1>
<h2>見出しh2違うパターン</h2>
実際の表示

見出し-h1

見出し-h2

見出し-h3

見出し-h4

見出し-h5
見出し-h6

見出しh1違うパターン

見出しh2違うパターン

記法2 段落と改行

空白行で囲まれた1行や複数行のかたまりの文章は、ひとつの段落になります。
半角スペースが２つ以上あればそこで改行がされます。
因みにサンプル文章はカール・ブッセの「山のあなた」の訳を引用しております。

Markdown

山のあなたの空遠く  (半角スペースを2つ)
「幸」（さいはひ）住むと人のいふ。

噫（ああ）、われひとゝ尋（と）めゆきて、  (半角スペースを2つ)
涙さしぐみ、かへりきぬ。  (半角スペースを2つ)
山のあなたになほ遠く  (半角スペースを2つ)
「幸」（さいはひ）住むと人のいふ。
HTML
<p>山のあなたの空遠く<br>
「幸」（さいはひ）住むと人のいふ。</p>
 
<p>噫（ああ）、われひとゝ尋（と）めゆきて、<br>
涙さしぐみ、かへりきぬ。<br>
山のあなたになほ遠く<br>
「幸」（さいはひ）住むと人のいふ。</p>
実際の表示

山のあなたの空遠く
「幸」（さいはひ）住むと人のいふ。

噫（ああ）、われひとゝ尋（と）めゆきて、
涙さしぐみ、かへりきぬ。
山のあなたになほ遠く
「幸」（さいはひ）住むと人のいふ。

記法3 水平線（hr）

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

Markdown
_ _ _ _ _ _ _
---
* * * * *
- - -
_ _ _

上記の全ての行は

に変換されます。

実際の表示

記法4 強調（em,strong）

強調を示す場合は、*(アスタリスク)か、_(アンダースコア)で文言を囲みます。

Markdown
山のあなたの空遠く *「幸」（さいはひ）* 住むと人のいふ。

山のあなたの空遠く __「幸」（さいはひ）__ 住むと人のいふ。

山のあなたの空遠く ***「幸」（さいはひ）*** 住むと人のいふ
HTML
<p>山のあなたの空遠く <em>「幸」（さいはひ）</em> 住むと人のいふ。</p>
<p>山のあなたの空遠く <strong>「幸」（さいはひ）</strong> 住むと人のいふ。</p>
<p>山のあなたの空遠く <strong><em>「幸」（さいはひ）</em></strong> 住むと人のいふ</p>
実際の表示

山のあなたの空遠く 「幸」（さいはひ） 住むと人のいふ。

山のあなたの空遠く 「幸」（さいはひ） 住むと人のいふ。

山のあなたの空遠く 「幸」（さいはひ） 住むと人のいふ

記法5 引用(blockquote)

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

Markdown
> 山のあなたの空遠く  
> 「幸」（さいはひ）住むと人のいふ。  
> 噫（ああ）、われひとゝ尋（と）めゆきて、  
> 涙さしぐみ、かへりきぬ。  
>> 山のあなたになほ遠く  
>> 「幸」（さいはひ）住むと人のいふ。
HTML
<blockquote>
<p>山のあなたの空遠く<br>
「幸」（さいはひ）住むと人のいふ。<br>
噫（ああ）、われひとゝ尋（と）めゆきて、<br>
涙さしぐみ、かへりきぬ。  </p>
<blockquote>
<p>山のあなたになほ遠く<br>
「幸」（さいはひ）住むと人のいふ。</p>
</blockquote>
</blockquote>
実際の表示

山のあなたの空遠く
「幸」（さいはひ）住むと人のいふ。
噫（ああ）、われひとゝ尋（と）めゆきて、
涙さしぐみ、かへりきぬ。

山のあなたになほ遠く
「幸」（さいはひ）住むと人のいふ。

記法6 コードブロック(code)

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

Markdown
`var x = "This is text";`

以下はコードです：

	function echo(){
		var v = "This is Outer";
		return　function (){
			alert(v);
		};
	}
	var s =  echo();
	s();
HTML
<p><code>var x = "This is text";</code></p>
<p>以下はコードです：</p>
<pre><code>function echo(){
    var v = "This is Outer";
    return　function (){
        alert(v);
    };
}
var s =  echo();
s();
</code>
実際の表示

var x = "This is text";

以下はコードです：

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

記法7 リスト（ul ol li dl）

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

Markdown
+ 山のあなたの空遠く
+ 「幸」（さいはひ）
+ 住むと人のいふ。
	- 噫（ああ）、われひとゝ尋（と）めゆきて
	- 涙さしぐみ、かへりきぬ
		* 山のあなたになほ遠く
+ 「幸」（さいはひ）
+ 住むと人のいふ。
HTML
<ul>
	<li>山のあなたの空遠く</li>
	<li>「幸」（さいはひ）</li>
	<li>住むと人のいふ。
		<ul>
			<li>噫（ああ）、われひとゝ尋（と）めゆきて</li>
			<li>涙さしぐみ、かへりきぬ
				<ul>
					<li>山のあなたになほ遠く</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>「幸」（さいはひ）</li>
	<li>住むと人のいふ。</li>
</ul>
実際の表示
  • 山のあなたの空遠く
  • 「幸」（さいはひ）
  • 住むと人のいふ。
    • 噫（ああ）、われひとゝ尋（と）めゆきて
    • 涙さしぐみ、かへりきぬ
      • 山のあなたになほ遠く
  • 「幸」（さいはひ）
  • 住むと人のいふ。

この他に番号付きリストとして示す場合は、数字とピリオドで表示させることができます。
ただし数字の順列は関係ないのですべて1.でも数字リストができます。

Markdown
1. 山のあなたの空遠く
2. 「幸」（さいはひ）
3. 住むと人のいふ。
7. 噫（ああ）、われひとゝ尋（と）めゆきて
6. 涙さしぐみ、かへりきぬ
1. 山のあなたになほ遠く
1. 「幸」（さいはひ） 住むと人のいふ。
HTML
<ol>
  <li>山のあなたの空遠く</li>
  <li>「幸」（さいはひ）</li>
  <li>住むと人のいふ。</li>
  <li>噫（ああ）、われひとゝ尋（と）めゆきて</li>
  <li>涙さしぐみ、かへりきぬ</li>
  <li>山のあなたになほ遠く</li>
  <li>「幸」（さいはひ） 住むと人のいふ。</li>
</ol>
実際の表示
  1. 山のあなたの空遠く
  2. 「幸」（さいはひ）
  3. 住むと人のいふ。
  4. 噫（ああ）、われひとゝ尋（と）めゆきて
  5. 涙さしぐみ、かへりきぬ
  6. 山のあなたになほ遠く
  7. 「幸」（さいはひ） 住むと人のいふ。

それから定義リストの書き方も紹介します。
タイトル
:　コンテンツ
のような書き方で表記します。

Markdown
PHP
: PHP (PHP: Hypertext Preprocessor を再帰的に略したものです)  は、広く使われているオープンソースの汎用スクリプト言語です。
PHP は、特に Web 開発に適しており、HTML に埋め込むことができます。

Python
: Pythonはさまざまな分野のアプリケーションで使われている、極めてパワフルな動的プログラミング言語です。

Ruby
: Rubyは、手軽なオブジェクト指向プログラミングを実現するための種々の機能を持つオブジェクト指向スクリプト言語です。
HTML
<dl>
<dt>PHP</dt>
<dd>PHP (PHP: Hypertext Preprocessor を再帰的に略したものです)  は、広く使われているオープンソースの汎用スクリプト言語です。<br>
PHP は、特に Web 開発に適しており、HTML に埋め込むことができます。</dd>
<dt>Python</dt>
<dd>Pythonはさまざまな分野のアプリケーションで使われている、極めてパワフルな動的プログラミング言語です。</dd>
<dt>Ruby</dt>
<dd>Rubyは、手軽なオブジェクト指向プログラミングを実現するための種々の機能を持つオブジェクト指向スクリプト言語です。</dd>
</dl>
実際の表示
PHP
PHP (PHP: Hypertext Preprocessor を再帰的に略したものです) は、広く使われているオープンソースの汎用スクリプト言語です。
PHP は、特に Web 開発に適しており、HTML に埋め込むことができます。
Python
Pythonはさまざまな分野のアプリケーションで使われている、極めてパワフルな動的プログラミング言語です。
Ruby
Rubyは、手軽なオブジェクト指向プログラミングを実現するための種々の機能を持つオブジェクト指向スクリプト言語です。

記法8 リンク（a href）

リンクは主に下記の4つのパターンに分けてみました。
・自動リンク
・インラインリンク
・外部参照リンク
・画像

自動リンク

<URL>で自動リンク、<メールアドレ>スでメールアドレスリンク

Markdown
<http://www.google.com>
<info@php-fan.org>
HTML
<a href="mailto:info@php-fan.org">info@php-fan.org</a>
<a href="http://www.google.com">http://www.google.com</a>
実際の表示

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

インラインリンク

[テキストタイトル](URL “タイトルタグ”)のように[]の中にテキストを入力して()にURLとタイトルを入れます。

Markdown
[グーグル](http://www.google.com/ "グーグルのアドレスだよ")
HTML
<a href="http://www.google.com/" title="グーグルのアドレスだよ">グーグル</a>
実際の表示

グーグル

外部参照リンク

[リンクタイトル][ID]
[ID]: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
<p>主な検索エンジンは<a href="http://google.com/" title="Google">グーグル</a>を主力エンジンとして<a href="http://www.yahoo.co.jp/" title="Yahoo!Japan">Yahoo!JAPAN</a>や<a href="http://jp.msn.com/" title="MSN">MSN</a>等があります。</p>
実際の表示

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

画像

![ALT属性](URL)という風に記述します。

Markdown

![イメージテキスト](https://php-fan.org/wp-content/uploads/2013/12/favorite-300x190.jpg)

![時計画像][1]
[1]:https://php-fan.org/wp-content/uploads/2012/09/countupdown-300x196.jpg

[![test](https://php-fan.org/wp-content/uploads/2013/11/form7-300x199.jpg)](https://php-fan.org/)
HTML
<p><img alt="イメージテキスト" src="https://php-fan.org/wp-content/uploads/2013/12/favorite-300x190.jpg"></p>
<p><img alt="時計画像" src="https://php-fan.org/wp-content/uploads/2012/09/countupdown-300x196.jpg"></p>
<p><a href="https://php-fan.org/"><img alt="test" src="https://php-fan.org/wp-content/uploads/2013/11/form7-300x199.jpg"></a></p>
実際の表示

イメージテキスト

時計画像

test

記法9 テーブル

テーブルの記述方法は|と–だけで作成します。
:—で左寄せ:—:でセンター—:で右寄せになります。

Markdown

名前 | 好きな食べ物 | 年齢
:—–|:———-:|—–:
田中 | カレーライス | 29
斉藤 | お寿司 | 47
中田 | ハンバーグ | 32

HTML
<table>
<thead>
<tr>
<th align="left">名前</th>
<th align="center">好きな食べ物</th>
<th align="right">年齢</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">田中</td>
<td align="center">カレーライス</td>
<td align="right">29</td>
</tr>
<tr>
<td align="left">斉藤</td>
<td align="center">お寿司</td>
<td align="right">47</td>
</tr>
<tr>
<td align="left">中田</td>
<td align="center">ハンバーグ</td>
<td align="right">32</td>
</tr>
</tbody>
</table>
実際の表示
名前 好きな食べ物 年齢
田中 カレーライス 29
斉藤 お寿司 47
中田 ハンバーグ 32

記法10 エスケープ(\)

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

ほぼ全部の記法を紹介しました。そんなに難しくないのですぐにでも取り入れて書いてみて下さい。
とっても簡単なんです。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です