HTMLファイルをオンラインで開く - HTMLビューア・エディタ・ライブプレビュー

HTMLファイルを無料でオンライン表示・プレビュー。リアルタイムのライブプレビューでHTMLを編集し、コード整形やページテストを安全にブラウザで実行。

HTMLビューア

1458

エディタ

コード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>こんにちは、世界！</h1>
        <p>これはHTMLコードのライブプレビューです。</p>
        <button onclick="alert('動作しました！')">クリックして</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>こんにちは、世界！</h1>
        <p>これはHTMLコードのライブプレビューです。</p>
        <button onclick="alert('動作しました！')">クリックして</button>
    </div>
</body>
</html>

プレビュー

ライブプレビュー

こちらも必要かもしれません

HTMLをJSONに変換

HTML 構造を JSON ツリーに変換します。

ツールを開く

HTML縮小/整形ツール

HTMLテキストを2/4スペースのインデントで縮小または整形します。

ツールを開く

Markdownビューアー

ライブビジュアライゼーションでMarkdownをプレビューおよび編集します。

ツールを開く

XML オンラインビューア

ツリービューと検証付きで XML ファイルをオンラインで開き、表示し、整形します。

ツールを開く

HTMLビューアの使い方

エディタペインにHTMLコードを入力または貼り付けます。

プレビューペインが自動的に更新され、レンダリング結果が表示されます。

ツールバーのボタンを使用して、コピー、クリア、または全画面表示を切り替えます。

主な機能

リアルタイムプレビュー

入力と同時にHTMLコードのレンダリング結果を確認できます。

プライバシー重視

コードがブラウザから離れることはありません。すべての処理はローカルで行われます。

レスポンシブデザイン

分割画面ビューを使用するか、全画面表示にして編集体験を向上させます。

よくある質問

HTMLファイルをオンラインで開いてプレビューするには？

HTMLコードを貼り付けるかファイルを読み込むと、レンダリングされたプレビューが即時更新されます。HTMLの素早い確認やデバッグに便利です。

このHTMLビューアで外部CSSやJavaScriptをテストできますか？

はい。ブラウザのセキュリティポリシーで許可されていれば、標準的な外部リソースをプレビューで読み込めます。