HTMLをMarkdownに変換

HTMLはコンテンツを配信するための形式で、Markdownはコンテンツを書いて保存する形式として選ぶ人が増えています。このツールは.htmlファイルを読みやすい.mdテキストに変換します。ブログのアーカイブ、ヘルプセンター、保存した記事を静的サイトやノートの保管庫、Gitリポジトリへ移せます。

またはPDF, DOC, DOCX … ファイルをここにドロップ ·

1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除

出力

変換先

書式

ファイルは当社のサーバーで処理され、30分後に削除されます。

このツールの使い方

1
HTMLファイルをアップロード
拡張子が .html または .htm のファイルを追加します。1回に最大20ファイル、1ファイルあたり95 MBまで対応しています。ブラウザで保存したページ、CMSからエクスポートしたファイル、手書きのファイルのどれでも使えます。
2
テキスト設定を確認
変換先はMarkdown、書式はシンプル、文字コードはUTF-8、改行コードはLFです。Git、静的サイトジェネレーター、macOSやLinuxのエディターに適した設定です。
3
Markdownに変換
Markdownに変換を押し、できた .md ファイルを任意のテキストエディターで開いて、残ったメニューやフッターを削除します。アップロードしたファイルは30分後に削除されます。

HTMLをMarkdownに変換するには、.html ファイルをアップロードしてMarkdownに変換を押します。見出しは # の行に、リンクはテキストに変わり、リストの箇条書きや番号は維持され、単純な表はパイプ形式の表になります。

HTMLをMarkdownに変換する用途と理由

Markdownは2004年にJohn Gruberが共同開発者のAaron Swartzとともに公開しました。レンダリング前でも自然に読めるプレーンテキストでWeb向けの文章を書くための記法です。20年が経った今では、GitHubのREADME、JekyllやHugoなどの静的サイトジェネレーター、ドキュメントツール、Obsidianなどのノートアプリ、多くの現代的なWebサイトのコンテンツフォルダで標準的な形式になっています。

その結果、通常とは逆向きの変換が絶えず発生しています。データベース型のCMSから移行するチームは、長年分の記事を .md ファイルとして必要とします。書き手は記事をノートのVaultに保存します。開発者は古いHTMLのヘルプセクションを、変更をプルリクエストでレビューするdocs-as-codeのリポジトリに移します。どの場合も手元にあるのはHTMLだけで、手作業で書き直すのは現実的ではありません。Word文書からの変換ならDOCXをMarkdownに変換が同じ用途です。

Markdownで表現できるHTML要素

from ↓ · to →	CommonMark	GitHub Flavored Markdown
h1〜h6の見出し	h1〜h6の見出し to CommonMark: yes	h1〜h6の見出し to GitHub Flavored Markdown: yes
リンクと画像	リンクと画像 to CommonMark: yes	リンクと画像 to GitHub Flavored Markdown: yes
リストと引用	リストと引用 to CommonMark: yes	リストと引用 to GitHub Flavored Markdown: yes
codeとpreのブロック	codeとpreのブロック to CommonMark: yes	codeとpreのブロック to GitHub Flavored Markdown: yes
単純な表	– 単純な表 to CommonMark: no	単純な表 to GitHub Flavored Markdown: yes
取り消し線	– 取り消し線 to CommonMark: no	取り消し線 to GitHub Flavored Markdown: yes
結合されたセル	– 結合されたセル to CommonMark: no	– 結合されたセル to GitHub Flavored Markdown: no
フォーム、動画、iframe	– フォーム、動画、iframe to CommonMark: no	– フォーム、動画、iframe to GitHub Flavored Markdown: no

supported not offered2014年から仕様化されたCommonMarkは厳密な基本仕様で、2017年に仕様化されたGitHub Flavored Markdownは表、取り消し線、タスクリストを追加したものです。Markdownで表現できないものは、どちらでも使える生のHTMLのまま残せます。

HTML→Markdown変換の出力内容

クラス名、インラインスタイル、スクリプト、レイアウト用のdivは削除されます。Markdownは見た目ではなく意味を記述するためです。太字と斜体はそれぞれ二重と単一のアスタリスクになり、段落内の改行は連結され、  などの文字参照はUTF-8の通常の文字に変わります。.md ファイルはHTMLのごく一部のサイズになります。文章は残り、マークアップは消えるためです。

誤解MarkdownならどんなHTMLレイアウトも再現できる。

