HTMLとCSSで描いた図を記事に埋め込めるようになりました（Beta）
いつもZennをご利用いただき、ありがとうございます。
Beta機能として、コードブロックの言語名を html-embed にすると、書いた HTML と CSS を、その場で図として表示できるようになりました。
これまで、記事に図を入れるには、画像を作ってアップロードするか、mermaid.js の記法で書く必要がありました。画像は後から直しにくく、mermaid.js では配置や色を細かく決められません。HTML と CSS で描けば、構成図や処理の流れ、色分けした表などを、テキストのまま書いて、いつでも直せます。CSS のアニメーションで、動きのある図も作れます。
たとえば、Zenn のシステム構成を HTML と CSS で描くと、次のように表示されます。
使い方
コードブロックの言語名を html-embed にして、HTML と CSS を書きます。
```html-embed
<div class="flow">
<div class="box">入力</div>
<div class="arrow">→</div>
<div class="box">処理</div>
<div class="arrow">→</div>
<div class="box">出力</div>
</div>
<style>
.flow { display: flex; align-items: center; gap: 8px; padding: 16px; }
.box { padding: 8px 16px; border: 2px solid #3ea8ff; border-radius: 8px; }
.arrow { color: #3ea8ff; }
</style>
```
記事・本のほか、記事やスクラップのコメントでも使えます。埋め込みは、本文と区別できるよう、枠と「ユーザー作成コンテンツ」のラベルを付けて表示します。ダークモードで見ている読者に合わせて、色を切り替えることもできます。
生成 AI に描いてもらうときは、次のプロンプトをコピーして使えます。
AI に作図を頼むときのプロンプト
Zenn の記事には、Markdown の html-embed コードブロックで図を載せられます。html-embed は、コードブロックに書いた HTML と CSS を図として表示する Zenn の機能（Beta）です。最新の仕様は https://zenn.dev/zenn/articles/markdown-guide の「HTML/CSS の埋め込み」を確認してください。
## 出力
- 必要に応じて、html-embed のコードブロックで作図してください
- 中身は HTML と <style> だけにする（<html>・<head>・<body> は書かない）
## 使えないもの
- JavaScript（<script>、onclick などのイベントハンドラ）。動きは CSS のアニメーションや :hover で表現する
- リンクによるページ移動（<a> は文字として表示されるだけ）
- フォームと入力欄（<form>、<button>、<textarea>、<select>、文字を入力する <input>、contenteditable）。checkbox と radio の <input> は使えるので、タブや開閉は :checked で作る
- 外部のファイル（<link>、@import、Web フォント、<iframe>）
## 画像
- 図は HTML・CSS・インライン SVG で描く
- 画像は、こちらが URL を渡した場合だけ使う。URL を推測して作らない
- 画像には内容が分かる alt を付ける。内容を伝える画像は背景画像にしない
## サイズ
- コードブロック1つあたり 50KB 以内
- 表示する高さは 500px まで（超えた部分は中でスクロール）。PC でもスマホでも 500px 以内に収める
## ライトモードとダークモード
- ダークモードのとき、埋め込みの <html> に data-theme="dark" が付く。[data-theme="dark"] のセレクタで色を切り替え、どちらでも読みやすくする
- 背景色を明示し、文字と背景のコントラストを十分に取る
## PC とスマホ
- 埋め込みの幅は記事の本文の幅（PC で約 700px、スマホで約 340px）
- @media (max-width: 640px) などで、スマホでは縦に並べるなどして、横にはみ出さず読めるようにする
## 読みやすさ
- 余白を取り、文字は 12px 以上にする
- 色だけに頼らず、文字やラベルでも区別できるようにする
- アニメーションは prefers-reduced-motion: reduce のときに止める
## 禁止事項
- Zenn や他のサービスの画面を装う表示、読者を誤解させる表示、激しく点滅する表示
安全に読めるようにするための制限
埋め込みは、読者が安全に読めるよう、Zenn とは別のドメインの中で表示します。あわせて、次の制限を設けています。
- JavaScript は実行されません。動きは CSS で表現してください
- リンクで別のページへ移動することはできません
- フォームと入力欄は表示されません（タブや開閉に使う checkbox・radio は使えます）
- 外部の CSS やフォントは読み込まれません。画像URLは使用可能です
- 1つの埋め込みに書ける HTML は 50KB まで、表示する高さは 500px までです。はみ出した部分は、埋め込みの中でスクロールして見られます
Zenn や他のサービスの画面を装う表示、読者を誤解させる表示、激しく点滅する表示は禁止です。このような埋め込みは、運営が表示を止めることがあります。
書き方の詳細と制限は、ZennのMarkdown記法一覧にまとめています。
不具合やフィードバックがありましたら、zenn-community までお知らせください。
今後ともZennをよろしくお願いいたします。