• TOP
  • Tips
  • マークダウン記法のおさらい

マークダウン記法のおさらい

maenok

DEVLAB改め、IsaBとして本格的に公式ブログ化して、今後記事書く人が増えてくるはずなので、本ブログ用にMarkdown記法の雛形、かつ表示スタイルの確認用のウェルカムドキュメント的にこの投稿を書き起こしたのですが、一般公開しても特に問題ないTIPSでもあるので、そのまま記事として公開しておきます。

そもそもマークダウン記法って何？──という人も多いかもしれないので、

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

上記はWikipediaからの引用です。

まぁ、簡単に言うと、HTML知らなくてもルールに沿った書式でテキスト文章を書くことで、リッチなスタイリングがされたHTML文書に変換できてしまう記述方法と云うものです。基礎的な書式だけでも覚えておくと色んな書式に変換できるので、様々なシーンで利用できるお得な言語スキルです。

──と云うわけで、さっそく基礎的な書式を紹介していきます。

1. 見出しブロック

まずは見出しブロックの書き方から。 原則的にブロック要素の場合は、前後に改行が必要になります。

# 見出しH1

## 見出しH2

### 見出しH3

#### 見出しH4

##### 見出しH5

###### 見出しH6

これがどのように見えるかというと、

見出しH1

見出しH2

見出しH3

見出しH4

見出しH5
見出しH6

↑こうなります。

H1、H2のみ、別の記法があって、

見出しH1
===============

見出しH2
---------------

↑こんなのも使えます。 見出し直後の行の=や-の数は1個以上であればOKです。 これを利用すると、markdownがスタイリングされていないテキスト状態でも文章が見やすくなります。

あと見出しにハッシュを使い、ページ内リンクを実現することができます（Markdown Extraの拡張機能です。このサイトでは利用可）。 その場合、見出しの後に {#hash} を付けます。

### ハッシュ付見出し {#hash}

ハッシュ付見出し

ハッシュ付見出しへのページ内リンクの記法は、後述のリンクの項目を参照してください。

2. 引用ブロック

ブロック要素なので、前後に改行が必要です。

> 引用文のテキストが入ります。

引用文のテキストが入ります。

ネストも可能です。

> 引用のネスト
> 
> - 子要素となるコンテンツ
> - 子要素となるコンテンツ
>

引用のネスト

  • 子要素となるコンテンツ
  • 子要素となるコンテンツ

3. コードブロック

ブロック要素なので、前後に改行が必要です。

\`\`\`
function is_assoc( &$data ) {
  if (!is_array($data)) 
    return false;

  return !empty(array_diff( array_keys($data), range(0, count($data) - 1) ));
}
\`\`\`

↓このように表示されます。

function is_assoc( &$data ) {
  if (!is_array($data)) 
    return false;

  return !empty(array_diff( array_keys($data), range(0, count($data) - 1) ));
}

4. インラインコード

インライン要素なので、前後に改行などは要りません。

インラインコードは\`is_assoc()\`←こんな風に表示されます。

インラインコードはis_assoc()←こんな風に表示されます。

5. 無作為リスト

HTMLで云うところの <ul></ul> タグリストにマークアップされます。 ブロック要素なので、前後に改行が必要です。

- リスト1
- リスト2
  - ネストリスト1
  - ネストリスト2
- リスト3

  • リスト1

  • リスト2

    • ネストリスト1
    • ネストリスト2

  • リスト3

6. 番号つきリスト

HTMLで云うところの <ol></ol> タグリストにマークアップされます。 ブロック要素なので、前後に改行が必要です。

1. リスト1
1. リスト2
  1. ネストリスト1
  1. ネストリスト2
1. リスト3

  1. リスト1

  2. リスト2

    1. ネストリスト1
    2. ネストリスト2

  3. リスト3

7. 文字強調

インライン要素なので、前後に改行などは要りません。

強調したいところで**こう**すれば文字が__太字__になって強調されます。

強調したいところでこうすれば文字が太字になって強調されます。

英数字などを斜体強調したい場合は、*Abc*とすれば文字が_123_というように斜体で表示されます。

英数字などを斜体強調したい場合は、_Abc_とすれば文字が_123_というように斜体で表示されます。

8. リンク

インライン要素なので、前後に改行などは要りません。

[表示される文字列](#hash "title属性値")

表示される文字列

文章の中で[リンク先はこちら](http://www.google.com/ "google TOP")みたいに使えます。

文章の中でリンク先はこちらみたいに使えます。

title属性値は省略可能なので、単純に[Yahoo!トップ](http://yahoo.co.jp)としてもOKです。

title属性値は省略可能なので、単純にYahoo!トップとしてもOKです。

9. 画像の貼り付け

画像も貼れます。

![alt属性値](画像ファイルのURL "title属性値"){#id .class}

上記の書式がHTML化されると、



<img src="画像ファイルのURL" alt="alt属性値" title="title属性値" id="id" class="class">

──に変換される仕組みです。 応用編として、このサイトで利用しているbootstrapのclassを利用することで左寄せ、中央、右寄せといった画像配置をする場合の例を掲載しておきます。

![IsaBロゴ 左寄せ](/uploads/logo_isab.png "IsaB Logo"){.pull-left}
テキストを右側に回りこませられます。
<div class="clearfix"></div>

![IsaBロゴ 中央](/uploads/logo_isab.png "IsaB Logo"){.center-block}

![IsaBロゴ 右寄せ](/uploads/logo_isab.png "IsaB Logo"){.pull-right}
テキストを左側に回りこませられます。
<div class="clearfix"></div>

↓のように表示されます。

IsaBロゴ 左寄せ テキストを右側に回りこませられます。

IsaBロゴ 中央

IsaBロゴ 右寄せ テキストを左側に回りこませられます。

回り込みを解除するのに<div class="clearfix"></div>が必要になってしまうのが難点ですが、使い勝手は良いかと思います。

その他

あと、知っておくと役に立つのが、改行の特徴です。markdownでは文末の改行をきちんと改行してくれるのですが、空白行を連続させても1つの空白行しか有効になりません。つまり、

ここから、



三行分改行したい。

──と記述しても、実際には、

ここから、

三行分改行したい。

──と空白行が1行しか入らないのです。 もっと改行を入れたいという場合には、下記のようにします。

ここから、
<div style="margin-bottom: 3em;"></div>
三行分改行したい。

ここから、

三行分改行したい。

divタグ内のインラインスタイルの3emのところを改行したい行数分の数字に変えてあげれば、好きな数だけ改行を入れられます。まぁ、直接タグを埋め込むのはmarkdownのセマンティックさと逆行する流れなのですが、ブログの記事を見やすく書くためには必要悪となるわけです。

他にも文字装飾の記法は色々ありますが、基本的にここで紹介している記法を知っておくだけでも、だいぶリッチな記事を書くことができます。 他の記法も気になる人はネットでmarkdownとかのキーワードで調べてみると、たくさん引っかかるので、そちらを参照してください。

なお、WordPressでの注意点として、マークダウン記法で記事を書く時は、投稿の編集モードを「テキスト」にしておく必要があります。 これを忘れてビジュアルモードで書いてしまうと、マークダウンの変換が適用されなくなってしまうのでご注意ください。