---
title: Markdown スタイルガイド
published: 2025-03-08
updated: 2025-03-23
tags: ["ガイド"]
pin: 1
lang: ja
abbrlink: markdown-style-guide
---

以下は Retypeset テーマで使用できる基本的な Markdown 構文の例です。

## 見出し

HTML の `<h1>` から `<h6>` タグは6段階の見出しレベルに対応しています。`<h1>` が最高レベルの見出しで、`<h6>` が最低レベルです。

# 見出し 1

## 見出し 2

### 見出し 3

#### 見出し 4

##### 見出し 5

###### 見出し 6

## 段落

孔乙己が店に入ると、酒を飲んでいた人々は皆彼を見て笑い、中には「孔乙己、顔にまた新しい傷ができたな！」と声をかける者もいた。彼は答えず、店の主人に「お酒を二杯温めて、茴香豆を一皿」と言い、九文の銭を出した。彼らはまた意図的に大声で「また人の物を盗んだに違いない！」と言った。孔乙己は目を大きく開いて「どうして人の清白を無実に汚すのか…」「何が清白だ？一昨日、何家の本を盗んで、吊るされて叩かれたのを見たぞ」と言われると、孔乙己は顔を赤くし、額の青筋が浮き上がり、「書を盗むのは盗みとは言えない…書を盗む！…読書人の行いが、どうして盗みと言えようか？」と反論し、続いて「君子固窮」や「者乎」などの難解な言葉を並べ立て、人々を大笑いさせた。店内外は陽気な空気に満ちていた。

人々の裏話によると、孔乙己はもともと勉強していたが、結局科挙に合格せず、生計を立てる方法も知らなかった。そのため、だんだん貧しくなり、ついには物乞いをしなければならなくなった。

## 画像

### 構文

```markdown
![画像の説明](./full/or/relative/path/of/image)
```

### 出力

![画像の説明](/image-placeholder)

## 引用ブロック

引用ブロック要素は他のソースから引用したコンテンツを表し、オプションで `footer` または `cite` 要素内に引用元を含めることができます。また、引用ブロック内で `<mark>`、`<abbr>` などのタグを使用することもできます。

### 出典のない引用ブロック

#### 構文

```markdown
> 天地不仁、以万物為芻狗。<br>
> **注意**：引用ブロック内でも _Markdown 構文_ が使えます。
```

#### 出力

> 天地不仁、以万物為芻狗。<br>
> **注意**：引用ブロック内でも _Markdown 構文_ が使えます。

### 出典付きの引用ブロック

#### 構文

```markdown
> 私の裏庭からは塀の外に二本の木が見える。一本はナツメの木で、もう一本もナツメの木だ。<br>
> —— <cite>『秋の夜』[^1]</cite>
```

#### 出力

> 私の裏庭からは塀の外に二本の木が見える。一本はナツメの木で、もう一本もナツメの木だ。<br>
> —— <cite>『秋の夜』[^1]</cite>

[^1]: [『秋の夜』](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85))は魯迅の散文詩集『野草』の最初の散文詩で、1924年に書かれました。

## 表

### 構文

```markdown
| イタリック体  | 太字    | コード   |
| ---------- | ------- | ------- |
| _イタリック_  | **太字** | `コード` |
```

### 出力

| イタリック体  | 太字    | コード   |
| ---------- | ------- | ------- |
| _イタリック_  | **太字** | `コード` |

## コードブロック

コードの前後に3つのバッククォート ``` を追加してコードブロックを作成します。最初のバッククォートの後に言語タイプ（html、javascript、css、markdownなど）を指定することで、構文ハイライトを実現できます。

### 構文

````markdown
```html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 サンプル文書</title>
  </head>
  <body>
    <p>テスト</p>
  </body>
</html>
```
````

### 出力

```html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 サンプル文書</title>
  </head>
  <body>
    <p>テスト</p>
  </body>
</html>
```

## リスト

### 順序付きリスト

#### 構文

```markdown
1. 最初の項目
2. 2番目の項目
3. 3番目の項目
```

#### 出力

1. 最初の項目
2. 2番目の項目
3. 3番目の項目

### 順序なしリスト

#### 構文

```markdown
- リスト項目
- 別の項目
- さらに別の項目
```

#### 出力

- リスト項目
- 別の項目
- さらに別の項目

### ネストされたリスト

#### 構文

```markdown
- フルーツ
  - リンゴ
  - オレンジ
  - バナナ
- 野菜
  - 青菜
  - 大根
```

#### 出力

- フルーツ
  - リンゴ
  - オレンジ
  - バナナ
- 野菜
  - 青菜
  - 大根

## その他の要素

`<sup>` 上付き文字、`<sub>` 下付き文字、`<abbr>` 略語、`<del>` 取り消し線、`<u>` 波線、`<kbd>` キーボード入力、`<mark>` ハイライトなどが含まれます。

### 構文

```markdown
H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

<abbr title="Graphics Interchange Format">GIF</abbr> はビットマップ画像形式の一種です。

書物は人類の進歩の<del>階段</del>梯子です。

優れた作家は常に<u title="スペリング">つづり</u>の間違いをチェックします。

<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd> を押してセッションを終了します。

ほとんどの<mark>サンショウウオ</mark>は夜行性で、昆虫や虫などの小さな生き物を捕食します。
```

### 出力

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

<abbr title="Graphics Interchange Format">GIF</abbr> はビットマップ画像形式の一種です。

書物は人類の進歩の<del>階段</del>梯子です。

優れた作家は常に<u title="スペリング">つづり</u>の間違いをチェックします。

<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd> を押してセッションを終了します。

ほとんどの<mark>サンショウウオ</mark>は夜行性で、昆虫や虫などの小さな生き物を捕食します。
