HTMLコードビューア

右パネルのプレビューは、コードがブラウザでどのように表示されるかに近い表現です。予期しない見た目になった場合は、HTMLタグが正しく閉じられているか確認してください。

貼り付けたHTMLは、「sandbox」属性で隔離されたiframe内に配置されます。この隔離により、コードの実行は許可されつつ、サイトの他の部分、Cookie、他のタブへのアクセスはブロックされます。つまり、信頼できないコードでも安全にテストできます。

• HTML(CSSやJavaScriptを含めることも可能)をコードボックスに貼り付けます。
• 「プレビューを更新」をクリックすると、コードが隔離されたiframeに渡されます。
• 「sandbox」属性のおかげで、iframeはメインページから隔離された環境でコードをレンダリングします。
• 結果は右側のプレビューエリアに視覚的に表示されます。
• コードを編集して再度ボタンをクリックすると、プレビューが更新されます。

埋め込みiframeのスニペットやシンプルなHTML/CSSの実験を貼り付けると、結果が即座に右パネルに表示され、実際のサイトに追加する前に見た目を確認できます。

• 埋め込みコード(iframeウィジェットなど)がサイト上でどう表示されるか、公開する前にここでテストしましょう。
• プレビューは変更のたびに自動更新されません。コードを編集した後は「プレビューを更新」をクリックすることを忘れないでください。
• プレビューエリアは隔離されているため、コード内のスクリプトがページの他の部分に影響を与えたり読み取ったりすることはできません。

ウェブ開発中に、HTMLの断片や埋め込みコードが実際のサイトでどう表示されるかを確認するには、通常まずコードを本番環境に追加する必要があり、時間を無駄にしたり、コードに不具合がある場合はサイトの見た目を壊してしまう可能性があります。このツールは、隔離された環境でコードをテストできるようにすることで、そのリスクを取り除きます。

このツールの中核には、ブラウザが提供する「sandbox」iframe機能があります。この機能は、特定の権限セット以外でiframe内のコンテンツを完全に隔離します。デフォルトでは、スクリプトの実行以外の機能(親ページへのアクセス、フォーム送信、新しいウィンドウを開くことなど)は一切許可されません。

この設計上の選択は意図的なものです。ユーザーが信頼していないコードでもテストできる空間を提供しながら、実際のサイト(およびユーザーのCookieやセッションデータ)を保護します。多くのプロフェッショナル向けコード共有プラットフォーム(CodePenのようなツール)も同じ隔離の原則に従っています。

プレビューはコードが変更されるたびに自動的に更新されるわけではなく、「プレビューを更新」ボタンで手動でトリガーされます。これによりパフォーマンスが維持され、コードが完成する前に誤って実行されるのではなく、ユーザーがいつコードを実際に実行するかを制御できます。

このツールは、埋め込みウィジェットのテスト、HTML/CSSのアイデアの素早い試行、バグレポートで共有されたコードの安全な確認、あるいは学習の一環としてHTMLがどのようにレンダリングされるかを見るのに役立ちます。