HTML を PNG に変換：HTML と CSS のカードを画像として書き出す
HTML/CSS で作ったカードを画像として共有したいときは、HTML to Image で描画結果を PNG に出力できます。ドキュメントの更新通知、小さな比較カード、CSS で余白を調整済みの案内などに向いています。
この記事は、用意したソースから HTML を PNG に変換する手順です。まずは静的で単独表示できる短い例を使うと、結果を再現して確認しやすくなります。
- HTML 画像変換ツールを開き、必要なスタイルを含むソースを貼り付けます。
- キャンバス幅を設定し、長い見出しと周囲の余白をプレビューで確認します。
- PNG と、掲載サイズに適した出力倍率を選びます。
- ダウンロードを開き、公開前に端、文字、背景、ブランド表示を確認します。
後の修正用に HTML を保存してください。画像は固定された表示なので、描かれたリンクやボタンは操作できません。
例は一般的なフォント指定と短いスタイルだけで、外部の画像などを使いません。顧客事例ではなくデモ用の内容です。すべての言語版で同じ原稿を使います。
```html
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 32px; background: #edf2f8;
font-family: Arial, sans-serif; color: #17263c; }
.card { padding: 32px; background: white;
border: 1px solid #c9d5e4; border-radius: 12px; }
.label { margin: 0 0 12px; color: #47638c; font-size: 14px; }
h1 { margin: 0 0 16px; font-size: 32px; }
p { margin: 0; font-size: 18px; line-height: 1.5; }
</style>
<article class="card">
<p class="label">Documentation update</p>
<h1>Ready for review</h1>
<p>Check the source, review the layout, then share the image.</p>
</article>
```
フェンス内の HTML だけをツールへコピーします。外側の Markdown フェンスは原稿の保存・共有用で、HTML 入力には含めません。
元の PNG を開く。サイトの実際の HTML モード出力サービスで、幅 800 px、2 倍出力として生成しました。無料出力のブランド表示を含みます。見出し、段落、内側の余白、カードの境界を確認しています。この短い例の確認であり、任意のサイトや対話型アプリの完全な再現を示すものではありません。
| 症状 | 最初に調べる点 |
|---|---|
| スタイルが消える | 必要な CSS をソースに含めたか |
| 見出しの折り返しが違う | 幅と利用できるフォントを比べる |
| 画像が出ない | 描画サービスが URL にアクセスできるか |
| 内容が切れる | 固定高さとオーバーフロー設定を調べる |
| 掲載後の文字が小さい | 内容を減らすか表示領域を広げる |
独立した例が動くことを確かめてから外部フォントや画像を加えます。ログイン中のブラウザーで見えるリソースがサーバーからも使えるとは限りません。小さな部品だけで足りるなら、サイト全体のナビゲーションやスクリプト、無関係なスタイルまでコピーしない方が扱いやすくなります。
CSS で余白やカード構造を制御したい場合は HTML を使います。見出し、本文、表、コードで表現できるなら、Markdown 画像エディターが使えます。Markdown から PNG のガイドではその簡潔な方法を紹介しています。
HTML 出力は、公開サイトの URL を撮影する手順とも異なります。この記事ではソースを渡しており、ログイン、アプリの状態待ち、ブラウザー操作全般の再現は扱っていません。
無料利用や透かしなし出力の条件は現在の料金・出力ルールを確認してください。例にはブランド表示があり、有料利用の権利を実証するものではありません。
出力はラスター画像です。HTML や Markdown を保存し、画像の近くに実際のリンクを置いてください。代替テキストにはカードの内容を説明し、重要情報を画像の中だけに残さないようにします。
この出力はサーバー側で処理します。組織が許可しない機密情報は取り除いてください。オフライン動作、自動的な情報の伏せ字化、特定の保存期間は約束していません。
短いカードからHTML を PNG に出力し、掲載予定の大きさで実際のファイルを確認します。原稿もコンテンツと一緒に残せば、後の文言や配置の変更を、画面キャプチャから作り直さず再出力できます。