HTML・CSSエディター

HTMLエディターの使い方

小さな静的レイアウト、表、CSSの試作に使えるエディターです。HTMLとCSS欄の薄い文字は入力例で、最初のプレビューはその結果を表示します。入力例の欄を選ぶと空になり、自分のコードを入力できます。空のまま離れると薄い入力例が戻りますが、以前の結果や出力ボタンは復活しません。

自分のHTMLとCSSを入力してください。断片的なHTMLや文書全体を貼り付けられます。対応する要素から静的文書を作り直すため、元のメタデータは保持しません。編集を始めた後は実際の入力だけを使い、別の空欄に見える薄い例を混ぜません。欄を移動しても自分の入力は残ります。

プレビューに表示される内容

プレビューは隔離された別のページです。入力したCSSがエディター本体に作用することなく、対応するHTMLを表示します。文章、見出し、リスト、表、通常のフォーム部品、CSSレイアウトを確認できます。内容が表示領域より大きい場合は、領域内をスクロールできます。幅はパネルに合わせて変わり、特定の端末サイズを再現する機能ではありません。

JavaScript、イベント属性、埋め込みページ、SVG、メディア再生、外部リソースは除外またはブロックします。リンクでは移動せず、フォームは送信されません。外部画像、Webフォント、スタイルシート、CSSのimportは読み込みません。base64形式で埋め込んだPNG・JPEG・GIF・WebP画像には対応します。除外した要素や属性は件数を表示し、CSS内の外部参照は文書のポリシーで遮断します。元の入力は残るため、非対応のコードも見直して修正できます。

小さな例を二つ

次のHTMLとCSSを入力すると、「Hello」が濃い緑の見出しになります。タグの間の文章を変えると表示文字が変わり、CSSのcolorを変えると色が変わります。

リストには<ul><li>Plan</li><li>Review</li></ul>、CSSにはli { margin-bottom: 8px; }を指定します。各項目の後に余白がある二つの箇条書きが表示されます。自分のプロジェクトへ移す前に、小さな内容ブロックを確認できます。

HTML: <h1>Hello</h1>
CSS:  h1 { color: #166534; }

コピーとダウンロード

HTMLのコピーと保存は、現在のプレビューと同じ静的文書を使います。対応するマークアップとCSSをUTF-8のpage.htmlにまとめ、制限付きのコンテンツポリシーも含めます。ブラウザーで表示したり、テキストエディターでソースを確認したりできます。単体の静的な下書きであり、公開されたWebサイトやスクリプトが動くアプリではありません。

クリアはHTML、CSS、結果を消去します。コードが入力済みの場合は確認します。空欄には薄い入力例が戻りますが、保存されたユーザーデータではありません。通常の入力にはブラウザーの文字編集操作を使えます。変更後に離れる際は警告しますが、自動保存はありません。対応する静的な結果を残すには、閉じる前にHTMLをダウンロードしてください。

上限と問題への対処

合計100,000文字、HTMLノード3,000個、入れ子64階層までです。上限を超えても入力は残り、内容を減らすまでプレビューと出力を無効にします。入力が空の場合は保存対象がありません。

ブラウザーは閉じ忘れたタグを補正したり、不正なCSS宣言を無視したりします。このツールは標準準拠の検証器ではありません。表示できても、正しい構文、アクセシビリティ、本番利用への適合を保証するものではありません。ルールが効かない場合はセレクター、構文、遮断された外部リソースへの依存を確認してください。詳しい診断は自分のプロジェクトの開発者ツールで行ってください。

よくある質問