マークダウンの記法一覧

2026.02.12

マークダウンの記法一覧

Image by Nicky ❤️🌿🐞🌿❤️ from Pixabay

1 はじめに
2 記法一覧
3 デザイン：HTML、CSS

はじめに

マークダウンの記法とそのプレビューの一覧です。

以下の条件を満たした極力シンプルな一覧を作成しています。
・ツール固有の記法は省く
・HTML、CSSを使うものは分ける
・複数の書き方がある場合は推奨する１つのみ記載

記法一覧

改行

「半角スペース2つ」で改行されます。

■書き方

1行目  
2行目  
3行目

■プレビュー

見出し

■書き方

# 見出し1

## 見出し2

### 見出し3

#### 見出し4

##### 見出し5

###### 見出し6

■プレビュー

テキストのスタイル

■書き方

**太字**  
*斜体*  
~~訂正線~~

■プレビュー

箇条書き

■書き方：通常

- リスト1
    - リスト1-1
        - リスト1-1-1
- リスト2

■プレビュー

■書き方：番号付きリスト

1. 番号付きリストA
    1. 番号付きリストA-1
    1. 番号付きリストA-2
1. 番号付きリストB

■プレビュー

表

表のカスタマイズはいろいろあるので、基本の書き方のみを記載しています。

■書き方

| ヘッダー1 | ヘッダー2 | ヘッダー3 |
|:---------|:---------:|----------:|
| 左寄せ    | 中央寄せ  | 右寄せ    |
| a        | a         | a         |

■プレビュー

※左寄せ、中央、右寄せは以下のように指定します。
　　左寄せ　　:--
　　中央寄せ　:--:
　　右寄せ　　--:

引用

■書き方

> これは引用です  

>> これは２重引用です  

>>> これは３重引用です

■プレビュー

コードブロック

コードブロックは「```(バッククオート)」で囲みます

■書き方

```
body {
  font-size: 14px;
}
```

■プレビュー

インラインコード

インラインコードは「`(バッククオート)」で囲みます

■書き方

私は`<br>`タグが好きです。

■プレビュー

URLリンク

■書き方

[表示内容](リンク先URL)
[githubトップ](https://github.co.jp/)

■プレビュー

画像の表示

■書き方

![画像名](画像のパス)

![サンプル画像](https://tekutekku.com/wp-content/uploads/2026/02/260204_2.jpg)

■プレビュー

※[]で指定する文字列は、マークダウンのHTML変換後にimgタグのalt属性の値としてセットされます。

水平線

「***」で水平線を引けます。

■書き方

↓水平線
***

■プレビュー

マークダウンのエスケープ

「\」でエスケープできます。

画面に表示させたいのに、マークダウンとして解釈されてしまう。。
　⇒先頭に「\」をつけてください。

■書き方

\```

■プレビュー

※「円マーク」と「バックスラッシュ」は環境によって表示は違いますが、PC上は同じ文字です。

デザイン：HTML、CSS

環境によりますが、
マークダウンではHTML、CSSも使えます。

■書き方

<style>
  h1 {
    color: orange
  }
</style>

# オレンジ色の見出し

<p style="color:red;">赤い文字</p>

■プレビュー

マークダウンの各要素がHTMLのどの要素に変換されるのかを知る必要があります。
（例：「# 見出し」はh1に変換される）

以上です。