事実対応するのは文章の構造だけです。段組み、色、位置指定されたボックスにはMarkdownの記法がなく、失われるか生のHTMLのまま残ります。

誤解変換したページはそのまま公開できる。

事実メニュー、Cookieバナー、フッターも一緒に変換されます。不要な部分を削除し、サイトジェネレーターが必要とするならフロントマターを追加してください。

誤解Markdownの出力はどこでも同じように動く。

事実表と取り消し線にはGitHub Flavored Markdownのレンダラーが必要です。厳密なCommonMarkのツールでは、プレーンテキストとして表示されます。

HTMLとMarkdownの形式の基本情報

HTML

ハイパーテキスト・マークアップ言語

HTMLはウェブのマークアップ言語で、1990年代初めにティム・バーナーズ=リーが考案し、現在はWHATWGが「Living Standard」として管理しています。HTMLファイルは見出し、段落、リンク、表、画像、フォームを記述し、見た目の装飾は通常CSSが担当します。すべてのブラウザで表示でき、メールテンプレートや保存したウェブページにも使われます。HTMLファイル単体では外部の画像やスタイルシートに依存していることが多く、単独で移動すると表示が崩れる場合があります。

圧縮方式: –
透過: –
アニメーション: –
登場時期: 1993 · Tim Berners-Lee; maintained by WHATWG

HTML 変換

MD

Markdown

Markdownは、2004年にJohn Gruberが作った軽量マークアップ記法です。見出しの#、強調の*、リストの-など、プレーンテキストの記号を使い、そのままでも読みやすく、きれいにHTMLへ変換できます。READMEファイル、ドキュメント、Wiki、ノートアプリ、多くの静的サイトジェネレーターの標準です。CommonMarkやGitHub Flavored Markdownなど複数の方言があり、表などの細部が異なります。.mdファイルはどのテキストエディタでも開けます。

圧縮方式: –
透過: –
アニメーション: –
登場時期: 2004 · John Gruber

MD 変換

HTMLをMarkdownに変換するのは、コンテンツが表示されていた場所から離れるときです。たとえば、ブログを静的サイトジェネレーターに移すとき、ヘルプセンターをGitベースのドキュメントリポジトリに移すとき、マークアップよりも読みやすいプレーンテキストが重要なObsidianのVaultに記事を保存するときなどです。

HTML→MD変換のよくある質問

保存したWebページを画像ごと変換できますか？

アップロードした .html ファイルを読み込んで変換します。画像タグは、ページが使っていたのと同じパスやURLを指すMarkdownの画像リンクになるため、オンライン上の画像はそのまま表示されます。ブラウザの「ページを保存」で作られるローカルの画像フォルダはファイルと一緒にはアップロードされません。.md の隣にコピーしておけば、相対パスはそのまま一致します。

メニュー、サイドバー、フッターはどうなりますか？

ファイル内のすべてが変換されます。ページのどの部分が記事本文なのかをツールが判断することはできないためです。きれいに仕上げるには、CMSで可能であればテーマなしで記事を保存するか、変換後のMarkdownの先頭と末尾にあるナビゲーションの行を削除してください。

WordPressの記事をHugoやJekyllに移すには？

WordPressの標準エクスポートはHTMLではなくXMLファイルです。そのため、コードエディターからコピーするか、ブラウザから保存した各記事のHTMLを変換してください。そのあと、各 .md の先頭にフロントマターを追加します。フロントマターとは、ハイフン3つの行で挟まれたブロックで、タイトル、日付、タグを記述します。HugoもJekyllもここから読み取ります。

Markdownで一部の表の見た目が崩れるのはなぜですか？

GitHub Flavored Markdownで追加されたMarkdownの表は、ヘッダー行が1行で、セルの結合はできません。単純なHTMLの表はきれいに変換されます。colspan、rowspan、入れ子のリストを含む表にはMarkdownでの表現がないため、平坦化されます。Markdownには生のHTMLを書けるので、レイアウトが重要な場合は元の表を貼り戻すことができます。

AIや検索ツールにページを読み込ませるのにMarkdownは向いていますか？

多くの場合は小さくなります。Markdownは見出し、リスト、リンク、強調といった重要な構造を残し、属性、スクリプト、スタイルを取り除くため、同じ記事がずっと短くなり、処理もしやすくなります。マークアップを一切残したくない場合はHTMLをTXTに変換を使ってください。