Markdown記法と書き方
# 目次
- [Markdown（マークダウン）とは](#markdownマークダウンとは)
- [見出し](#見出し)
- [テキストの装飾（強調・斜体・打ち消し線・下線・文字色・サイズ）](#テキストの装飾)
- [リスト](#リスト)
- [画像](#画像)
- [リンク](#リンク)
- [コード（コードブロック・インラインコード）](#コード)
- [チェックボックス](#チェックボックス)
- [引用](#引用)
- [折りたたみ](#折りたたみ)
- [数式](#数式)
- [テーブル](#テーブル)
- [差し込みメモ](#差し込みメモ)
- [UMLやフローチャートシーケンス図](#umlやフローチャートシーケンス図)
    - [Mermaid (マーメイド) 記法](#mermaid-マーメイド-記法)
    - [PlantUML記法](#plantuml記法)
- [注釈](#注釈)

## Markdown（マークダウン）とは
Markdown（マークダウン）は、簡単な記号を使って文章の構造や装飾を指定できるマークアップ言語です。例えば、`#`で見出し、`*`で強調、`-`で箇条書きなどを表現できます。HTMLに変換可能で、文書作成やブログ投稿によく使われています。

### DocBaseでのMarkdownの書き方
DocBaseではMarkdownの標準化された仕様である**CommonMark**を採用していますので安心して利用いただけます。

またDocBaseのMarkdownエディタは、画面左側で直接Markdownを編集しながら、右側でリッチテキストとして直接編集できる[ハイブリッドモード](https://help.docbase.io/posts/3277664)を搭載しています。
「Markdownの記法を覚えたいけど、最初は難しそう...」という方にもおすすめです。

![27696c27-adb0-437f-ba24-47d7c7cde8c3-1.png](https://image.docbase.io/uploads/5f316aa2-97b3-49ac-8a68-0dd1aa170094.png =600x374)

# 見出し

`# `（シャープと半角スペース）の後に文字を書くと、その行は見出しとして表示されます。
`#`の数によって見出しのレベルを表すことができます。
また、レベル1とレベル2の見出しは代替の記法があります。
```
# 見出しレベル1
## 見出しレベル2
### 見出しレベル3
#### 見出しレベル4
##### 見出しレベル5

見出しレベル1
=========

見出しレベル2
---------
```

**実際の表示**
# 見出しレベル1
## 見出しレベル2
### 見出しレベル3
#### 見出しレベル4
##### 見出しレベル5

見出しレベル1
=====

見出しレベル2
---------

## ハイブリッドモード（リッチテキスト）での操作方法
[ハイブリッドモード](https://help.docbase.io/posts/3277664)または[リッチテキストモード](https://help.docbase.io/posts/3027206)から簡単に入力できます。

![head.gif](https://image.docbase.io/uploads/d2fca31a-f3a2-4a61-85d6-f0b503dc3d1a.gif =WxH)

詳しくはこちらをご確認ください。
#{3277692}

# テキストの装飾
## 強調
強調したいテキストは`**`（アスタリスク2つ）で囲みます。
```
お寿司は**とても**おいしいです。
```
**実際の表示**
お寿司は**とても**おいしいです。

## 斜体
斜体で表示したいテキストは`*`（アスタリスク1つ）で囲みます。
```
好きな寿司ネタは*炙りサーモン*です。
```
**実際の表示**
好きな寿司ネタは*炙りサーモン*です。

## 打ち消し線
打ち消し線を引きたいテキストは`~~`（チルダ2つ）で囲みます。
```
お寿司は~~おいしくない~~おいしいです。
```
**実際の表示**
お寿司は~~おいしくない~~おいしいです。

## 下線
下線を引きたいテキストは`<u></u>`で囲みます。
```
お寿司は<u>おいしい</u>です。
```
**実際の表示**
お寿司は<u>おいしい</u>です。

## ハイライト
下線を引きたいテキストは`<mark></mark>`で囲みます。
```
好きな寿司ネタは<mark>炙りサーモン</mark>です。
```
**実際の表示**
好きな寿司ネタは<mark>炙りサーモン</mark>です。

## 文字色とサイズ
Markdown記法では文字色やサイズ変更は対応していません。
HTMLタグを記入するか、[リッチテキストモード](https://help.docbase.io/posts/3027206)または[ハイブリッドモード](https://help.docbase.io/posts/3277664)からテキストを選択することで変更できます。

```
好きな寿司ネタは<span style="color:green;">炙りサーモン</span>です。
好きな寿司ネタは<span style="font-size:150%;">炙りエンガワ</span>です。
```
**実際の表示**
好きな寿司ネタは<span style="color:green;">炙りサーモン</span>です。
好きな寿司ネタは<span style="font-size:150%;">炙りエンガワ</span>です。

## ハイブリッドモード（リッチテキスト）での操作方法
[ハイブリッドモード](https://help.docbase.io/posts/3277664)または[リッチテキストモード](https://help.docbase.io/posts/3027206)から簡単にテキストを装飾することができます。

1. 装飾したいテキストを選択
1. メニューから任意のボタンを選択

![highlight.gif](https://image.docbase.io/uploads/f50ca581-3c15-42e7-b4b9-181347823efa.gif =WxH)

詳しくはこちらをご確認ください。
#{3277703}

# リスト
## 番号なしのリスト
順序が関係ないリストは、行の先頭に`* `（アスタリスクと半角スペース）もしくは`- `（ハイフンと半角スペース）を入れ、テキストを書きます。
リストを入れ子にすることもできます。
```
* タイ
* ヒラメ
* 軍艦
    * ウニ
    * イクラ

- マグロ
- カツオ
- 炙りもの
    - 炙りサーモン
    - 炙りエンガワ
```
**実際の表示**
* タイ
* ヒラメ
* 軍艦
    * ウニ
    * イクラ

---

- マグロ
- カツオ
- 炙りもの
    - 炙りサーモン
    - 炙りエンガワ
 
## 番号ありのリスト
`1. `など、数字の後にドットと半角スペースを入れテキストを書きます。
```
1. マグロ
1. カツオ
1. タイ
1. ヒラメ
```
**実際の表示**

1. マグロ
1. カツオ
1. タイ
1. ヒラメ

## ハイブリッドモード（リッチテキスト）での操作方法
[ハイブリッドモード](https://help.docbase.io/posts/3277664)または[リッチテキストモード](https://help.docbase.io/posts/3027206)からリストアイテムをドラッグ＆ドロップで並び替えできます。

![dragdrop2.gif](https://image.docbase.io/uploads/be20a28a-a904-4304-aa27-cb6190f9addb.gif =WxH)

# 画像

画像は以下の記法で表すことができます。
`[]`内は画像のタイトル、`()`内は画像のURLです。
タイトルは空欄でも表示できます。
```
![ロゴ](https://docbase.io/logo.png)
```
**実際の表示**
![ロゴ](https://docbase.io/logo.png)

## 画像のサイズ指定
次のように画像のURLの後ろに半角スペースをあけ、`=幅ピクセルx縦ピクセル`で画像サイズを指定できます。`x`は半角アルファベットのエックスです。

**※ 画像のサイズ指定はMarkdownの標準機能ではなく、DocBase独自の拡張機能です。**

```
![](画像URL =100x100)
```

また、幅サイズと縦サイズの指定はそれぞれ省略可能です。

```
![](画像URL =100x) // 縦を省略
![](画像URL =x100) // 幅を省略
```

### 縦横200pxで指定した場合
```
![](https://docbase.io/ogp.png =200x200)
```
**実際の表示**
![](https://docbase.io/ogp.png =200x200)


### 幅200pxで指定した場合
```
![](https://docbase.io/ogp.png =200x)
```
**実際の表示**
![](https://docbase.io/ogp.png =200x)

### 縦200pxで指定した場合
```
![](https://docbase.io/ogp.png =x200)
```
**実際の表示**
![](https://docbase.io/ogp.png =x200)

### フルサイズでの表示
縦長の画像の場合、自動的にサイズを小さくして表示しますが、`=full`と指定することでフルサイズで表示するように指定できます。

```
![](https://docbase.io/ogp.png =full)
```
**実際の表示**
![](https://docbase.io/ogp.png =full)

## ハイブリッドモード（リッチテキスト）での操作方法
[ハイブリッドモード](https://help.docbase.io/posts/3277664)または[リッチテキストモード](https://help.docbase.io/posts/3027206)から簡単に画像サイズを変更できます。

![size.gif](https://image.docbase.io/uploads/4ed744b7-feba-4dbb-8475-03f3f58b4225.gif =WxH)

詳しくはこちらをご確認ください。
#{3277706}


# リンク

リンクは以下の記法で表すことができます。
`[]`の中はリンクさせたいテキスト、`()`の中はURLです。
画像の記法とよく似ていますが、リンクには画像にある先頭の`!`がありません。
```
[寿司 - Wikipedia](http://ja.wikipedia.org/wiki/%E5%AF%BF%E5%8F%B8)
```
**実際の表示**
[寿司 - Wikipedia](http://ja.wikipedia.org/wiki/%E5%AF%BF%E5%8F%B8)

## DocBase内の他のメモへのリンク
`[Markdownの書き方](https://help.docbase.io/posts/13697/)`のように普通にリンクで書くこともできますが、投稿画面で`#[`と入力すると最近投稿されたメモのリストが出てくるので便利です。（最新100件が候補に表示されます。）

![link.gif](https://image.docbase.io/uploads/b512aaf7-1e62-4701-b97f-a62bf4d718f7.gif)

# コード

## コードブロック
コードブロックを書くには<code>\`\`\`</code>（バッククオート3つ）で段落を囲みます。
<code>\`\`\`</code>の後に言語の名前を書くと、その言語に合わせてコードがハイライトされます。

また、コードブロックにはファイル名を指定することができます。
はじめの<code>\`\`\`</code>の後、または言語指定の後に`:`を先頭に付けて書いた文字がファイル名として表示されます。

\`\`\`ruby:sushi.rb
def sushi
  puts 'お寿司'
end
\`\`\`


**実際の表示**
```ruby:sushi.rb
def sushi
  puts 'お寿司'
end
```

## インラインコード
文章の中にインラインのコードを書くこともできます。
その場合は<code>\`</code>（バッククオート1つ）でテキストを囲みます。
```
寿司をローマ字で書くと`sushi`です
```
**実際の表示**
寿司をローマ字で書くと`sushi`です

# チェックボックス

チェックボックスは`- [ ]`の後にテキストを書くことで表せます。
未チェックの場合は`[]`の中に半角スペース、チェック済みの場合は`[]`の中に`x`（エックス）を入れます。
**※リストの中、かつ`[ ]`の後にテキストがなければ表示されません。**
```
- [ ] マグロ
- [ ] コハダ
- [x] エンガワ
```
**実際の表示**
- [ ] マグロ
- [ ] コハダ
- [x] エンガワ

※チェックボックスに続けて半角の`(`を書く場合、Markdownがうまくパースできず正常に表示できなくなってしまうので、以下のように`(`の前に`\`をつけてください。
```
- [ ] \(abc)
```


# 引用

引用は`> `（不等号と半角スペース）の後にテキストを書きます。
1行目に`>`を書いておけばその後に続く行も引用とみなされます。
```
> お寿司が好きです。
毎日食べたいです。
```
**実際の表示**
> お寿司が好きです。
毎日食べたいです。


# 折りたたみ

`<details>`タグでコンテンツを折りたたむことができます。
※ 折りたたまれる内容は`<div>`タグで囲ってください。

```
<details><summary>詳細を見る</summary><div>

- 寿司
  - エンガワ
  - 炙りサーモン
</div></details>
```

**実際の表示**
<details><summary>詳細を見る</summary><div>

- 寿司
  - エンガワ
  - 炙りサーモン
</div></details>

## ハイブリッドモード（リッチテキスト）での操作方法
[ハイブリッドモード](https://help.docbase.io/posts/3277664)または[リッチテキストモード](https://help.docbase.io/posts/3027206)からテキストを選択して、ツールバーまたはテキスト選択メニューの「折りたたみ」ボタンを押すと、選択範囲のテキストを`<details>`タグで囲むことができます。

![ec455213-c9b2-4152-92cb-d05619cd707b.gif](https://image.docbase.io/uploads/7f8d7865-dd77-4f97-a868-320986b5d262.gif =WxH)

# 数式

数式はコードブロックの言語指定を`math`にすると表示できます。
使用できる記法はTeX記法（MathJax）になります。

### ブロック数式
次の例では、`\begin{equation}`と` \end{equation}`で囲むとブロックの数式として表示されます。
詳しくは[LaTeXの数式の書き方（外部ページ）](https://en.wikibooks.org/wiki/LaTeX/Mathematics)を参照してください。

    ```math
    \begin{equation}
    sushi=
    \begin{pmatrix}
    ** & \cdots & \cdots & \cdots & \cdots & ** \\
    \cdots & L & O & V & E & \cdots &\\
    \cdots & A & N & D & \cdots & \cdots \\
    \cdots & P & E & A & C & E \\
    ** & \cdots & \cdots & \cdots & \cdots & ** \\
    \end{pmatrix}
    \end{equation}
    ```

```math
\begin{equation}
sushi=
\begin{pmatrix}
** & \cdots & \cdots & \cdots & \cdots & ** \\
\cdots & L & O & V & E & \cdots &\\
\cdots & A & N & D & \cdots & \cdots \\
\cdots & P & E & A & C & E \\
** & \cdots & \cdots & \cdots & \cdots & ** \\
\end{pmatrix}
\end{equation}
```

### インライン数式
`$`と`$`で囲むとインライン数式として表示できます。

```
$ e^{i\theta} = \cos\theta + i\sin\theta $
```

**実際の表示**

$ e^{i\theta} = \cos\theta + i\sin\theta $

### 1行数式
`$$`と`$$`で囲むと1行の数式として表示できます。

```
$$ e^{i\theta} = \cos\theta + i\sin\theta $$
```

**実際の表示**

$$ e^{i\theta} = \cos\theta + i\sin\theta $$


### 数式が正常に表示されない場合

次のような数式の場合、`_` がMarkdownの斜体と認識されるため、正常に表示されません。

`$E'_R $, $E'_G$, $E'_B$`

エスケープすることで正常に表示されるようになります。

`$E'\_R $, $E'\_G$, $E'\_B$`

$E'\_R $, $E'\_G$, $E'\_B$


# テーブル

以下のように書くとテーブルを表すことができます。
2行目の`-`（ハイフン）は、セルひとつにつき最低3つ書く必要があります。

また、セルのアライン指定（右寄せ、左寄せ、中央寄せ）にも対応しています。
アライン指定したい列の`|---|`に`:`を追加します。
左寄せであれば`|:---|`、中央寄せであれば`|:---:|`、右寄せであれば`|---:|`と入力します。

```
|赤身|白身|軍艦|
|:---|:---:|---:|
|マグロ|ヒラメ|ウニ|
|カツオ|タイ|イクラ|
|トロ|カンパチ|ネギトロ|
```

**実際の表示**

|赤身|白身|軍艦|
|:---|:---:|---:|
|マグロ|ヒラメ|ウニ|
|カツオ|タイ|イクラ|
|トロ|カンパチ|ネギトロ|

詳しくは[Markdown 表テーブルの書き方](https://help.docbase.io/posts/3718072)をご確認ください。
#{3718072}

## ハイブリッドモード（リッチテキスト）での操作方法
[ハイブリッドモード](https://help.docbase.io/posts/3277664)または[リッチテキストモード](https://help.docbase.io/posts/3027206)から簡単にテーブルを操作できます。

![table2.gif](https://image.docbase.io/uploads/a332622f-da16-4f6f-854d-79188bffcec8.gif =WxH)

詳しくは[こちら](https://help.docbase.io/posts/3224067)をご確認ください。
#{3224067}


# 差し込みメモ

DocBaseの独自機能として、メモに他のメモを差し込むことができます。

`#{}`の波括弧の中にメモのid、またはURLを入れると、差し込みメモとして表示できます。
（URLが`https://help.docbase.io/posts/13674`であれば、`13674`の部分になります）

```
#{13674}
#{https://help.docbase.io/posts/13674}
```

**実際の表示**
#{13674}
#{https://help.docbase.io/posts/13674}

# UMLやフローチャート、シーケンス図

## Mermaid (マーメイド) 記法
Mermaid（マーメイド）とは、Markdownに似たシンプルなテキスト記法を利用して、動的な図やチャートを生成できるJavaScriptベースのツールです。

Mermaidで図を記述する際は、コードブロック内に「mermaid」言語識別子を指定し、その中に図の定義を記述します。以下は、シンプルなフローチャートの例です:

```mermaid
graph TD;
    A[開始] --> B[処理];
    B --> C{判断};
    C -- はい --> D[処理1];
    C -- いいえ --> E[処理2];
    D --> F[終了];
    E --> F;
```

~~~
```mermaid
graph TD;
    A[開始] --> B[処理];
    B --> C{判断};
    C -- はい --> D[処理1];
    C -- いいえ --> E[処理2];
    D --> F[終了];
    E --> F;
```
~~~

詳しくは[Mermaid (マーメイド) 記法と書き方](https://help.docbase.io/posts/3719897)をご確認ください。
#{3719897}

## PlantUML記法
PlantUMLは、テキスト記述からUML（Unified Modeling Language）図を自動生成するオープンソースのツールです。ソフトウェア設計や要件定義の視覚化に広く使用されています。

クラス間の関係や構造を表現する図です。

```uml
@startuml
class Car {
  - String model
  - int year
  + void start()
  + void stop()
}
class Driver {
  - String name
  + void drive(car)
}
Driver --> Car : drives
@enduml
```

~~~
```uml
@startuml
class Car {
  - String model
  - int year
  + void start()
  + void stop()
}
class Driver {
  - String name
  + void drive(car)
}
Driver --> Car : drives
@enduml
```
~~~

詳しくは[PlantUML記法と書き方](https://help.docbase.io/posts/3720083)をご確認ください。
#{3720083}

# 注釈

```
今夜は寿司[^1]です。

[^1]: 酢飯の上になんか色々乗せた食べ物
```

**実際の表示**

今夜は寿司[^1]です。

[^1]: 酢飯の上になんか色々載せた食べ物


[^1]: 酢飯の上になんか色々載せた食べ物

---
### マニュアル作成、ナレッジ共有なら「DocBase」
[![スクリーンショット 2024-05-27 16.46.03.png](https://image.docbase.io/uploads/d272e20f-7b7c-4d86-9c09-bb2c46badd78.png =WxH)](https://docbase.io/)

「情報や知識の共有がうまくいかない、特定の人に偏ってしまう」
「知識の再利用がうまくできれば、強い組織にできるのではないか？」
DocBaseはこのような弊社の課題から生まれたサービスです。

情報やナレッジの共有だけでなく、マニュアル整備が進まないのも、次のような「共有するための情報を作る難しさ」があります。

- 正しく立派なドキュメントを作らなくてはいけない
- 情報が多すぎてまとめる時間がない

DocBaseでは「正しく立派なドキュメントを作る」ではなく、「**小さく始めて、情報を育てて、チームを育てる**」をコンセプトにメモという小さな単位での情報共有、複数のメモを体系的にまとめて情報を育てる、複数人で同時にメモを作るということができるようになっています。

### DocBaseの特長
- <span style="color:#098117;">**3つの編集モード**</span>で誰でも使える、爆速で共有できる新エディター
- マニュアル作成に便利な<span style="color:#098117;">**画像に矢印やテキストを簡単に配置**</span>できるペイントモード
- <span style="color:#098117;">**OfficeファイルやPDFの中身も全文検索**</span>できる強力な検索機能
- <span style="color:#098117;">**ワンクリックで他のドキュメントを参照**</span>できるから情報の再利用が簡単
- みんなでメモを作り上げる強力な<span style="color:#098117;">**同時編集機能**</span>
- シングルサインオンや2段階認証、操作履歴、ISMS取得など<span style="color:#098117;">**安心のセキュリティ**</span>
- <span style="color:#098117;">**ChatGPTやClaudeなど様々なAIアプリとの連携機能**</span>でナレッジ共有を簡単自動化

👉 [AIアプリとの連携機能](https://help.docbase.io/posts/3919854)
👉 [その他、豊富な機能](https://docbase.io/features)

![feature.jpg](https://image.docbase.io/uploads/afbb63ce-64a7-4575-897b-d71c2e8e704b.jpg =WxH)

[![btn\_docbase\_banner.png](https://image.docbase.io/uploads/f8f94aff-8135-4ce3-be7b-3ff1ca3796a5.png =300x86)](https://docbase.io/teams/new)　[![btn\_docs\_dl\_banner.png](https://image.docbase.io/uploads/9f569fd5-5a38-4a64-901b-20c64aba907d.png =300x86)](https://docbase.io/document_requests/new)
