はじめに
Markdownは、ブログ記事、技術ドキュメント、GitHub の README など、現代のエンジニアリングにおいて最もよく使われる書式のひとつです。
AI時代になり、手軽にテキストを装飾・構造化できるMarkdownの重要性は更に高まっていると感じます。
Markdownに慣れるには、必要に応じて使っていくのが一番です。
ただ、すぐに使う機会がある方ばかりではないでしょう。
そのため本記事では、基礎11問・応用2問を「手を動かして練習できる問題集」としてまとめました。
この問題集の特徴
-
すべての問題が Before / After（変更前 / 変更後） で比較できる
-
解答は折りたたみ式
-
文章から Markdown に「整える」スキルを鍛える構成で、初心者でも取り組みやすい
※記法は各問題に記載していますが、まとまった情報は以下記事をご覧ください。
個人的に読みやすかった記事
Qiita公式
🌟 基礎問題1 見出し（H1）
以下の文章を、最上位の見出し（# 見出し）になるように整形してください。
使い方
このアプリはブラウザで動作します。
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
# 使い方
このアプリはブラウザで動作します。
🌟 基礎問題2 複数の見出し（H1/H2）
以下の文章を、H1（# 見出し）とH2（## 見出し）を使って構造化してください。
アプリの概要
画像編集アプリです
主な機能
影調整と色変更ができます
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
# アプリの概要
画像編集アプリです。
## 主な機能
影調整と色変更ができます。
🌟 基礎問題3 バレットリスト
以下の文章を、箇条書き（- 項目）として整形してください。
必要なものは以下の3つです。
PC
インターネット
ブラウザ
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
必要なものは以下の3つです。
- PC
- インターネット
- ブラウザ
🌟 基礎問題4 番号付きリスト
以下の文章を、番号付きリスト（1. 項目）に整形してください。
ブログを書くときはまず下調べ次に構成を作成最後に本文を書くのが良いです
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
ブログを書くときは以下の順が良いです。
1. 下調べ
1. 構成を作成
1. 本文を書く
🌟 基礎問題5 太字（Bold）
以下の文章を、重要語句を太字（**文字**）にして整形してください。
最も大切なのは ユーザー体験 です。
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
最も大切なのは **ユーザー体験** です。
🌟 基礎問題6 引用（Blockquote）
以下の文章を、引用ブロック（> 引用文）に整形してください。
継続こそ力なり
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
> 継続こそ力なり
🌟 基礎問題7 リンク
以下の URL を Markdown のリンク（[タイトル](URL)）として整形してください。
Qiita公式（ https://qiita.com ）を参考にしてください
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
[Qiita公式](https://qiita.com) を参考にしてください
🌟 基礎問題8 画像リンク
以下の情報を使い、画像リンク（）に整形してください。
| 変更後 |
|---|
 |
解答例
🌟 基礎問題9 コードブロック
以下のコードを、JavaScript のコードブロック（以下）に整形してください。
コードブロック
```言語名
コード内容
```
問題文
console.log("Hello Markdown");
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
```js
console.log("Hello Markdown");
```
🌟 基礎問題10 コードスパン（インラインコード）
以下の文章の中で、「value」をインラインコード（以下）にしてください。
インラインコード
`インラインコード`
問題文
変数名は value を使ってください
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
変数名は `value` を使ってください。
🌟 基礎問題11 テーブル
以下のデータをテーブル（以下）に整形してください。
テーブル（表）
| 1 | 2 |
|:-:|:-:|
| 1の内容 | 2の内容 |
商品 りんご 100円
商品 みかん 80円
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
| 商品 | 値段 |
|------|------|
| りんご | 100円 |
| みかん | 80円 |
🚀 応用問題1 自己紹介ページの構造化
以下の文章を、H1 / H2 / 箇条書き / 強調 / リンク を使って整形してください。
私の名前は〇〇です
〇〇でシステムエンジニアをしています
マイブームは読書とゲームと散歩です
Xは https://twitter.com/takatama_jphttps://x.com/Kohki_Takatama です
好きな技術ランキングは①JavaScript ②Markdown ③Ruby です
| 変更前 | 変更後 |
|---|---|
 |
 |
解答例
# 自己紹介
## プロフィール
**名前**：〇〇
**職業**：システムエンジニア
[Twitter（X）](https://x.com/Kohki_Takatama)
## マイブーム
- 読書
- ゲーム
- 散歩
## 好きな技術ランキング
1. JavaScript
2. Markdown
3. Ruby
🚀 応用問題2 技術記事を Markdown で構造化
以下の文章を、H1 / H2 / 画像リンク / テーブル / コードブロック / 引用 を使って整形してください。
このツールは画像を分析し結果を表示するアプリです
下の画像を見てください
（画像）
出力結果には3つの項目があります
精度 95%
ラベル cat
推論時間 12ms
コード例は
const result = await analyze(img);
console.log(result); です
引用元の記事では「このケースでは〇〇が有効である」と書かれています
| 変更前 | 変更後 |
|---|---|
 |
 
|
解答例
# 画像分析ツールの概要
このツールは画像を分析し、その結果を表示するアプリです。
## 入力画像
以下のサンプル画像を例に説明します。
## 出力結果
分析結果は次のとおりです。
| 項目 | 値 |
|------|------|
| 精度 | 95% |
| ラベル | cat |
| 推論時間 | 12ms |
## コード例
```js
const result = await analyze(img);
console.log(result);
```
引用元の記事には、以下の記載があります。
> このケースでは〇〇が有効である
終わりに
この問題集では、Markdown の主要な構文を 11 の基礎問題 として体系的に扱い、
さらに 実務・技術ブログレベルの応用問題 を通して総合力を養えるように構成しました。
Markdownが使えるサービスは多々あります。
- Qiita / Zenn のような技術記事プラットフォーム
- Dicord / Slack のようなコミュニケーションツール
- Notion / Backlog などのプロジェクト管理ツール
サービスによっては使えない記法もありますし、
サービス特有の記法が用意されていることもあります。
例えば Qiita の記法は以下にまとめられています。
興味がある方は、ぜひ見てみてください。