HTML 画像化 — HTMLとCSSをPNGに変換

どんなツールか

カード、お知らせ、表、ボタン、メールのバナーなど、HTMLとCSSの断片をPNG画像として保存するツールです。ドキュメントやブログで表示結果を見せたいとき、SNS用のお知らせカードをコードで作りたいとき、デザインの一部を画像で共有したいときに使えます。スクリーンショットを切り抜くのと違い、幅と倍率を正確に指定できます。

使い方

1. HTML にコードを貼り付けます。文書全体（<html>…）でも断片でもかまいません。初めてなら サンプルを挿入 をクリックしてみてください。
2. 必要に応じて CSS にスタイルを追加します。HTML内の <style> ブロックも適用されます。
3. キャプチャの幅（px）、倍率（1×、2×、3×）、背景（白または透明）を設定します。
4. プレビューを確認して PNGを作成 をクリックし、PNGを保存 を押します。

しくみ

• 安全なプレビュー：コードはサンドボックス化したiframeで描画します。サンドボックスがスクリプトの実行を止め、コンテンツセキュリティポリシー（CSP）がdata:とblob:以外へのネットワークリクエストをすべてブロックします。
• 外部アドレスの除去：貼り付けたコードは、まずブラウザー自身のHTML・CSSパーサーで読み取ります（この段階では何も読み込みません）。src、srcset、poster、SVGのhref、style属性、<style>、url()、image-set()、@import、@font-faceにあるdata:とblob:以外のアドレスはすべて取り除き、一覧で知らせます。キャプチャの直前にもプレビューを再確認し、キャプチャ中もdata:とblob:のアドレスしか読めないため、外部のアドレスにリクエストが送られることはありません。リンク（<a href>）は画像に影響しないため一覧には出しませんが、クリックしてもどこにも移動しないように書き換えます。
• キャプチャのサイズ：選んだ幅でレイアウトし、実際の高さでキャプチャします。PNGのサイズは幅×倍率、高さ×倍率です。
• サイズの上限：ブラウザーが扱える大きさ（iPhone・iPadでは16,777,216画素、1辺16,384px）を超える場合は、倍率を自動で下げてお知らせします。
• 文書全体の場合：<body> の中身とすべての <style> ブロックだけを使い、<head> のほかのタグは捨てます。
• キャプチャにはhtml-to-image（MITライセンス）を使っています。

作成例

入力	設定	結果
サンプルのお知らせカード	幅800、2倍	幅1600pxのPNG
CSS付きの <table>	幅600、3倍、透明	幅1800px、背景透明のPNG
外部の画像を含むコード	幅800、1倍	外部の画像は空のまま、ブロックしたアドレスを一覧表示

ベクターの図はSVG PNG 変換で、MarkdownはMarkdownプレビューでどうぞ。