Markdownプレビューの使い方｜記号を打つとリアルタイムでHTMLに変わる無料ツール
公開日：2026年7月25日 更新日：2026年8月30日 運営：シルギア（Analyzegear, Inc.） 対象ツール：Markdownプレビュー
Markdown（マークダウン）は、少数の記号だけで文章の構造を表す軽量マークアップ言語です。行頭にシャープ記号を置けば見出し、ハイフンを置けば箇条書きというように、覚える記号はごくわずか。HTMLタグを一つも書かずに、整った文書の骨組みを素早く作れます。とはいえ、打った記号が実際にどんな見た目になるかは変換しないと分かりません。このツールは、入力したMarkdownをその場でHTMLへ変換し、書きながら結果を確かめられるリアルタイムプレビューアです。変換処理はすべてお使いのブラウザ内で完結し、入力内容が外部へ送られることは一切ありません。
Markdownとは何か、なぜ書くのが速いのか
Markdownは、読み書きしやすいプレーンテキストのまま、必要に応じてHTMLへ変換できることを狙って作られた記法です。強調したい語を二つのアスタリスクで囲む、箇条書きの行頭にハイフンを置く、といった具合に、記号そのものが見た目の意味を連想させるのが特徴です。マウスでボタンを探さず、キーボードから手を離さずに構造を付けられるため、慣れると通常のワープロより速く書けます。
現在ではGitHubのREADMEやIssue、多くのブログサービス、チャットツール、各種ドキュメントツールがMarkdownを採用しています。一度覚えれば複数のサービスで同じ書き方が通用するのも、学ぶ価値が高い理由です。
入力するとすぐ変わる — プレビューの仕組み
画面はエディタとプレビューの2ペイン構成です。左（スマートフォンでは上）の入力欄にMarkdownを打つと、右（下）のプレビューへ変換結果が即座に表示されます。反映は1文字ごとにリアルタイムで行われるため、記号を打った瞬間に見た目が変わり、記法を試しながら覚えられます。最初は見本となるサンプルが入っているので、それを上書きしながら試せます。
変換はすべてブラウザ内のJavaScriptで動き、サーバーとの通信は発生しません。仕組みとしては、入力テキストをまず全文エスケープ（記号を安全な文字に置き換える処理）してから、限られた安全なタグだけを組み立てます。そのため入力に生のHTMLタグを混ぜても実行されず、文字としてそのまま表示されます。
基本の記法と表示の対応
よく使う記法と、変換後の見た目の対応は次のとおりです。
- 行頭の「# 」で大見出しになります。シャープを増やして「## 」「### 」とすると段々小さな見出しになり、最大6段階（######まで）を指定できます。
- 語を「**」で囲むと太字、「*」または「_」で囲むと斜体になります。「~~」で囲むと取り消し線です。
- 行頭の「- 」「* 」「+ 」はどれも箇条書きになります。「1. 」のように数字とピリオドで始めると、番号付きリストです。
- バッククォートで囲んだ部分は、等幅のインラインコードとして表示されます。
- 行頭の「> 」は引用ブロック、ハイフンを3つ以上並べた「---」は横一本の区切り線になります。
たとえば「## 買い物リスト」と書いて改行し、「- りんご」「- バナナ」と続けると、プレビューには小見出しと2項目の箇条書きが表示されます。
表・コードブロック・リンクの書き方
表（テーブル）は3行以上で作ります。1行目にヘッダー、2行目にハイフンだけの区切り行、3行目以降にデータ行を、それぞれ縦棒で列を区切って並べます。たとえば1行目を「| 項目 | 値 |」、2行目を「| --- | --- |」、3行目を「| 速度 | 速い |」と書けば、2列の表になります。データ行の列数がヘッダーより少ないと、足りないセルは空欄になります。区切り行のハイフンが抜けると、ただの文章として扱われるので忘れないでください。
コードブロックは、バッククォート3つだけの行で上下を囲んだ範囲です。中身は装飾されず、改行や空白を保ったまま等幅で表示されるので、プログラムやコマンド例を貼るのに向きます。リンクは「[表示文字](URL)」の形で書くと、変換後は新しいタブで開くリンクになります。画像は先頭に感嘆符を付けた「」の形です。なお安全対策として、危険なURLは無効化します。
GitHubやドキュメント作成での活用
最も相性がよいのは、GitHubのREADMEやドキュメントの下書き確認です。公開前にこのツールへ貼り付ければ、見出しの階層や箇条書き、表が意図どおりに表示されるかを事前にチェックでき、リポジトリ上で崩れて慌てることが減ります。
議事録やメモの整形にも便利です。会議中は記号で手早く構造だけ付けておき、あとから見た目を整えて共有用に仕上げられます。ブログ記事なら、下書きをMarkdownで書いてから変換後のHTMLをコピーし、CMSのHTML編集欄へ貼り付けられます。生成結果は「HTMLをコピー」ボタンで取得でき、「.htmlで保存」ボタンを押せば1枚のHTMLファイルとして手元に保存することもできます。
よくある失敗と注意点
つまずきやすいのは、記号の後の半角スペースの抜けです。「#見出し」や「-項目」のようにスペースがないと、見出しや箇条書きとして認識されず、記号を含んだ文字列のまま表示されます。段落を分けたいときは、あいだに空行を1行はさみます。空行を入れずに改行だけすると、段落として分かれず改行だけが反映されるため、意図した段落の間隔（1行ぶんの空き）があかない点にも注意してください。段落を分けたいときは空行を1行はさみます。
このツールは一般的な文書で使う基本記法に絞っているため、対応しない書き方もあります。
- 箇条書きを字下げして入れ子にする、深いネストのリストには対応していません。すべて同じ階層で表示されます。
- 脚注、定義リスト、チェックボックス付きのタスクリスト、数式（LaTeX）には対応していません。
- 本文中にそのまま書いたURLは、自動ではリンクになりません。リンクにするには角かっこと丸かっこの記法を使います。
- 入力に含めたHTMLタグは実行されず、文字として表示されます。生のHTMLを埋め込む用途には使えません。
迷ったら、まずサンプルを一部だけ書き換えて、プレビューの変化を見るのが理解の近道です。覚える記法は数えるほどしかなく、手を動かすほど自然に身についていきます。