HTMLを画像に変換

HTMLを画像に変換するツールです。HTMLコードを貼り付けて幅を選び、「画像を作成」を押すと、PNG・JPG・WebPとしてダウンロードできます。画像はブラウザー内で作られ、コードはアップロードも保存もされず、アドレスバーにも表示されません。

出典：W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten)。更新日：2026年9月30日

幅

画像の幅（CSSピクセル、50〜4,000）

高さ

0 ＝内容に合わせて自動

内側の余白

内容と画像の端との間隔

解像度

背景

形式

マイツールボックス入力内容はこのブラウザーにのみ保存されます。

HTMLコードインラインスタイルまたは<style>ブロック付きのHTML。画像はBase64（data:image/…）のみ、フォントはシステムのものだけ使えます。スクリプトと外部アドレスは取り除かれます。

入力したテキストはブラウザー内にとどまります。送信・保存されず、アドレスバーにも表示されません。

結果

出力: 幅600px、2倍の解像度 → 1,200px

計算方法

HTMLが画像になるしくみ

ブラウザーがHTMLコードを図として描きます。まずコードを安全な形に整え、HTMLを埋め込んだSVG（foreignObject）として表示し、それをキャンバス（canvas）に描いてPNG・JPG・WebPとして保存します。カード、引用文、表、請求書の一部、メール用の部品、SNS用のサムネイルなど、HTMLとCSSでデザインできるものなら何でも画像にできます。

使えるもの

HTMLとCSS：インラインスタイルと<style>ブロック、フレックスボックス、グリッド、グラデーション、影、角丸、表。
画像：Base64アドレス（data:image/png;base64,…）またはインラインSVGとして埋め込んだものだけ。画像ファイルは画像とBase64の変換で埋め込み用のアドレスにできます。
フォント：端末にインストールされているフォントとシステムフォント。インターネットから読み込むWebフォント（Google Fonts）は取得されません。

使えないもの

スクリプトは実行されず、他のアドレスにある画像・フォント・スタイルシートは読み込まれません。アニメーション、ホバー効果、iframe、canvas、videoは画像になりません。こうした部分は整える段階で取り除かれ、結果の下に注意が表示されます。ブラウザーは貼り付けた部分だけを描くため、実際のページと見た目が少し違うことがあります。

大きさ・鮮明さ・形式

幅と高さ：高さを「0」にすると、内容に合わせて自動で決まります。
解像度：2倍にするとピクセル数が2倍になり、スマートフォンやRetinaディスプレイでも鮮明です。非常に大きな画像では、解像度が自動で制限されます。
形式：輪郭のはっきりした文字や図・透過にはPNG、小さなファイルにはJPG（背景は必ず付きます）、その中間にはWebP。

プライバシーと安全性

コードはブラウザー内だけで処理され、どこにも保存されません。スクリプト、onclickなどのイベント属性、外部アドレスは描画の前に取り除かれます。既存の写真に文字を入れたいときは写真に文字入れをお使いください。

よくある質問

HTMLを画像に変換するにはどうしますか？

HTMLコードを貼り付け、幅と解像度を選んで「画像を作成」を押します。その後、PNG・JPG・WebPとしてダウンロードできます。

画像が表示されないのはなぜですか？

他のアドレス（https://…）にある画像は、安全のため読み込まれません。Base64アドレス（data:image/…）として埋め込むか、インラインSVGを使ってください。

コードはアップロードされますか？

いいえ。コードはブラウザー内で読み込まれ、その場で画像に描かれます。送信も保存もされません。

背景を透明にするには？

背景で「透明」を、形式でPNGまたはWebPを選びます。JPGは透過に対応しないため、常に白い背景になります。

画像がぼやけるのはなぜですか？

解像度を2倍または3倍にしてください。表示サイズはそのままで、ピクセル数が2倍・3倍になります。

Google Fontsは使えますか？

いいえ。インターネットから読み込むWebフォントは取得されません。Arial・Georgia・Verdanaなどのシステムフォントか、端末にインストール済みのフォントをお使いください。

出典・根拠

更新日：2026年9月30日 · 編集方針

結果