Markdownの基本的な書き方チートシート

2021.08.20

WEB / プログラミング / IT系

こんにちは！あますた(@amaguristar)です。

「Markdownは何となく分かったけど、実際の書き方ってどんな感じ？」

そんな方の為にMarkdownの基本的な書き方をサクッと紹介。

「Markdownってなに？」って方は下記参照↓↓↓
>> https://fun.wazn.jp/info/753/

目次[ open / close ]

Markdownで利用できる項目一覧

見出し
段落

改行

文字装飾

イタリック
強調
取り消し線

リスト
引用
水平線
リンク
画像
コード
テーブル

まとめ

動画でも紹介してます↓↓↓
>> https://youtu.be/e-EVg25bl_o

Markdownで利用できる項目一覧

Markdownで表現可能なリストはこちら。

見出し
段落
- 改行
文字装飾
- イタリック
- 強調
- 取り消し線
リスト
引用
水平線
リンク
画像
コード
テーブル

それぞれ、書き方は簡単。

注意！
Markdownは派生が色々とありますので、ものによっては書き方が若干違う可能性があります。今回はあくまで基本となる書き方を紹介。上記以外の表示が可能な派生Markdownもあります。

見出し

見出しはHTMLで言うところの「<h?>〜<h?>」タグに相当。hタグ同様1〜6まであります。

Markdown	HTML
`#`	`<h1>`
`##`	`<h2>`
`###`	`<h3>`
`####`	`<h4>`
`#####`	`<h5>`
`######`	`<h6>`

#の個数がhタグの数字を表します。

使用例

Markdown	HTML
`# テスト1`	`<h1>テスト1</h1>`
`### こんな感じになります`	`<h3>こんな感じになります</h3>`

実際に利用する時は#とテキストの間に半角スペースが必要です。

全角だと表示されません。もし表示されたとしても、バグの原因になる可能性がありますので、確実に半角を利用する様にしましょう。

段落

段落は空行1つで表現します。

Markdown	HTML
テストテストテストテスト	`<p>テストテスト</p>` `<p>テストテスト</p>`

利用例

Markdown

テストテストテスト

テストテストテスト

テストテストテスト

HTML

<p>テストテストテスト</p>
<p>テストテストテスト</p>
<p>テストテストテスト</p>

改行するには？

Markdownは文章を単純に改行するとHTMLに変換時、文章を詰めて表示します(下記例参照)。

Markdown	HTML
改行テスト改行テスト	`<p>改行テスト改行テスト</p>`

その為、「ここは改行ですよ」と宣言する必要があります。

段落内で改行する場合は、半角スペースを2つ連続で入力。

Markdown	HTML
改行テスト改行テスト	`<p>改行テスト改行テスト</p>`
改行テスト改行␣␣ テスト	`<p>改行テスト改行<br>テスト</p>`

注意！
上記例では、半角スペースを分かりやすくする為「␣」で表示してます。同様に改行は「」で表しています。

注意！
スペースはあくまで半角です。全角を利用すると、表示されたとしてもバグの原因になるので使わないで下さい

文字装飾

文字の装飾は下記3つが可能。

イタリック
強調
取り消し

それぞれの表示をまとめると、

装飾	Markdown	HTML	表示
イタリック	`テスト`	`<em>テスト</em>`	テスト
強調	`テスト`	`<strong>テスト</strong>`	テスト
取り消し	`~~テスト~~`	`<del>テスト</del>`	~~テスト~~

という感じ。

中には「強調した箇所を斜体にしたい」って時もあると思いますが、そんな時は、

装飾	Markdown	HTML	表示
強調とイタリック	`*テスト*`	<strong><em>テスト</em></strong>	テスト

と、「*」を3つで囲めば「強調+イタリック」で表示されます。

ちなみに、「*」の代わりに「_」で囲んでも同じ意味になります。

	Markdown	HTML	表示
例	`__テスト__`	<strong>テスト</strong>	テスト

Markdown	HTML	表示
– テスト1 – テスト2 – テスト3	`<ul>` `<li>テスト1</li>` `<li>テスト2</li>` `<li>テスト3</li>` `</ul>`	テスト1 テスト2 テスト3

Markdown	HTML	表示
1. テスト1 2. テスト2 3. テスト3	`<ol>` `<li>テスト1</li>` `<li>テスト2</li>` `<li>テスト3</li>` `</ol>`	テスト1 テスト2 テスト3

Markdown	HTML	表示
5. テスト1 6. てすと2 7. てすと3	`<ol start='5'>` `<li>テスト1</li>` `<li>テスト2</li>` `<li>テスト3</li>` `</ol>`	テスト1 テスト2 テスト3

引用

文章の引用は段落の初めに「>」を書きます。

Markdown

> 引用テスト1
> 引用テスト2
> 引用テスト3

表示

引用テスト1
引用テスト2
引用テスト3

水平線

下記のどれでも水平線が表示されます。

* * *
***
*****
- - -
---------------------------------------

表示される水平線↓

リンク

[リンクテキスト](リンク先url)

上記の様に[]の中にリンクとして表示するテキストを入力。()内にリンク先を記述します。

Markdown	HTML	表示
`[リンクテキスト](https://fun.wazn.jp)`	`<a href="https://fun.wazn.jp">リンクテキスト</a>`	リンクテキスト

当然、文中にも挿入可能です。

Markdown

テストテスト[リンクテキスト](https://fun.wazn.jp)テストテスト

表示

テストテストリンクテキストテストテスト

画像

画像の挿入も簡単。ほとんどリンクと書き方は同じです。

![代替テキスト](画像url)

上記を見ると分かる様にリンクの前に「!」を追加すると画像を表示します。

[]内には画像が表示されなかった時に代わりに表示するテキストを入力。

Markdown

![logo-item](https://fun.wazn.jp/wp-content/uploads/2021/06/cropped-icon.png)

表示

コード

文章ないでコードを表示したい時は、「`」で囲めば、囲んだ内容がそのまま表示されます。

Markdown	表示
`テストテストテスト`	テストテストテスト
`テスト`テスト`テスト`	`テストテストテスト`

エスケープ文字を使わなくても良いので楽に書くことができます。

エスケープ文字の詳細は↓↓↓
>> https://amamemo.com/memo/2770

プログラムなど、そのままコードを載せたい場合は、始まりと終わりを「```」で囲めば全てそのまま表示されます。

POINT！
「```」で囲まれた部分はHTMLの<pre>〜</pre>と同じ意味

Markdown

```
#include <stdio.h>

int main()
{

   return 0;
}
```

表示

#include <stdio.h>

int main()
{

   return 0;
}

テーブル

簡単なテーブルもMarkdownで表示可能。これまでの記事中で何度かテーブルを表示してますが、それもMarkdownで書いてます。例を挙げると、

装飾	Markdown	HTML	表示
強調とイタリック	`*テスト*`	<strong><em>テスト</em></strong>	テスト

このテーブルをMarkdownで表すと、

|装飾|Markdown|HTML|表示|
|:--|:--|:--|:--|
|強調とイタリック|`***テスト***`|<string><em>テスト</em></string>|***テスト***|

と書いてます。

2段目の|:--はテキストの表示位置をあわらしています。

左寄せ	中央	右寄せ
`:--`	`:-:`	`--:`
左寄せ	中央	右寄せ

ちなみに、見た目を整える為に

| 装飾 |Markdown|HTML|表示|
|:------|:------------|:------|:----|
|テスト| テスト       |テスト |テスト|
|テスト| テスト       |テスト |テスト|
|テスト| テスト       |テスト |テスト|
|テスト| テスト       |テスト |テスト|

と書いても表示されます。