Markdownの使い方：具体的な書き方を説明します

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語です。今までなんとなく使用していましたが、Markdownの記法の備忘録として整理しました。

簡単な文書の作成やブログの執筆活動の下書き作成にも使える超便利ツールです。

ちなみに、筆者はブログの下書きにこのMarkdownを使用しています。

Markdownとは？

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

「Markdown」『ウィキペディア　フリー百科事典日本語版』(https://ja.wikipedia.org/wiki/Markdown)
アクセス日時：2022年9月16日 02:18（日本時間）

簡単にMarkdownを説明をすると「文書を読み書きしやすくするツール」です。

特徴として、

• HTML言語より簡単にしたもので、操作がしやすい
• 文書の構造の表現のレパートリーが豊富
• アプリを使用しないで読み書きすることができる

などがあります。

Markdownが使えるエディタ

WindowsとMac両方に対応しているMarkdownエディタは以下になります。

1. Atom
2. Visual Studio Code（VSC）
3. Sublime Text

Markdown記法

それでは、Markdown記法を説明していきます。

見出し（<h1>）

HTMLでは、<h1>から<h6>になります。Markdown記法での見出しの記述は「#」を使います。

「#」は<h1>、「##」は<h2>を「#」を付ける個数によって、見出しを表します。

【Markdown】

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

【実行結果】

「#」の後ろに、半角スペースを入れることを忘れないで下さい。

改行（<br>）

Markdownでの改行は、2つの半角スペースを入力します。

【Markdown】

半角スペース2つ

文書の最後に、2つの半角スペースを入れると改行されます。

イタリック体（<em>）、強調（<strong>）、インライン（）

強調は「*」、インラインは「`」を入力します。

【Markdown】

*イタリック体で表示します*
**太字で表示します**
***イタリック体の太字で表示します***
`インラインで表記します`
<font color="blue">青文字ですか？</font>

【実行結果】

文字の装飾は、HTMLでも可能です。

取り消し線（<del>）

2つの「~~」で、文字を囲むと、取り消し線になります。

【Markdown】

ここの文書は、~~打ち消し~~しています

【実行結果】

箇条書きリスト（<ul>）

「-」を先頭に記述することで箇条書きになります。ネストはタブ（若しくは、2つの半角スペース）で表現します。

【Markdown】

- リスト1
    - リスト1 ネスト
        - リスト1 ネスト リスト1_1_1
        - リスト1 ネスト リスト1_1_2
    - リスト1_2 ネスト
- リスト2
- リスト3

【実行結果】

・「-」の後には、必ず半角スペースを入力します
・箇条書きリストは「-」の他に、「*」や「+」でもできます
・箇条書きリストのネストは、タブ若しくは2つの半角スペースを入力します

番号付きリスト（<ol>）

「番号. 」を先頭に記述することで番号付きのリストになります。ネストはタブ（又は2つの半角スペース）で表現します。

【Markdown】

1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3

【実行結果】

・「1.」の後には、必ず半角スペースを入力します
・番号は自動的に採番されるため、すべての行を「1. 」と記述するのがお勧めです。
・番号付きリストのネストは、2つの半角スペースを入力します

チェックボックス

「- [ ]」で、チェックボックスを表示出来ます。「[]」内に「x」を入れるとチェックされた内容で表示できます。

【Markdown】

- [ ] タスク1
- [x] タスク2

【実行結果】

水平線（<hr>）

「—」（ハイフン）で、水平線の記述することができます。「***」（アスタリスク）でも水平線になります。

【Markdown】

---

【実行結果】

引用（<blockquote>）

テキストを引用する場合は、先頭に「>」を付けます。
引用が複数行にまたがる場合もすべての引用行の先頭に「>」が必要です。

【Markdown】

> ここの部分が、引用されました
> 
> 簡単に引用をすることができます

【実行結果】

二重引用

テキストを二重引用する場合は、先頭に「>>」を付けます。

【Markdown】

> ここの部分が、引用されました
> 
>> ここの部分が、二重引用されました
>> 

【実行結果】

テーブル（<table>）

Markdownで表テーブルを作る場合は、 「 |（縦棒）」「-（ハイフン）」「:（コロン）」を使います。

Markdownで作成する表テーブル作成は、次の3つのから構成します。

• ヘッダー部分
• アラインメント部分（揃え方）
• データ部分

ヘッダー部分

1行目は、ヘッダーを定義します。

|left|center|right|

アラインメント部分

2行目は、アラインメントを定義します。アラインメント部分は、データの揃え方を定義します。

|:---|:--:|---:|

「:（コロン）」と 「-（ハイフン）」の位置で、 左揃え・中央揃え・右揃えを決めます。

アライメント部分に「:（コロン）」を入力しないと左揃えになります。

-（ハイフン）は何個記述してもかまいません。 通常は最低3個設定します。

データ部分

3行目以降は、データになります。

|a|b|c|

・データ部分はデータを記述する部分で、何行でも記述できます。
・列数に関しては、ヘッダー部分の列数よりもデータ部分の列数が多い場合は無視されます。
・逆にデータ部分の列数が少ない場合は、空白が入ります。

テーブルサンプル①

【Markdown】

|left|center|right|
|----|----|----|
|a|b|c|

【実行結果】

テーブルサンプル②

データを「左揃え」「中央揃え」「右揃え」にしています。

【Markdown】

|left|center|right|
|:---|:--:|---:|
|a|b|c|

【実行結果】

リンク（<a>）

リンクは []角括弧と ()丸括弧で記述します。

【Markdown】

[Yahoo!](https://www.yahoo.co.jp)

【実行結果】

コードブロック（<pre><code>）

「“`」を使用すると、PHP、HTML、CSSなどのコードを表示出来ます。

【Markdown】

```php
<?php
if ($a > $b) {
    echo "aはbより大きい";
} elseif ($a == $b) {
    echo "aはbと等しい";
} else {
    echo "aはbより小さい";
}
```

【実行結果】