メインコンテンツへスキップ

Markdown記法/書き方（見出し・表・リンク・画像・文字色など）

 

Markdown（マークダウン）とは

Markdown(マークダウン)とは、「# 見出し」「* リスト」など、シンプルな書き方で文書構造を明示でき、装飾されたHTML文書に変換できる軽量マークアップ言語です。
このページでは、Markdown記法でよく使う「見出し・テーブル表・リンク・画像・文字色・強調・箇条書き」などの書き方をまとめています。

 

見出し

CleanShot 2025-05-26 at 17.19.01@2x.png

行頭に「#」をつけると、見出し形式になります。
「#」の数が見出しレベルです。

入力例 表示結果
# 見出し1です
## 見出し2です
### 見出し3です		 CleanShot 2024-01-19 at 11.34.45@2x.png

 

 

太字・斜体・訂正線・下線

CleanShot 2025-05-26 at 17.19.01@2x.png

  • ** または __ によって囲まれた文字列は「太字」になります。
    • 鉤括弧や丸括弧の前後は太文字になりません。使用する際は、半角スペースを入力してください。
  • * または _ によって囲まれた文字列は「斜体」になります。
  • ~~ で囲まれた文字は「訂正線（取り消し線）」になります。
  • <u></u> で囲まれた文字は「下線」になります。
入力例 表示結果
これは **太字** です。
これは __太字__ です。
これは *斜体* です。
これは _斜体_ です。
これは ~~訂正線~~です。
これは<u>下線</u>です。		 CleanShot 2024-01-19 at 11.39.53@2x.png

 

URLリンク

CleanShot 2025-05-26 at 17.21.12@2x.png

[表示テキスト](URL) でURLリンクになります。

