マークダウン入門ナビ 
Markdown（マークダウン）でドキュメントやREADME、技術ブログ、メモを執筆していると、「重要なポイントを目立たせたい」「警告（Warning）や注意書きを枠で囲みたい」「補足情報（Note/Tip）を分かりやすく整理したい」という場面が頻繁にあります。
しかし、一般的なMarkdownの基本仕様には、ワードプロセッサのような専用の「囲み枠ボタン」が存在しないため、「Markdownで枠で囲むにはどう書けばいいの？」「GitHubやQiita、Obsidianでよく見るカラー付きの警告ボックス（Callout・アラート）の作り方は？」「HTMLやCSSを使っておしゃれな角丸ボックスや背景色付きの枠を作る方法は？」と悩む方も多いのではないでしょうか。
結論から言うと、Markdownで枠で囲む（ボックス・補足ブロックを作成する）には、目的や執筆環境（GitHub、Obsidian、Qiita、Zenn、ブログ等）に応じて主に4つのアプローチがあります。
📌 本記事のポイント・要点まとめ
- 標準記法での枠囲み： 最も汎用性が高いのは「引用記法（
> 引用）」。すべてのエディタで左線付きの枠線が表示される。コードブロック（```text）を使えば等幅のテキスト枠も作成可能。 - GitHub / Obsidian等の「Callout・アラート（警告枠）」：
> [!NOTE]や> [!WARNING]、> [!CAUTION]などの記法を使うことで、アイコン＆カラー付きの警告ボックス・補足ブロックを簡単に表示できる。 - Qiita / Zennの拡張記法：
:::note info（Qiita）や:::message alert（Zenn）などの専用コンテナ構文を活用。 - HTML/CSSによるカスタム枠：
<div style="...">を直接埋め込むことで、背景色・角丸・影・二重線・タイトル帯など自由自在にデザイン可能。
この記事では、初心者でもコピペですぐに使える標準の引用枠・コード枠から、GitHub等の最新アラート構文（全5種類）、ツール別のCallout対応表、そしてHTML/CSSを使ったおしゃれなカスタム囲み枠デザイン集まで、実例と表示プレビュー付きで徹底解説します！
【早見表】Markdownで枠で囲む4つの手法と使い分け
Markdownで枠囲み（マークダウン 囲み枠・ボックス表示）を実現する主な方法を一覧表にまとめました。作成したいデザインや執筆環境に合わせて最適な手法を選んでください。
| 囲み枠の種類 | 書き方（構文例） | 対応環境 | おすすめ度・用途 |
|---|---|---|---|
| ① 引用記法（標準） | > メモや補足文 |
すべてのMarkdown環境 | ★ 基本・手軽さ重視 シンプルな補足・注記 |
| ② コードブロック（標準） | ```text |
すべてのMarkdown環境 | 等幅テキスト・出力ログ・操作手順 |
| ③ Callout / アラート記法 | > [!NOTE]> 重要なポイント |
GitHub / Obsidian / Qiita / Zenn など | ★★★ 最も推奨 警告・ヒント・注意喚起 |
| ④ HTML/CSSカスタム枠 | <div style="..."> |
HTML許可環境（ブログ、WordPress、一部エディタ） | デザイン重視・角丸・影・タイトル付き枠 |
1. 標準Markdown記法で枠で囲む方法（引用・コードブロック）
環境に依存せず、あらゆるエディタやプラットフォームで確実に枠線として表示させたい場合は、標準の「引用記法」または「コードブロック」を活用します。
① 引用記法（`>`）を使ったシンプルな囲み枠
行頭に > （半角の大なり記号＋半角スペース）を置く「引用記法」は、Markdownで最も手軽に枠線・ボーダーを表示させる方法です。
> **💡 ポイント**
> ここに枠で囲みたい補足テキストを記述します。
> 複数行にわたる文章も行頭に「>」を付けるだけでOKです。実際のブラウザ・エディタでの表示例：
💡 ポイント
ここに枠で囲みたい補足テキストを記述します。
複数行にわたる文章も行頭に「>」を付けるだけでOKです。
HTMLに変換されると <blockquote> タグが出力され、一般的なWebサイトやエディタのCSSでは「左側の縦線＋背景色・インデント」が適用されるため、本文から際立たせる囲み枠として十分機能します。
💡 引用枠の中で使える装飾：
引用ブロックの中では、太字（`**太字**`）、斜体（`*斜体*`）、箇条書きリスト（`- リスト`）、インラインコード（` `code` `）など、通常のMarkdown記法をそのまま併用できます。詳しい引用の使い方については「Markdownの引用記法完全ガイド」もあわせてご覧ください。
② コードブロック（バッククォート3つ）を使ったテキスト枠
プログラムコードではなく、メモやログ、キーボード操作手順などを四角いボックスで囲みたい場合は、バッククォート3つ（```）で囲むフェンス付きコードブロックを使用します。
```text
【手順メモ】
1. ターミナルを開く
2. npm run build を実行する
3. distフォルダが生成されたことを確認する
```実際のブラウザ・エディタでの表示例：
1. ターミナルを開く
2. npm run build を実行する
3. distフォルダが生成されたことを確認する
⚠️ コードブロックで枠を作る際の注意点：
コードブロック内のテキストは「等幅フォント（monospace）」で表示され、太字やリンクなどのMarkdown記法は解釈されずそのまま文字として出力されます。装飾を施したい場合は引用記法またはCallout記法を使いましょう。
コードブロックのより詳しい書き方は「Markdownコードブロックの書き方完全ガイド」で解説しています。
2. GitHub / Obsidian / 各種エディタの「Callout・アラート（警告枠）」記法
現在、Markdownで最も人気のある囲み枠表現が「Callout（コールアウト）」または「Alert（アラートブロック）」です。GitHub Flavored Markdown（GFM）やObsidian、Qiita、Zennなどで標準サポートされており、アイコンと美しいカラーボーダーが付いたプロ品質の警告ボックス（markdown warning box）や補足ブロックを簡単に作成できます。
GitHub公式アラート記法の書き方（全5種類）
GitHubでは、引用記法の先頭行に [!アラートタイプ] を記述することで、自動的に色鮮やかなアラートボックスへレンダリングされます。
| タイプ | 記法（先頭行） | 枠・アクセント色 | 主な用途・ニュアンス |
|---|---|---|---|
| NOTE | > [!NOTE] |
■ 青（Blue） | 一般的な補足・情報・メモ |
| TIP | > [!TIP] |
■ 緑（Green） | 役立つヒント・コツ・推奨設定 |
| IMPORTANT | > [!IMPORTANT] |
■ 紫（Purple） | 見逃せない重要事項・必須条件 |
| WARNING | > [!WARNING] |
■ 黄・橙（Yellow） | 注意喚起・非推奨・予期せぬ挙動 |
| CAUTION | > [!CAUTION] |
■ 赤（Red） | 重大なリスク・データ破壊の危険 |
5大アラートのコピペ用コードと表示プレビュー
1. NOTE（補足・情報ブロック）
> [!NOTE]
> ユーザー情報は設定画面の「プロファイル」からいつでも変更できます。
Note
ユーザー情報は設定画面の「プロファイル」からいつでも変更できます。
2. TIP（ヒント・コツ）
> [!TIP]
> `Ctrl + Space`（Mac: `Cmd + Space`）を押すと入力補完が素早く表示されます。
Tip
Ctrl + Space（Mac: Cmd + Space`）を押すと入力補完が素早く表示されます。
3. IMPORTANT（重要事項）
> [!IMPORTANT]
> APIキーは公開リポジトリにコミットしないでください。必ず環境変数（.env）で管理しましょう。
Important
APIキーは公開リポジトリにコミットしないでください。必ず環境変数（.env）で管理しましょう。
4. WARNING（警告・注意）
> [!WARNING]
> このコマンドを実行するとローカルの変更がすべて破棄されます。事前にバックアップを取ってください。
Warning
このコマンドを実行するとローカルの変更がすべて破棄されます。事前にバックアップを取ってください。
5. CAUTION（危険・重大警告）
> [!CAUTION]
> 本番データベースに対する直接のDROP文実行は絶対に避けてください。
Caution
本番データベースに対する直接のDROP文実行は絶対に避けてください。
ObsidianでのCallout拡張（タイトル変更・折りたたみ）
人気ナレッジ管理ツール「Obsidian」では、GitHub互換の [!NOTE] 構文に加えて、タイトルの自由変更や折りたたみ機能（トグル）が標準で備わっています。
> [!TIP] おすすめのショートカット一覧（カスタムタイトル）
> - `Ctrl + P`: コマンドパレット
> - `Ctrl + O`: クイックスイッチャー
> [!FAQ]- クリックで開く折りたたみボックス（マイナス記号を付与）
> ここに回答や詳細な解説文を隠しておけます。- タイトル変更：
[!タイプ]の直後に半角スペースを空けてタイトルを入力すると、ボックスの見出しがカスタム名に変わります。 - 折りたたみ（初期非表示）：
[!タイプ]-のように末尾に-（ハイフン）を付けると、クリックで開閉できるアコーディオン枠になります。 - 折りたたみ（初期表示）：
[!タイプ]+のように+を付けると、開いた状態で展開され、クリックで閉じることができます。
Qiita・Zenn・Notionなど主要プラットフォーム別の囲み枠構文
技術コミュニティやツールによって、サポートされている囲み枠記法が異なります。代表的なサービスでの書き方をまとめました。
| サービス名 | 記法と構文 | 補足・特徴 |
|---|---|---|
| Qiita | :::note info（warn / alert も利用可） |
独自の :::note 構文を使用。背景色付きのきれいな囲み枠になる。 |
| Zenn | :::message（ :::message alert で警告枠） |
:::message で青色情報枠、:::message alert で赤色警告枠。 |
| GitHub | > [!NOTE], > [!TIP], > [!WARNING] など |
Issue, PR, Discussions, READMEで完全ネイティブ表示。 |
| Obsidian | > [!NOTE], > [!INFO], > [!TODO] など13種以上 |
豊富な種類＋カスタムタイトル＋折りたたみ対応。 |
| Notion | /callout コマンド、または > で引用ブロック |
ブロック単位でアイコンや背景色をGUIから自由に変更可能。 |
3. HTML/CSSを使ったカスタム囲み枠デザイン集（コピペOK）
WordPressブログ、静的サイトジェネレーター（Hugo、Astro、Gatsbyなど）、HTMLタグの挿入が許可されているMarkdown環境では、インラインスタイル（`<div style=”…”>`）を直接埋め込むことで、色・枠線・影・角丸・タイトル帯などを完全に思い通りにデザインできます。
ここでは、そのままコピペして使えるおすすめのカスタムボックス7選をご紹介します。
デザイン①：シンプル情報ボックス（左線アクセント）
最も汎用性が高く、記事の要約やワンポイントアドバイスに最適なデザインです。
<div style="background: #f0f7ff; border: 1px solid #c8e1ff; border-left: 5px solid #0066cc; border-radius: 6px; padding: 16px 20px; margin: 20px 0;">
<p style="margin: 0 0 8px 0; font-weight: bold; color: #0066cc; font-size: 1.05em;">ℹ️ インフォメーション</p>
<p style="margin: 0; color: #333333; line-height: 1.6;">ここに補足情報や重要なお知らせを記述します。背景色は目に優しい淡いブルーです。</p>
</div>プレビュー表示：
ℹ️ インフォメーション
ここに補足情報や重要なお知らせを記述します。背景色は目に優しい淡いブルーです。
デザイン②：成功・チェックリスト枠（グリーン）
作業の完了条件や、おすすめのメリットを強調したい時に効果的です。
<div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 5px solid #16a34a; border-radius: 6px; padding: 16px 20px; margin: 20px 0;">
<p style="margin: 0 0 8px 0; font-weight: bold; color: #15803d; font-size: 1.05em;">✅ チェックポイント・成功例</p>
<ul style="margin: 0; padding-left: 20px; color: #1f2937; line-height: 1.7;">
<li>すべてのテストが正常にパスしていること</li>
<li>最新の依存パッケージがインストールされていること</li>
</ul>
</div>プレビュー表示：
✅ チェックポイント・成功例
- すべてのテストが正常にパスしていること
- 最新の依存パッケージがインストールされていること
デザイン③：注意・警告ボックス（イエロー・オレンジ）
読者がうっかり見落としがちな前提条件や注意点を目立たせます。
<div style="background: #fffbeb; border: 1px solid #fde68a; border-left: 5px solid #f59e0b; border-radius: 6px; padding: 16px 20px; margin: 20px 0;">
<p style="margin: 0 0 8px 0; font-weight: bold; color: #b45309; font-size: 1.05em;">⚠️ ご注意ください</p>
<p style="margin: 0; color: #78350f; line-height: 1.6;">設定変更後は必ずサーバーの再起動を行ってください。再起動を行わない場合、変更内容が反映されません。</p>
</div>プレビュー表示：
⚠️ ご注意ください
設定変更後は必ずサーバーの再起動を行ってください。再起動を行わない場合、変更内容が反映されません。
デザイン④：危険・エラーボックス（レッド）
データの消失や取り返しのつかない重大操作に対する警告に最適です。
<div style="background: #fef2f2; border: 1px solid #fecaca; border-left: 5px solid #ef4444; border-radius: 6px; padding: 16px 20px; margin: 20px 0;">
<p style="margin: 0 0 8px 0; font-weight: bold; color: #b91c1c; font-size: 1.05em;">🚨 危険・取り消し不可</p>
<p style="margin: 0; color: #7f1d1d; line-height: 1.6;">アカウントを削除すると、紐づくすべてのプロジェクトデータが完全に消去されます。</p>
</div>プレビュー表示：
🚨 危険・取り消し不可
アカウントを削除すると、紐づくすべてのプロジェクトデータが完全に消去されます。
デザイン⑤：タイトル帯付きプロ仕様ボックス
上部にヘッダー帯が付いた、見やすく高級感のあるボックスデザインです。
<div style="border: 2px solid #2271b1; border-radius: 8px; overflow: hidden; margin: 20px 0;">
<div style="background: #2271b1; color: #ffffff; padding: 8px 16px; font-weight: bold; font-size: 1em;">
📌 まとめ・チェックリスト
</div>
<div style="background: #ffffff; padding: 16px 20px; color: #333333; line-height: 1.6;">
ボックスの本文テキストをここに記述します。枠全体が指定色で囲まれ、タイトル帯が綺麗に収まります。
</div>
</div>プレビュー表示：
デザイン⑥：点線・破線メモ枠（カジュアル・ノート風）
ちょっとしたメモやTIPSをカジュアルに伝えたい時に使いやすい点線デザインです。
<div style="background: #fafafa; border: 2px dashed #94a3b8; border-radius: 8px; padding: 16px 20px; margin: 20px 0;">
<p style="margin: 0 0 6px 0; font-weight: bold; color: #475569;">📝 メモ・補足事項</p>
<p style="margin: 0; color: #475569; line-height: 1.6;">点線のボーダーを使うことで、堅苦しくないノート風のやわらかい雰囲気を作ることができます。</p>
</div>プレビュー表示：
📝 メモ・補足事項
点線のボーダーを使うことで、堅苦しくないノート風のやわらかい雰囲気を作ることができます。
デザイン⑦：角丸カード風シャドウボックス（モダン浮き出し）
ボックスにうっすらとしたドロップシャドウを付け、モダンなカード風に見せるデザインです。
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 20px 24px; margin: 24px 0;">
<p style="margin: 0 0 8px 0; font-weight: bold; color: #1e293b; font-size: 1.1em;">💡 おすすめ活用法</p>
<p style="margin: 0; color: #64748b; line-height: 1.6;">影付きカードデザインは、商品紹介や重要なお知らせ、特集コンテンツを目立たせる際に非常に効果的です。</p>
</div>プレビュー表示：
💡 おすすめ活用法
影付きカードデザインは、商品紹介や重要なお知らせ、特集コンテンツを目立たせる際に非常に効果的です。
4. Markdown内でHTML囲み枠を使う際の注意点とTips
Markdown文書の中で <div> などのHTMLタグを埋め込む際は、パーサーの仕様によるいくつかの落とし穴があります。トラブルを避けるための必須ポイントを押さえておきましょう。
① HTMLタグの内側にMarkdownを書くときは「空行」を挟む
多くのMarkdownパーサー（CommonMark等）では、HTMLタグの直後にMarkdownテキストを書くと、太字やリストなどの記法が無効化され、ただの文字列として出力されてしまう場合があります。
<!-- ❌ NG例：タグの直後にMarkdownを書くと解釈されないことがある -->
<div class="custom-box">
**太字にならない可能性あり**
</div>
<!-- ⭕️ OK例：タグと本文の間に「空行（改行）」を1行挟む -->
<div class="custom-box">
**正しく太字として認識されます**
</div>② プラットフォームによるHTMLタグの無効化（サニタイズ）
セキュリティ上の理由から、一部のMarkdownエディタやホスティングサービス（例: 一部のGitホスティングや社内Wiki）では <style> タグやインラインCSS属性（style="..."）が自動的に削除（サニタイズ）されることがあります。
- HTMLが許可されている場合： WordPress、Hugo/Astro等の静的ブログ、個人サイトなど ➔ HTML/CSSカスタム枠が最適
- HTMLが制限されている場合： GitHub、Qiita、Zenn、Slackなど ➔ 標準の引用記法（
>）や公式Callout構文（> [!NOTE]）を使用
Markdownの枠囲みに関するよくある質問（FAQ）
Q. VS Codeのマークダウンプレビューで `> [!NOTE]` がアラート枠になりません。なぜですか？
A. VS Code標準のMarkdownプレビューは基本CommonMark仕様のため、GitHub独自のアラート記法が標準では色付きボックスにならない場合があります。拡張機能の「Markdown Preview Github Styling」や「Markdown Preview Enhanced」をインストールすると、VS Codeのプレビュー上でもGitHubと全く同じアラートボックスが表示されるようになります。
VS Codeのプレビュー設定については「VS Code マークダウンプレビューの使い方完全ガイド」で詳しく解説しています。
Q. 枠線で囲んだ文章の途中で改行するにはどうすればいいですか？
A. 引用枠（>）の中で改行したい場合は、行末に半角スペース2つを入れるか、<br> タグを挿入します。また、段落を分けたい場合は > のみの空行を挟みます。詳しくは「Markdownで改行・段落を使い分ける方法」を参考にしてください。
Q. 枠の中の文字色を変えたり、下線・取り消し線を引くことはできますか？
A. はい、可能です。引用ブロック内やHTMLボックス内でも、太字（**太字**）や取り消し線（~~取り消し線~~）、HTMLの <span style="color:red;">赤文字</span> が使えます。テキスト装飾の全種類については「Markdownテキスト装飾一覧ガイド」をご覧ください。
まとめ：用途に合わせて最適な囲み枠を選ぼう
Markdownで文章を枠で囲むことで、単調になりがちな長文ドキュメントにメリハリが生まれ、読者に重要なポイントや注意点を正確に伝えることができます。
🎯 枠囲み手法の選び方まとめ
- 手軽にシンプルな枠線を作りたい： 引用記法（
> テキスト） - GitHubやObsidianで警告・ヒントを目立たせたい： アラート記法（
> [!NOTE],> [!WARNING]等） - QiitaやZennで技術記事を書く：
:::note infoや:::message alert - ブログやWebページで色・角丸・影を自由に装飾したい： HTML/CSSカスタムボックス（
<div style="...">）
今回紹介したコードはすべてコピペしてすぐにお使いいただけます。ぜひ執筆環境に合わせて最適な囲み枠を活用し、読みやすく美しいMarkdownドキュメントを作成してみてください！