HTML を画像に
HTML と CSS を貼り付けると、PNG、JPG、WebP、SVG の画像にします。ピクセル密度は 1×、2×、3× から選べます。SNS 用カード、コードスニペット、バナー、メールのヘッダーに便利です。
ピクセル密度
背景
マークアップはこの端末の中で描画します。スクリプトは実行されず、ほかのサイトの画像やフォントも読み込みません。data: URL とシステムフォントを使ってください。表示中のウェブページを撮るには、ブラウザ自体のスクリーンショット機能を使ってください (Chrome なら DevTools から「Capture full size screenshot」)。
使い方
- HTML を貼り付けてください。CSS は style タグに入れます。
- 幅を CSS ピクセルで指定してください。高さを空欄にすると内容に合わせます。
- ピクセル密度 (スマホで文字をくっきり見せるなら 2×) と背景を選んでください。
- 「画像を作成」を押し、プレビューを確認してダウンロードしてください。
描画できるもの、できないもの
- ブラウザが対応する HTML 要素と CSS はすべて描画できます。flexbox、grid、グラデーション、枠線、システムフォントも含みます。
- 画像は data: URL のみです。ほかのサイトの画像やウェブフォントは取得しません。ブラウザはページがほかのサイトのピクセルを読むことを許さないためです。
- スクリプトは実行されません。マークアップはスクリプトを無効にしたサンドボックスの中でレイアウトされます。
アドレスからウェブページを撮る
URL を画像にするには、代わりにページを開くサーバーが必要です。それはつまり、そのサーバーにアドレスを送り、何を撮ったかを見られるということです。このサイトにはサーバーがありません。ブラウザ自身ならできます。Chrome や Edge では DevTools (F12) を開き、Ctrl+Shift+P を押して「Capture full size screenshot」を実行してください。Firefox では右クリックメニューに「スクリーンショットを撮る」があります。