# Markdownをブラウザだけでプレビューする方法（インストール不要） - 正規URL: https://oka-project.com/blog/markdown-preview-online - 公開: 2026-08-28 ／ 更新: 2026-08-27 - 著者: oka（https://oka-project.com/about） --- Markdownの見た目を確認したいだけなら、必ずしも専用アプリやエディタを入れる必要はありません。 特に、借りたPCやインストール権限のない端末では、**ブラウザだけで確認できる方法**を知っておくと便利です。ただし、「オンラインで使える」ことと「ファイルをサーバーへ送信しない」ことは同じではありません。 この記事では、Markdownを確認する代表的な方法と、使い分けの基準を整理します。 ## 先に結論：単発の確認ならブラウザ型Viewerが手軽 一度だけMarkdownの見た目を確認したいなら、ブラウザ型のMarkdown Viewerを使う方法が手軽です。継続的に編集するならローカルエディタ、GitHubへ公開するREADMEならGitHub自身の表示を最終確認に使う、と用途で分けると迷いません。 oka-projectの[Markdown Viewer](https://tools.oka-project.com/markdown-viewer)は、`.md`ファイルやMarkdownテキストをブラウザ上でプレビューできる無料・登録不要のツールです。入力したテキストやファイルはブラウザ内で処理し、サーバーへ送信・保存しない構成にしています。手元のMarkdownをインストールなしで一度確認したい場面に向いています。 ## Markdownをプレビューする3つの方法 ### 1. ブラウザだけで確認する 一番手軽なのは、Markdownをブラウザ上で読み込んで表示する方法です。 Markdown Viewerでは、mdファイルを選ぶかテキストを入力すると、その場でプレビューできます。インストールは不要です。 この方式が向いているのは、次のような場面です。 - 一度だけmdファイルを確認したい - インストール権限がないPCを使っている - READMEやメモの表示崩れを素早く見たい - ファイルをアップロードする方式を避けたい ブラウザには、ユーザーが選んだローカルファイルをJavaScriptから読み込むためのFile APIがあります。たとえば `FileReader.readAsText()` を使えば、選択したFileやBlobを文字列としてブラウザ内で読み取れます。 ただし、**ブラウザで動くツールが必ずローカル処理とは限りません**。読み込んだ内容をAPIへ送信する実装も可能なので、重要なファイルを扱う場合は、ツール側の説明や通信状況まで確認する必要があります。 ## 2. GitHub上で確認する GitHubに置くREADMEなどは、GitHub自身の表示で確認するのが最も確実です。 GitHubはGitHub Flavored Markdown（GFM）を使っており、見出し・表・タスクリストなどを独自のルールを含めてレンダリングします。そのため、別のMarkdownビューアで問題なく見えても、GitHub上では細部が異なることがあります。 **最終公開先が決まっている場合は、その環境のプレビューを最終確認に使う**のが基本です。 ## 3. ローカルのエディタを使う 日常的にMarkdownを書くなら、エディタにプレビュー機能を持たせる方法が効率的です。 編集と確認を何度も往復する場合は、この方法が一番向いています。一方で、「手元にある1ファイルを見るだけ」のために環境を整えるのは手間になります。 つまり、どれが優れているかではなく、用途が違います。 | 方法 | 向いている場面 | 注意点 | | --- | --- | --- | | ブラウザ型 | 単発確認、共有PC、インストール不可 | サーバー送信の有無を確認する | | GitHub | GitHubで公開するREADMEの最終確認 | リポジトリへ置く必要がある | | ローカルエディタ | 継続的な執筆・編集 | 初期セットアップが必要 | ## ブラウザだけで確認する手順 Markdown Viewerを使う場合は、操作は3段階です。 1. [Markdown Viewer](https://tools.oka-project.com/markdown-viewer) を開く 2. mdファイルを選ぶ、またはMarkdownテキストを入力する 3. プレビュー表示で見た目を確認する 必要ならソース表示へ切り替えたり、レンダリング後のHTMLをコピーしたり、印刷機能からPDFとして保存したりできます。 ## Markdownは「どこでも同じ表示」ではない Markdownには複数の実装があります。CommonMarkはMarkdownの曖昧さを減らすための仕様を定めていますが、GitHubのGFMのように拡張構文を持つ環境もあります。 そのため、プレビュー時に特に確認したいのは次の項目です。 - 表 - タスクリスト - 改行 - コードブロック - 外部画像 - HTMLを直接書いた部分 「Markdownとして正しいか」と「公開先で意図どおり見えるか」は分けて考えたほうが安全です。 ## ファイルを外へ出したくない場合の確認ポイント オンラインツールを使うときは、UIだけで判断せず、少なくとも次の点を確認します。 - ファイルをサーバーへアップロードする方式か - 読み込み後にAPI通信が発生するか - 外部画像や外部リソースを自動取得するか - プライバシーポリシーに保存期間が書かれているか oka-projectのMarkdown Viewerは、入力内容をブラウザ内で処理し、外向き通信をCSPで制限しています。設計の詳細は [ブラウザ完結ツールの「送信しない」を、約束ではなく構造にする](/blog/browser-only-tools-csp) にまとめています。 ## 目的が決まっている場合は専用手順へ ## 結論：単発の確認ならブラウザ、最終確認は公開先 一度だけMarkdownを確認するなら、ブラウザ完結のビューアは手軽です。継続的に編集するならエディタ、GitHubに公開するならGitHub自身の表示を最終確認に使う、と分けると迷いません。 重要なのは、**「オンラインだから便利」だけでなく、「どこで処理されるか」まで含めて選ぶこと**です。 [Markdown Viewerを使う](https://tools.oka-project.com/markdown-viewer) ### 参考 - [MDN: FileReader.readAsText()](https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsText) - [GitHub Docs: 基本的な書き込みと書式設定の構文](https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) - [CommonMark Spec](https://spec.commonmark.org/)