はじめに
知的生産 （情報を生産すること）を生業とするビジネスマンにとって、マークダウン記法は非常に便利なツールです。
僕に部下ができたらまずは、マークダウン記法を使った文章作成を教えたいと思います。
なぜなら、マークダウン記法を使うことによって、以下のような効果を得られるからです。
- 仕事を進める上で重要な 構造化する能力 を身につけることができる
- アウトプットを出す 時間を短縮 できる
そこで今回は、基本的なマークダウン記法をまとめてみました。
また、本記事は以下の記事を参照し執筆をさせていただきました。
参照: https://qiita.com/Qiita/items/c686397e4a0f4f11683d
マークダウンについておさらい
マークダウンを知る上で、欠かせないのが「マークアップ」です。以下の写真がマークアップ(写真の左)とマークダウン(写真の右)を比較したものになります。
写真左のように、マークアップ言語(markup language)とは、「タグ」と呼ばれる特定の文字列で囲むことで、元の文に構造・装飾などを反映させる言語のことです。例えば以下のようなものがあります。
「HTML（HyperText Markup Language）」
「CSS（Cascading Style Sheets）」
「XML（eXtensible Markup Language）」
一言でまとめれば、文章を構造化、装飾するマークアップをより簡単に使えるようにしたものが、マークダウンということになります。
それでは、以下に基本的なマークダウン記法をまとめていきたいと思います。
見出し
一番でかい見出し
2 番目にでかい見出し
3 番目にでかい見出し
上記を実現するマークダウン記法はこちら 👇（以下をコピペすることで上記のような表示になります。(markdown対応のブラウザや、vscodeなどで 拡張子を.mdとして保存する必要あり)）
# 一番でかい見出し
## 2番目にでかい見出し
### 3番目にでかい見出し
Note（補足説明）
これも初耳学
上記を実現するマークダウン記法はこちら 👇
:::note info
これも初耳学
:::
強調
強調
斜体（イタリック）
上記を実現するマークダウン記法はこちら 👇
:::note info
**強調**
*斜体（イタリック）*
:::
打ち消し
打ち消し
上記を実現するマークダウン記法はこちら 👇
~~打ち消し~~
折りたたみ
これもまた初耳学（open属性なし）
puts 'Hello, World'
開いた状態で表示される（open属性あり）
console.log("Hello, World");
上記を実現するマークダウン記法はこちら 👇
<details><summary>これもまた初耳学（open属性なし）</summary>
```rb
puts 'Hello, World'
```
</details>
<details open><summary>開いた状態で表示される（open属性あり）</summary>
```javascript
console.log('Hello, World');
```
</details>
Lists（リスト）
Bullet List（順序なしリスト）
- こんな感じ。これは便利だからよく使う。
-
-の後にスペース開けるのが注意するポイント
上記を実現するマークダウン記法はこちら 👇
- こんな感じ。これは便利だからよく使う。
- `-`の後にスペース開けるのが注意するポイント
Ordered List（番号付きリスト）
- こんな感じ。
- これも同様に
1.の後にスペース開けるのが注意するポイント
上記を実現するマークダウン記法はこちら 👇
1. こんな感じ。
2. これも同様に`1.`の後にスペース開けるのが注意するポイント
Description List（説明リスト）
- あんまり使わなさそう
- だけれど、こんなのも あるんだ。
上記を実現するマークダウン記法はこちら 👇
<dl>
<dt>あんまり使わなさそう</dt>
<dd>だけれど、<strong>こんなのも</strong> あるんだ。</dd>
</dl>
Checkbox（チェックボックス）
- タスク 1
- タスク 2
上記を実現するマークダウン記法はこちら 👇
- [ ] タスク1
- [x] タスク2
Blockquotes（引用）
これはよく使いますね。
ネストできるのは初耳学だわ。
上記を実現するマークダウン記法はこちら 👇
> これはよく使いますね。
>> ネストできるのは初耳学だわ。
Horizontal rules（水平線）
上記を実現するマークダウン記法はこちら 👇（ぼくは３つ目の書き方をいつも使ってます）
* * *
***
*****
---
---------------------------------------
Links（リンク）
リンク。ここにカーソルを合わせてみて。僕はハイパーテキストの魔術師なのでよくこれを使います。
上記を実現するマークダウン記法はこちら 👇
[リンク。ここにカーソルを合わせてみて。](https://www.youtube.com/@hirokishimizu39 "Youtubeやってます！ぜひみてください！")
テーブル
| 1 | 2 | 3 |
|---|---|---|
| なるほど | これは | 面白い |
| 今日も | 最高の 1 日に | しましょう |
| 読書 | 筋トレ | 心を整える |
上記を実現するマークダウン記法はこちら 👇
3x3 としたら、以下のテーブルが作成されます。
| 1 | 2 | 3 |
|:-:|:-:|:-:|
| | | |
| | | |
| | | |
コードブロック
- const こんな感じで;
+ const githubみたいに出来るのは初めて知りました;
- const pythonってセミコロンいらないですよね
+ const 確かぼくの記憶では
上記を実現するマークダウン記法はこちら 👇（以下をコピペすると上記のようになります。）
```diff_typescript
- const こんな感じで;
+ const githubみたいに出来のは初めて知りました;
```
```diff_python
- const pythonはセミコロンいらないですよね
+ const 確かぼくの記憶では
```
コードスパン
これはたまに使うので知っていたけれど、
``コードスパンのさらに外側を、n+1個多くバッククォートで囲むとこうなるんや。``
上記を実現するマークダウン記法はこちら 👇
`これはたまに使うので知っていたけれど、`
``` ``コードスパンのさらに外側を、n+1個多くバッククォートで囲むとこうなるんや。`` ```
脚注
個人的な話なのですが、以下のメディアにて発信しおりますので、ご興味があればぜひ見に来てください！
上記を実現するマークダウン記法はこちら 👇
- YouTube[^1]：海外エンジニア志望の1週間ルーティン動画・月１勉強進捗報告
- note[^2]：エンジニア日常ブログ
- X[^3]：駆け出しエンジニアの勉強報告・日報
- Qiita[^4]:技術ブログ
[^1]:https://www.youtube.com/@hirokishimizu39
[^2]:https://note.com/hirokishimizu39
[^3]:https://www.youtube.com/@hirokishimizu39
[^4]:https://qiita.com/hirokishimizu39