入力例 表示結果
[ドキュメント情報共有サービス NotePM](https://notepm.jp) CleanShot 2024-01-19 at 11.43.03@2x.png

 

引用

CleanShot 2025-05-26 at 17.22.06@2x.png

行頭に > を付けると引用になります。

入力例 表示結果
> これは引用です。
> これは引用です。これは引用です。		 CleanShot 2024-01-19 at 11.46.19@2x.png

 

code（コードブロック/インラインコード）

CleanShot 2025-05-26 at 17.22.06@2x.png

  • `で囲まれた文字は「インラインコード」になります。
  • ```で囲まれた文字はコードブロックになります。
入力例 表示結果
これは `code` です
```
void hello()
{
console.log("Hello World!");
}
```		 CleanShot 2024-04-11 at 15.42.10.png
コードブロック右上に表示されている「Copy」をクリックすると、
ブロック内の文章をすべてワンクリックでコピーできます。

 

テキストカラー（文字の色）

Markdown記法では、文字の色は変更できません。
文字の色を変えたい場合は、以下のようにHTMLタグを使用してください。

入力例 表示結果
これは<span style="color: red; ">赤文字</span>です CleanShot 2024-01-19 at 12.12.19@2x.png

 

リスト

チェックリスト

 

行頭に - [ ] - [x] を付けると、チェックリストになります。

入力例 表示結果
- [ ] これからやるタスク
    - [ ] Tabキーでインデント（字下げ）
- [x] 完了したタスク		 スクリーンショット 2024-09-05 16.49.50.png

 

箇条書きリスト

CleanShot 2025-05-26 at 17.19.01@2x.png

行頭にハイフン- 、アスタリスク* 、プラス+のいずれか付けると、箇条書きリストになります。

入力例 表示結果
- リスト１
- リスト２
    - Tabキーでインデント（字下げ）
* リスト１
* リスト２
    * Tabキーでインデント（字下げ）
+ リスト1
+ リスト2
    + Tabキーでインデント（字下げ）		 スクリーンショット 2024-09-05 16.50.09.png

 

番号付きリスト

CleanShot 2025-05-26 at 17.21.12@2x.png

「数字.」を入れると番号付きリストになります。

入力例 表示結果
1. 番号リストA
1. 番号リストB
    1. 番号B-1【Tabキーでインデント（字下げ）】
    1. 番号B-2【Tabキーでインデント（字下げ）】
1. 番号リストC		 スクリーンショット 2024-09-05 16.52.55.png

 

リストの入力補助機能

リスト入力時にENTERキーを押すと、次のリストを自動的に生成します。
（チェックリストや箇条書きリスト形式も同様です）

CleanShot 2025-05-26 at 17.08.05.gif

 

インデント

Tabキーで文章の最初の部分に空白を挿入できます。
階層式に入力できるので、リストを作る際に便利です。

※リストの2行目以降とコードブロック内でのみ使用できます。

  • インデント（字下げ）
    • Tabキーでインデント（字下げ）することができます

 

絵文字を使う

［☺］ボタン、または :emoji:で 絵文字を入力できます。
オリジナルの絵文字を作成することもできます。
参考：カスタム絵文字を追加・確認・削除する

CleanShot 2025-05-27 at 13.29.07.gif

入力例 表示結果

絵文字もかんたん

いいね:smile: :+1:

 CleanShot 2024-01-19 at 12.40.50@2x.png

 

アコーディオン（折りたたみ）表示

文章を折りたたむことができます。
※アコーディオンのタイトルには、見出しやリンクを指定できません。

CleanShot 2025-05-26 at 16.59.24.gif

入力例 表示結果

<details>
<summary>タイトル</summary>

内容を
ここに記載する
</details>

 CleanShot 2024-01-19 at 12.31.25@2x.png
  • 本文は1行空行にして、2行目から入力してください。
  • アコーディオンの前後は空行にしてください。表示が崩れる場合があります。

 

ファイル挿入

CleanShot 2025-05-26 at 17.22.06@2x.png

![代替テキスト](URL) でファイルが表示されます。
詳しくは「ファイルをページ内に埋め込む・添付する」をご参照ください。

入力例 表示結果
![フクロウ](https://notepm.jp/build/assets/apple-touch-icon-120x120-2ee67c72.png) NotePMロゴ（正方形）.png

 

水平線（罫線）

３つ以上の - * _ だけを入力した行は水平線（罫線）になります。

※水平線の前後の行は空行にしてください。

入力例 表示結果
***
*****
---
-------
_ _ _		 CleanShot 2024-01-19 at 12.26.59@2x.png

 

Table(テーブル)

CleanShot 2025-05-27 at 13.31.33@2x.png

以下のように書くとテーブルで表示されます。

入力例 表示結果
| TH | TH |
| ---- | ---- |
| TD | TD |
| TD | TD |		 CleanShot 2024-01-19 at 12.29.14@2x.png
テーブル入力補助については以下をご参照ください。
MarkdownでTable(テーブル)を書く

 

注釈

文中に注釈を入れることができます。

入力例 表示結果

テキストA[^1]
テキストB[^2]
テキストC[^3]

 

[^1]: テキストAの注釈
[^2]: テキストBの注釈
[^3]: テキストCの注釈

 CleanShot 2024-12-04 at 15.04.58.png
  • テキストと注釈の内容の行間は、1行以上開けてください。
  • [^1]:のあとには半角スペースを入れてください。

 

テキストを隠す・非表示にする

<!--テキスト-->で、文中のテキストを非表示にできます。

CleanShot 2025-05-27 at 13.33.35@2x.png

 

PlantUML記法

PlantUML記法でシーケンス図、コンポーネント図などのUMLを描画できます。
コードブロック記法に uml ラベルで PlantUML記法になります。

```uml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
```

CleanShot 2025-05-27 at 13.34.37@2x.png

PlantUML公式ページ： http://plantuml.com/ja/
PlantUMLサンプル集： https://real-world-plantuml.com/

 

Mermaid記法

Mermaid記法は、テキストでグラフやチャートを描ける記法で、フローチャートやシステム開発で使われるシーケンス図、ガントチャートなどを表示できます。

詳しくは「Mermaid記法の書き方（Markdownテキストでチャート・グラフが描ける）」をご参照ください。

 

数式

コードブロックの言語指定に math を指定することで、TeX記法を用いて数式を描画できます。

参照：LaTeX記法について（ウィキペディア）

 

おすすめの情報共有ツール「NotePM」

NotePM

NotePM（ノートピーエム） は、Webで簡単にマニュアル作成できて、強力な検索機能でほしい情報をすぐに見つけられるサービスです。さまざまな業界業種に導入されている人気サービスで、大手IT製品レビューサイトでは、とくに『使いやすいさ・導入しやすさ』を高く評価されています。

NotePMの特徴

  • マニュアル作成、バージョン管理、Markdown対応
  • 強力な検索機能。PDFやExcelの中身も全文検索
  • 社内FAQ・質問箱・社内ポータルとしても活用できる
  • 銀行、大学も導入している高度なセキュリティ。安全に情報共有できる

URL: https://notepm.jp/

CleanShot 2024-12-10 at 15.33.17.png

NotePMについて詳しく見る ＞

関連記事