HTMLをオンラインでプレビュー
HTMLを貼り付けるか.htmlファイルを開くと、入力しながらページの表示を確認できます。CSSとJavaScriptはそれぞれのタブに書けて、スマホ・タブレット・ノートPCの幅で見た目を確認したり、コンソールのログやエラーを読んだりできます。閉じ忘れたタグ、重複したid、alt属性のない画像などもチェックして一覧表示します。整形・圧縮、ファイル保存、共有リンクにも対応。プレビューはサンドボックス内で動き、このサイトとは切り離されています。
無料・登録不要
使い方
- HTMLを貼り付けるか、.htmlファイルを開くか、サンプルを読み込みます。
- CSSやJavaScriptがあれば、それぞれのタブに入れます。
- プレビューを見ながら、スマホやタブレットの幅に切り替え、コンソールも確認します。
- コードチェックの指摘を直してから、保存・コピー・共有します。
このツールの特長
リアルタイムプレビュー
入力するとすぐ表示が変わります。HTML・CSS・JavaScriptは別々のタブで編集できます。
スマホ・タブレット幅
375・768・1280ピクセル幅で表示して、レスポンシブデザインを確認できます。
コンソール
console.logの出力、警告、JavaScriptのエラーがプレビューの下に表示されます。
コードチェック
閉じ忘れたタグ、重複id、alt抜け、title抜けなどを行番号付きで表示します。
整形と圧縮
読みやすくインデントを整えたり、空白やコメントを除いて軽くしたりできます。
安全なサンドボックス
コードはこのサイトから切り離された枠の中で動き、どこにも送信されません。
HTMLファイルの中身と表示を同時に確認
ブラウザで.htmlファイルを開くと結果しか見えませんが、ここではコードとページを並べて確認できます。書き換えるとすぐ反映され、ブラウザが黙って補正してしまうミスも見つかります。「ファイルを開く」から読み込むか、Ctrl+Uで表示したソースを貼り付けてください。
授業や独学でHTMLを学ぶときに
高校の「情報I」やプログラミング教室、独学の練習では、タグやCSSを1つ変えたときに何が起きるかをすぐ確かめられることが大切です。シンプルなページのサンプルを読み込んで、色や見出しを変えてみましょう。コードチェックは初心者がつまずきやすいミスをわかりやすく説明します。インストール不要なので、学校のChromebookでも使えます。
ブログやメール署名のHTMLを確認
ブログのHTML編集モードに貼る前のコードや、表とインラインスタイルで作るメール署名・メルマガのテンプレートも、ここで表示を確認できます。スマホ幅での見え方をチェックし、画像がブロックされたときに表示されるalt属性の抜けも確認しましょう。圧縮してもOutlook用の条件付きコメントは残ります。
コードチェックで分かること
- 閉じ忘れたタグや、閉じる順番の間違い
- 重複したidや属性
- alt属性のない画像、noopenerのない新規タブリンク
- ページ全体でのdoctype・lang・charset・viewport・titleの抜け
- 見出しレベルの飛びとh1の重複
- center・font・marqueeなどの廃止タグ
よくある質問
他のサイトのHTMLを貼り付けても安全ですか？
はい。プレビューはサンドボックス内で動くため、このサイトのCookieや保存データにはアクセスできません。「JavaScriptを実行」をオフにすることもできます。
コードはサーバーに送信されますか？
いいえ。すべてブラウザ内で処理します。共有リンクはリンク自体にコードを含む仕組みで、サーバーには保存されません。
パソコン内の画像やCSSが表示されないのはなぜですか？
img/logo.pngのような相対パスはパソコン内のファイルを指すため、プレビューからは読めません。https://から始まるURLを使うか、CSSはCSSタブに貼り付けてください。
スマホでの見え方を確認できますか？
はい。「スマホ」を選ぶと375ピクセル幅で表示します。viewportのmetaタグを入れると正しく縮尺されます。
文字化けするときは？
headに<meta charset="utf-8">を入れてください。Shift_JISで保存された古いファイルは、UTF-8で保存し直してから開くと正しく表示されます。
PHPやReactは動きますか？
表示できるのはHTML・CSS・JavaScriptです。PHPはサーバーが必要で、Reactはビルドするか、CDNのスクリプトを読み込む形にしてください。
関連ツール
作りたいものがありますか？
作りたい内容を教えてください。
シンプルなWebサイトから本格的なアプリ、AIソリューション、自動化、カスタムシステムまで、作りたいものをお聞かせください。