ゆめさくコード

5分でわかる Markdownの基本

luagate/markdownMarkdownについて24 枚Web 開発
スライド103触れる図解124レッスンの導入6

上から下へ、全 24 枚そのまま並べています。

発表モードで開く

5分でわかる Markdownの基本

エンジニアの「書く」を変える軽量マークアップ言語

1
1

目次

Markdownの基本

学習内容

１　Markdownとは？

２　基本の記法を覚える

３　実際に使われる場面

４　理解度チェック

2
2

Markdownについて

1

Markdownとは？

3
3
Markdownについて

Markdownとは_e2e_e2e_e2e

テキストベースの軽量マークアップ言語です。

Markdownaaa

プレーンテキストに # や ** などの記号を使って書式を指定し、HTMLなどに変換できる記法。2004年にJohn Gruberが考案。GitHubやNotion、Slack、Zenn、Qiitaなど多くのツールが対応している。

イメージ
4
4
Markdownについて

なぜMarkdownが選ばれるのか

特別なソフトを買わなくても、テキストエディタさえあればすぐに書ける。

シンプルに書ける

  • 特別なソフト不要
  • テキストエディタだけで完結
  • 記号を覚えるだけで使える

どこでも使える

  • GitHubのREADMEやIssue
  • NotionやZennなどのメモツール
  • スライドや技術ブログの執筆
5
5
Markdownについて

Markdownの立ち位置

文書を書くための技術の中で、Markdownは最もシンプルな存在です。

文書作成の手段
リッチエディタ
Word書式が複雑
Google Docs共有は便利
マークアップ言語
HTMLタグが冗長
Markdownシンプル！
プレーンテキスト
.txt書式なし
6
6

Markdownについて

2

基本の記法を覚える

7
7
Markdownについて

見出しとテキスト装飾

・# の数で見出しの階層を表し、** や ~~ でテキストを装飾します。

Markdown
# 見出し1（h1）
## 見出し2（h2）
### 見出し3（h3）

**太字にする**
*斜体にする*
~~打ち消し線~~
8
8
Markdownについて

リストの書き方

・- で箇条書き、1. で番号付きリスト。インデントでネストも可能。

Markdown
- 箇条書きA
- 箇条書きB
  - ネストした項目
  - さらにネスト

1. 手順1
2. 手順2
3. 手順3
9
9
Markdownについて

リンク・画像・引用

・[テキスト](URL) でリンク、![](URL) で画像、> で引用を書けます。

Markdown
[Google](https://google.com)

![ロゴ画像](./logo.png)

> これは引用です。
> 複数行も書けます。
10
10
Markdownについて

コードブロック

・バッククォート3つで囲み、言語名を指定するとシンタックスハイライトされます。

JavaScript
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

greet("World");
11
11
Markdownについて

Markdownの記法 → 表示結果

・記号で書いたテキストが、ブラウザ上ではこのように変換されます。

Markdownで書くと

記法
# 見出し1
**太字テキスト**
- リスト項目
｀console.log()｀
[リンク](URL)

こう表示される

表示結果
大きな見出し
太字テキスト
• リスト項目
console.log()
リンク（青い下線付き）
12
12
Markdownについて

Markdown記法チートシート

よく使う記法を一覧にまとめました。

表示結果
用途

# テキスト

見出し

セクション分け

**テキスト**

太字

強調したい語句

- テキスト

箇条書き

項目の列挙

｀コード｀

インラインコード

変数名・コマンド

｀｀｀言語名

コードブロック

サンプルコード

> テキスト

引用

参照・補足

13
13

Markdownについて

3

実際に使われる場面

14
14
Markdownについて

Markdownが活躍する5つの場面

エンジニアの日常業務のほぼ全てでMarkdownが使われています。

GitHub
  • README
  • Issue
  • Pull Request
技術ブログ
  • Zenn
  • Qiita
  • はてなブログ
ドキュメント
  • 社内Wiki
  • 仕様書
  • 議事録
AIプロンプト
  • ChatGPT
  • Claude
  • Gemini
ノートツール
  • Notion
  • Obsidian
  • Bear
15
15
Markdownについて

Markdownで文書を作る流れ

テキストエディタで書いて、プレビューで確認、そして共有。

記法を書く
記法を書く

テキストエディタで # や ** を使って文書を作成する

プレビュー確認
プレビュー確認

GitHub やエディタのプレビューで見た目を確認する

コミット・共有
コミット・共有

GitHubにpushして、チームメンバーと共有する

レビュー・更新
レビュー・更新

フィードバックを受けてテキストを修正する

16
16
Markdownについて

Markdownの利用率

エンジニアの業務でMarkdownが使われている場面の割合（想定値）。

95 %765738190
95%
88%
75%
65%
50%
30%
README
Issue/PR
技術ブログ
社内Wiki
AIプロンプト
スライド

出典: 想定値（実際の調査データではありません）

17
17
Markdownについて

Markdownの学習ステップ

段階的に覚えていけば、1週間で自在に使えるようになります。

見出し・太字
リスト
リンク・画像
コードブロック
テーブル
18
18

Markdownについて

4

理解度チェック

19
19
Markdownについて
クイズ

Markdownクイズ

学んだ内容を確認しましょう。

Markdownで「太字」にする記法はどれ？

A
**テキスト**
B
__テキスト__
C
##テキスト##
D
<b>テキスト</b>
20
20
Markdownについて
答え

Markdownクイズ — 回答

Markdownで「太字」にする記法はどれ？

A
**テキスト**
B
__テキスト__
C
##テキスト##
D
<b>テキスト</b>

正解は #1 です。

21
21
Markdownについて

覚えておきたい用語

Markdownに関連する重要な用語。

GFM（GitHub Flavored Markdown）

GitHubが拡張したMarkdownの方言。チェックリスト、テーブル、取り消し線などが追加されている。

・標準Markdownより機能が豊富

・GitHubだけでなくZenn・Qiitaなどでも広く対応

・技術文書のデファクトスタンダード

22
22
Markdownについて

今日からMarkdownを使ってみよう

覚える記号はたったこれだけ。30分で基本をマスターできます。

  • # で見出し、** で太字、- でリスト
  • ｀｀｀ で囲んでコードブロック
  • まずはREADMEやメモから書いてみる
  • GitHubやNotionで実際にプレビューを確認
  • 使い続ければ「書くこと」が楽しくなる
23
23
"

Markdownを覚えると、書くことへの摩擦がなくなる。 アイデアをそのままテキストに落とせる。

— まとめ

24
24