2025年10月1日 · FabLab Westharima Team · ドキュメント · 6 min read

Markdown マークダウン記法 | 応用編チートシート

Markdownの応用的な記法をまとめた日本語ガイド。表、引用、タスクリスト、HTML併用、アクセシビリティ対応など、より高度な機能を解説します。

Markdownの応用的な記法をまとめた日本語ガイドです。基礎を理解した方向けの高度な機能を解説します。

📖 基礎編はこちら - 見出し、リスト、リンク、画像などの基本

引用

> 一段階の引用
>> 二段階の引用
>>> 三段階の引用

> 引用内でも **太字** や `コード` が使える
>
> 複数段落にわたる引用も可能

実用例

> "プログラムは人間が読むためのものであり、
> たまたま機械が実行できるだけである"
> - Harold Abelson

> ⚠️ **警告**
> この操作は元に戻せません。

タスクリスト（チェックボックス）

- [ ] 未完了タスク
- [x] 完了タスク
- [ ] ネストしたタスク
  - [x] サブタスク1
  - [ ] サブタスク2

実用例

## プロジェクト進行状況

- [x] 要件定義
- [x] 設計
- [ ] 実装
  - [x] フロントエンド
  - [ ] バックエンド
- [ ] デプロイ

📝 対応環境: GitHub、GitLab、Notion、Obsidian など

表（テーブル）

基本の表

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| データ1 | データ2 | データ3 |
| データ4 | データ5 | データ6 |

配置指定

| 左寄せ | 中央寄せ | 右寄せ |
|:-------|:--------:|-------:|
| Left | Center | Right |
| データ | データ | データ |

実用例

| 機能 | 無料プラン | 有料プラン |
|:-----|:----------:|:----------:|
| ユーザー数 | 5人まで | 無制限 |
| ストレージ | 1GB | 100GB |
| サポート | ❌ | ✅ |

💡 ポイント: セル内で改行する場合は <br> を使用

文字色の変更

Markdown標準では文字色の変更はできませんが、HTMLを併用することで実現できます。

基本形

<span style="color: red;">赤色のテキスト</span>
<span style="color: #0066cc;">青色のテキスト</span>
<span style="color: green;">緑色のテキスト</span>

背景色との組み合わせ

<span style="color: white; background-color: red; padding: 2px 6px;">エラー</span>
<span style="color: white; background-color: green; padding: 2px 6px;">成功</span>
<span style="color: black; background-color: yellow; padding: 2px 6px;">警告</span>

脚注（Footnotes）

本文中の脚注[^1]や複数の脚注[^note]を使用。

[^1]: これは脚注の内容です。
[^note]: こちらも脚注。**太字**や[リンク](https://example.com)も使えます。

📝 対応環境: GitHub、GitLab、多くの静的サイトジェネレータ

定義リスト

用語1
: 定義文1。複数行にわたることも可能です。

HTML
: HyperText Markup Language
: Webページを作成するためのマークアップ言語

CSS
: Cascading Style Sheets

折りたたみ（details/summary）

<details>
  <summary>クリックして詳細を表示</summary>

  折りたたまれたコンテンツ。 - リスト - **太字** - `コード`
</details>

実用例

<details>
  <summary>📚 目次</summary>

  1. [はじめに](#はじめに) 2. [使い方](#使い方) 3. [FAQ](#faq)
</details>

<details>
  <summary>⚠️ 注意事項</summary>

  この操作を実行する前に以下を確認してください： - バックアップの取得 - 権限の確認
</details>

HTML との併用

基本原則

最小限の使用: Markdownで不可能な場合のみ
正しいHTML: 未閉じタグは禁止
セキュリティ: 危険な属性は避ける
空行: HTMLブロック前後に空行

よく使うHTMLタグ

<!-- 装飾 -->
<u>下線</u>
<del>削除</del>
<sub>下付き</sub>
<sup>上付き</sup>

<!-- レイアウト -->
<div align="center">中央寄せ</div>

<!-- メディア -->
<video controls width="600">
  <source src="movie.mp4" type="video/mp4" />
</video>

⚠️ 避けるべき要素

JavaScript: onclick、onload など
危険なCSS: position: fixed など
外部スクリプトの読み込み

アクセシビリティのポイント

見出し構造

✅ 良い例:
# メインタイトル（H1）
## セクション1（H2）
### サブセクション（H3）
## セクション2（H2）

❌ 悪い例:
# メインタイトル
### いきなりH3（H2をスキップ）

画像の代替テキスト

✅ 良い例:
![グラフ: 2024年売上推移。1月100万円から12月180万円まで右肩上がり](./sales.png)

❌ 悪い例:
![グラフ](./sales.png)
![](./sales.png)

リンクテキスト

✅ 良い例:
[Markdownガイドの公式サイト](https://markdownguide.org)

❌ 悪い例:
[こちら](https://markdownguide.org)
[クリック](https://markdownguide.org)

SEOのベストプラクティス

見出し階層: 論理的な構造を保つ
内部リンク: 関連ページへの適切なリンク
画像最適化: ファイルサイズと代替テキスト
読みやすさ: 適切な段落分けと空白

参考リンク

📚 公式・仕様

CommonMark Spec - Markdown標準仕様
GitHub Flavored Markdown Spec - GitHub拡張仕様
Markdown Guide - 包括的ガイド

🛠️ ツール

Dillinger - オンラインエディタ
StackEdit - ブラウザエディタ
Typora - デスクトップエディタ
markdownlint - リンター

🎨 拡張・プラグイン

Mermaid - 図表作成
KaTeX - 数式表示
Prism.js - シンタックスハイライト

🌐 プラットフォーム固有

💡 最後に

Markdownの応用的な機能を活用することで、より豊かな表現が可能になります。

重要なポイント:

基本を重視: 凝った記法より可読性を優先
環境確認: 使用プラットフォームの対応状況を把握
プレビュー活用: 表示確認を怠らない

📖 基礎編に戻る

最終更新: 2025年10月1日