📑

「ZennのMarkdown記法一覧」の補足

Junichiroh Hirose

2025/10/03に公開

はじめに

この記事では、初めてZennで記事を書く方に向けて、公式のヘルプ「ZennのMarkdown記法一覧」には載っていない、Zenn記事の便利な記法を紹介します。

記事編集画面の右側にある $\textcircled{?}$ から参照できる公式のヘルプに加えて、ここで紹介する内容を押さえておくと、より快適に記事を執筆できるはずです。

全体文字数

Zennは、記事ごとに最大50,000文字までです。
50,000文字を超える記事は保存時にエラーが表示され、保存できません。

テキストリンク

httpではじまるリンク(URL)を指定すると、画面が開きます。
　※ リンクを右クリックすると、プルダウンから「リンクのコピー」を選択できます。

#ではじまるアンカーリンクを指定すると、同じ画面内でアンカーリンクにスクロールします。
　※ 編集画面の閲覧モード(▷)で見出しの左側を押すとアンカーリンクがコピーされます。

[リンク(URL指定)](https://zenn.dev/hirosejn/articles/cc7ad25852227a#link)
[アンカーリンク](#link)

Link

リンク(URL指定)
アンカーリンク

画像

画像の横幅は、個人的に、500ピクセルが好きです。

画像行に続くItaricはキャプション化

キャプションは、インライン指定のItalicと同じ表記方法です。
画像行に続く、*で挟まれたItalic指定の行は、キャプション化され、Itaricのまま、色をグレーにし、センタリングして、行半分ほど(-16px)上に表示されます。

*画像に続かないと、だたのItalicイタリック*
![](https://storage.googleapis.com/zenn-user-upload/gxnwu3br83nsbqs873uibiy6fd43 =500x)
*画像につづくItalic**のみ**キャプション化されます。*
*キャプション化は、複数行に適用されます。*
Italic*でない文字列*はキャプション化されないが、
*空行などがあるまでItalicのキャプション化はつづきます。*

*空行などでキャプション化が外れると、普通のインラインスタイルのItalicイタリック指定に戻ります*

画像に続かないと、だたのItalicイタリック

画像につづくItaricのみキャプション化されます。
キャプション化は、複数行に適用されます。
Itaricでない文字列はキャプション化されないが、
空行などがあるまでItaricのキャプション化はつづきます。

空行などでキャプション化が外れると、普通のインラインスタイルのItaricイタリック指定に戻ります

テーブル

表の中で改行、中央揃え右寄せ

1行目（ヘッダ）と2行目（書式指定行）のカラム数（|の数 - 1）は同じでないと表と認識されません。
2行目（書式指定行) のハイフン-は、Zennのヘルプ $\textcircled{?}$ ではハイフン3つの例だけが示されていますが、1つ以上あれば、いくつでも構いません。
:で左右の寄せを指定します。
3行目以降（データ）は、行末の|を複数個省略できます。
カラム内の文字列は、 で改行できます。
なお、文字列末尾の は1つ無視されるので、見た目よりも1つ多く を記入します。
カラムの中に|を表示するには\をつけます。

|指定なし<br>ーーー<br>ヘッダ行：中央<br>データ行：左寄せ|左寄せ<br>：ーーー<br>※ヘッダも左寄せになる|中央揃え<br>：－－－:|右寄せ<br>－－－：|
|-|:-|:--:|------------:|
|**太字で見出カラム**<br>っぽくできる|前の行`<br>`<br>次の行|<br>手前に空行`<br>`１つ|後に空行`<br>`2つ<br><br>|
|行末の`\|`は省略できる
|表の中の\|は`\`をつける|＊＊＊＊＊＊＊＊＊＊|＊＊＊＊＊＊＊＊＊＊|＊＊＊＊＊＊＊＊＊＊|

指定なしーーーヘッダ行：中央データ行：左寄せ	左寄せ：ーーー ※ヘッダも左寄せになる	中央揃え：－－－:	右寄せ－－－：
太字で見出カラムっぽくできる	前の行`<br>` 次の行	手前に空行`<br>`１つ	後に空行`<br>`2つ
行末の`\|`は省略できる
表の中の\|は`\`をつける	＊＊＊＊＊＊＊＊＊＊	＊＊＊＊＊＊＊＊＊＊	＊＊＊＊＊＊＊＊＊＊

コードブロック

行番号もどき

Zennのコードブロックには、行番号を表示する機能はありません。
行の先頭に番号をつけると、行番号ふうに表示できます。

```js:fooBar.js
99 @@ -4,6 +4,5 @@
100 　　const foo = bar.baz([1, 2, 3]) + 1;
101 　　let foo = bar.baz([1, 2, 3]);
```

fooBar.js

99 @@ -4,6 +4,5 @@
100    const foo = bar.baz([1, 2, 3]) + 1;
101    let foo = bar.baz([1, 2, 3]);

引用

引用のネスト

引用の中で引用のネストを深くすることができます。（例：以下のネスト2）
しかし、ネストを浅くすることはできません。（例：以下のネスト2の次の行）
なお、引用のネスト数を指定することもできます。（例：以下のネスト4、3）

> 引用
改行だけでも引用のネストはつづく
> > 引用のネスト2
> ネストを戻しても、改行と同じ扱いでネストは戻らない
> > > > 引用のネスト4

> > >  引用のネスト3：いきなりネストもできる

引用
改行だけでも引用のネストはつづく

引用のネスト2
ネストを戻しても、改行と同じ扱いでネストは戻らない

引用のネスト4

引用のネスト3：いきなりネストもできる

脚注

本文の脚注番号をクリックすると、脚注欄に飛びます。
脚注欄の末尾に表示される↩︎をクリックすると、脚注をつけた本文に戻ります。

同じ脚注

同じ脚注指定をすると、2回目はn:1、3回目はn:2と枝番号が付きます。
なお、脚注IDは数字である必要はありません。脚注番号は、脚注が登場した順に自動で採番されます。

脚注a[^a]と脚注1[^1]の1回目、
脚注a[^a]と脚注1[^1]の2回目、
脚注1[^1]と脚注a[^a]の3回目
[^1]: 同じ脚注1の繰り返し指定
空行まで改行しても脚注ブロックは続く<br>`<br>`による改行も使える

空行で脚注ブロック終了
[^a]: 同じ脚注aの繰り返し指定

脚注a^[1]と脚注1^[2]の1回目、
脚注a^[1:1]と脚注1^[2:1]の2回目、
脚注1^[2:2]と脚注a^[1:2]の3回目

空行で脚注ブロック終了

数式

複数行の数式は、$$で囲います。数式は中央揃えで表示されます。
※ 先頭の$$の手前、末尾の$$の後に空行を入れないと数式に変換されないことがあります。
インラインの数式は、$～～$で囲います。
※ 先頭の$の直後、末尾の$の直前に半角空白を入れると変換されないことがあります。

よく使う数式のコマンド

表示	コマンド	説明
	四則演算、括弧
$a + b - c \times d \div e$	a `+` b `-` c `\times` d `\div` e	加減乗除
$a \cdot b$	a `\cdot` b	掛け算（ドット）
$\frac{a}{b}$ 、 $\dfrac{a}{b}$	`\frac{a}{b}`、`\dfrac{a}{b}`	分数、ディスプレイ
$(a + b)$	`(`a + b`)`	通常の括弧
$\left(\frac{a}{b} \right)　\left(\dfrac{a}{b} \right)$	`\left`(\frac{a}{b} `\right`) `\left`(\dfrac{a}{b} `\right`)	括弧などの大きさを自動拡大
	べき乗・指数・平方根
$a^2$ 、 $a^{n+1}$	`a^2`、`a^{n+1}`	2乗、複雑な指数
$\sqrt{a}$ 、 $\sqrt[n]{a}$	`\sqrt{`a`}`、`\sqrt[`n`]{`a`}`	平方根、n乗根
	その他よく使う演算記号
$\pm$ 、 $\mp$	`\pm`、`\mp`	±、∓
$\neq$ 、 $\leq$ 、 $\geq$ 、 $\leqq$ 、 $\geqq$	`\neq`、`\leq`、`\geq`、　　　　`\leqq`、`\geqq`	≠、≦、≧
$\equiv$ 、 $\approx$ 、 $\propto$	`\equiv`、`\approx`、`\propto`	同値、近似、比例
	予約文字	※予約文字は`\`をつけて表示
$\#$ $\%$ $\&$ $\_$ $\{$ $\}$ $\|$	`\#` `\%` `\&` `\_` `\{` `\}` `\|`
$	`\$`	(注)`$$`で囲われた数式ブロック内で有効　　インラインでは効かないので全角＄で代用
	太字・イタリック・アンダーバー	(注) 太字とイタリックの2重指定は効きません　　数式では取消線は使えません
$\mathbf{ABC123亜イう}$	`\mathbf{ABC123亜イう}`	英字（変数や記号）用の太字
$\textbf{ABC123亜イう}$	`\textbf{ABC123亜イう}`	テキスト（ラベルや注釈）用の太字
$\mathit{ABC123亜イう}$	`\mathit{ABC123亜イう}`	イタリックに
$\emph{ABC123亜イう}$	`\emph{ABC123亜イう}`	強調（文中で斜体になる）
$指定なし→\pi$ $\boldsymbol{指定→\pi}$	指定なし→`\pi` `\boldsymbol{`指定→`\pi` `}`	ギリシャ文字や記号を太字に
$\underline{ABC123亜イう}$	`\underline{ABC123亜イう}`	アンダーバー (注) Zennのマークダウンにはありませんが、　　数式にすることでつけられます
	整列、空白
整列	`\begin{aligned}` や `\begin{alignedat}{n}`	複数行の整列
$■■$	なし（比較用）	※ 以降、空白の表示欄に■■の間に空白を指定
$■\,■$	`\,`	極小（thin space）
$■\:■$	`\:`	小（medium space）
$■\;■$	`\;`	中（thick space）
$■\quad■$	`\quad`	約1em(1文字分)
$■\qquad■$	`\qquad`	約2em(2文字分)

複数行の数式の整列方法

{alignedat}{区画数} を指定することにより、複数行の縦に並ぶ位置を合わせられます。
1. 縦に並べたい文字列を&で囲います。
2. {区画数}には、& $の数+1$ （ $縦に並べたい文字列の数 \times 2+1$ ）を指定します。
  （実際には、&で縦に並べる区画の区切りを指定します。）
3. 表示位置を揃えた区画ごとに、区画内で右寄せ、末尾の区画のみ左寄せで表示されます。
  上表の空白コマンド（\: \; \quadなど）を使って空白を入れて表示位置を調整します。

例： ：、= (、) の３箇所の位置を合わせるには、&で7区画( $=3\times2+1$ )に分ける
　　[区画1]　 $\underline{\&区画2: \&}$ 　[区画3]　 $\underline{\&区画4= ( \&}$ 　[区画5]　 $\underline{\&区画6) \&}$ 　[区画7]

\begin{alignedat}{7}
[区画1] &:& [区画3] &= (& [区画5]\quad &)& \;[区画7] \\
\textbf{1年後}&:& \mathbf{111.65} &= (&100  \times 1.015 ^ 1&)& \times 1.10 \\
2年後&:& 103.02 &= (&100  \times 1.015 ^ 2&)& \\
&:&  &= (& 0 \times 0 \qquad &)& \\
\end{alignedat}

\begin{alignedat}{7} [区画1] &:& [区画3] &= (& [区画5]\quad &)& \;[区画7] \\ \textbf{1年後}&:& \mathbf{111.65} &= (&100 \times 1.015 ^ 1&)& \times 1.10 \\ 2年後&:& 103.02 &= (&100 \times 1.015 ^ 2&)& \\ &:& &= (& 0 \times 0 \qquad &)& \\ \end{alignedat}

区切り線

ハイフン3つ以上

ハイフン3つ以上で区切り線になります。
　※ Zennのヘルプでは、区切り線としてハイフン5つの例だけが示されています。
なお、見出し2(ハイフン2つ)には細い区切り線がついているため、見出し2の直後の区切り線は表示されません。

---
----
-----
--
---
↑ `--`には細い区切り線がついているので、`--`の次の行の区切り線`---`は表示されない

--

↑ --には細い区切り線がついているので、--の次の行の区切り線---は表示されない

インラインスタイル

インラインスタイルとして、*イタリックItaric*、**太字**、~~打ち消し線~~、`コード`が使えます

インラインスタイルとして、イタリックItaric、太字、~~打ち消し線~~、コードが使えます

インラインスタイル内の半角スペースの扱い

半角スペースが複数並ぶと１つに変換されます。
インラインコードでくくっても、行の先頭と末尾の半角スペースは表示されません。

ほげ`  h o  ge  `ほげ
`  h o  ge  `

ほげ h o ge ほげ
h o ge

インラインスタイルのネスト

打ち消し線のなかで、太字、イタリック、コードは使えます。
太字のイタリックはできません。外側のインライン指定が適用されます。

~~**太字Bold** *イタリックItalic* `  h o  ge  `~~
** *イタリックItalic* を太字Boldで囲う** 、 * **太字をBold** イタリックItalicで囲う*```

太字Bold イタリックItalic h o ge
** イタリックItalic を太字Boldで囲う** 、 * 太字をBold イタリックItalicで囲う*

文字の装飾（インライン数式利用）

インラインの数式を使うことで、インラインスタイルが対応していない修飾ができます。
なお、数式のフォントサイズは、本文よりが若干大きく表示されますので、気になる場合は\small{小さめ} を指定します。
　表示例： $\colorbox{yellow}{\small{小さめ指定}}$ 指定なし $\colorbox{yellow}{\normalsize{標準サイズ指定}}$

表示	記述方法	説明
色＆小 $\textcolor{red}{\small{色＆小}}$	色＆小`$\textcolor{`red`}{\small{`色＆小`}}$`	フォント色＆サイズ小さめ指定
色 $\textcolor{red}{色}$	色`$\textcolor{`red`}{`注意`}$`	フォントの色
下線 $\underline{下線}$	下線`$\underline{`下線`}$`	アンダーライン
丸付 $\textcircled{?}$	丸付`$\textcircled{`?`}$`	〇付き文字指定文字列の中央に〇を表示
強調 $\colorbox{yellow}{強調}$	強調`$\colorbox{`yellow`}{`強調`}$`	背景色
枠＆白地 $\fcolorbox{blue}{white}{枠}$ 枠＆強調 $\fcolorbox{blue}{yellow}{枠}$	枠＆白地`$\fcolorbox{`blue`}{`white`}{`枠`}$` 枠＆強調`$\fcolorbox{`blue`}{`yellow`}{`枠`}$`	枠＆背景(※)

※ 枠をつける場合、枠色に加えて、背景色の指定も必須です。
　背景色にwhiteを指定するとダークモードで白く浮いてしまうことに注意してください。

ダイアグラム

ダイアグラム記法の詳細は、Mermaidの公式サイトを参照ください。
Mermaidから、Webで作図できるライブエディターも提供されています。
（注）titleなど、Zennでは使えない記法が多々あります。

以下、最も基本的なダイアグラムタイプ flowchartを基に mermaid の書き方を説明します。
（Zennのヘルプで使われているgraphは、flowchartと同じです。）

ダイアグラムタイプ: flowchartに続けてTD、LRなどで、並びの方向を指定します。
ZennではMarmaidの表示幅を指定できず、表示幅は自動調整されます。
数段階のフローチャートの場合、縦に並べると縦に間延びしがちなので、文字が小さくなりますが横並びのflowchart LRがおすすめです。
コメント行: %%で記述します。
ノード: ID、ID[表示文字列]の構文でノードを宣言します。
IDは、日本語文字列も使えます。（例：「ノードＢ」）
[表示文字列]を指定しないと、IDが表示されます。（例：「ノードＢ」）
[(表示文字列)]を囲む記号で、ノードの形状を指定します。（例：A[(ノードA ２回目)]
同じIDに異なる[表示文字列]を指定すると、最後の指定が適用されます。（例：A[ノードA]、A[(ノードA ２回目)]）
サブグラフ: subgraph ID～end、subgraph ID[表示文字列]～endの構文で、ノードの階層構造を作れます。複数階層指定できます。
リンク: -->、-->|ID|、-->|表示文字列|の構文でノード・サブグラフの関係を指定します。
同じノード間を複数リンクを宣言すると、リンクが複数描画されます。
表示文字列: 表示文字列には、任意の文字列を指定できます。
太字: **太字**、改行:  も指定できます。（先頭の改行は無視されます。）
予約語とかぶる場合、文字コード指定で記入します。（例：=は#61;、>は#62;）
半角スペースは、複数入れても1つ分のスペースとして表示されます。
スタイル: style構文でノード、サブグラフのIDごとに表示色などを指定できます。

```mermaid
flowchart LR
%% ノード、リンクの使い方
A[ノードA]-->ノードＢ
A[(ノードA   ２回目)]---|サブグラフへ<br/>改行**太字**|G1
A===|太線<br/>=#61;=|G1

%% サブグラフの使い方
subgraph G1
    subgraph G2[サブグラフ2層目]
        ノードＢ-->C
    end
end
C -.->|破線<br/>-.-#62;| A

%% ノード、サブグラフにスタイル指定
style A       fill:#0ff,stroke:#f0f,stroke-width:1px,font-size:15px
style ノードＢ fill:#ff0,stroke:#f00,stroke-width:3px,font-size:20px
style G2      fill:#0f0,stroke:#00f,stroke-width:6px
 ```

よく使うダイアグラムの構文

意味	記法	補足
コメント行	`%%`	行の途中からのコメントは書けません
	ダイアグラムタイプ	mermaidコードブロックごとに1回のみ指定
↓ 上から下へ	flowchart `TB` flowchart `TD`	TB: Top to bottom TD: Top-down
→ 左から右へ	flowchart `LR`	LR: Left to right　★おすすめ
↑ 下から上へ	flowchart `BT`	BT: Bottom to top
← 右から左へ	flowchart `RL`	RL: Right to left
	ノード	表の上に以下のコードの表示イメージを掲載
長方形（通常）	ID ID`[`表示文字列`]`	id id0["id0[文字]"]
角丸	ID`(`表示文字列`)`	id1("id1(文字)")
左右半円	ID`([`表示文字列`])`	id2(["id2([文字])"])
左右２重線	ID`[[`表示文字列`]]`	id3[["id3[[文字]]"]]
ドラム缶	ID`[(`表示文字列`)]`	id4[("id4[(文字)]")]
円	ID`((`表示文字列`))`	id5(("id5((文字))"))
リボン	ID`>`表示文字列`]`	id6>"id6>文字]"]

ひし形正方形	ID`{`表示文字列`}`	id7{"id7{文字}"}
六角形	ID`{{`表示文字列`}}`	id8{{"id8{{文字}}"}}
平行四辺形1	ID`[/`表示文字列`/]`	id9[/"id9[/文字/]"/]
平行四辺形2	ID`[\`表示文字列`\]`	id10["id10[\文字]"]
台形	ID`[/`表示文字列`\]`	id11[/"id11[/文字\]"]
台形（逆）	ID`[\`表示文字列`/]`	id12["1d12[\文字/]"/]
２重円	ID`(((`表示文字列`)))`	id13((("id13(((文字)))")))
	サブグラフ
ノードの階層構造	`subgraph` ID`[`文字`]` ～～ `end` `subgraph` ID ～～ `end`	形状は長方形のみ
	リンク	flowchartでは、A---BとA-->Bは同義
通常	`-->` `---`
破線	`-.->` `-.-`
太線	`==>` `===`
	スタイル: `style`	ノード、サブグラフのIDごとに指定 `style` ID `fill:`#0ff`,stroke:`#f0f
塗りつぶし色	`fill:`#0ff
線の色	`stroke:`#f0f
線の太さ	`stroke-width:`3px
フォントサイズ	`font-size:`20px	ノードに有効、サブグラフに指定しても無効

まとめ

この記事では、Zenn記事（非機能要求グレードの歩き方シリーズ）を半年間、週1本のペースで書き続けた経験をもとに、試行錯誤の中で得た知見を整理したものです。
　ここで触れた内容は、初めてZenn記事を書く際に多くの人が一度はぶつかるポイントだと思います。
この記事が、その最初の一歩を少しでもスムーズに進める助けになれば幸いです。

最後に、NTTデータの金融高度技術本部では、ともに金融ITの未来を切り拓く仲間を募集しています。

[募集要領]

[NTTデータ金融分野の取り組み]

脚注

同じ脚注aの繰り返し指定 ↩︎ ↩︎ ↩︎
同じ脚注1の繰り返し指定
空行まで改行しても脚注ブロックは続く
 による改行も使える ↩︎ ↩︎ ↩︎

NTT DATA TECH

NTT DATA公式アカウントです。技術を愛するNTT DATAの技術者が、気軽に楽しく発信していきます。当社のサービスなどについてのお問い合わせは、お問い合わせフォーム nttdata.com/jp/ja/contact-us/ へお願いします。

設定によりコメント欄が無効化されています