HTMLプレビュー

HTMLコードを入力すると、リアルタイムでプレビューが表示されます。CSS・JavaScriptもインラインで記述可能です。

HTML / CSS / JS

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
    }
    .card {
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 2rem;
      text-align: center;
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }
    h1 { margin: 0 0 0.5rem; font-size: 1.8rem; }
    p { margin: 0; opacity: 0.9; }
    button {
      margin-top: 1rem;
      padding: 0.5rem 1.5rem;
      border: 2px solid #fff;
      background: transparent;
      color: #fff;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1rem;
    }
    button:hover { background: rgba(255,255,255,0.2); }
  </style>
</head>
<body>
  <div class="card">
    <h1>HTMLプレビュー</h1>
    <p>HTML・CSS・JSをリアルタイムで確認できます</p>
    <button onclick="alert('JavaScript も動作します！')">クリック</button>
  </div>
</body>
</html>

プレビュー

HTMLプレビューツールの使い方

左側のエディタにHTML・CSS・JavaScriptを記述すると、右側のプレビューにリアルタイムで結果が表示されます。「プレビューのみ」モードで全画面プレビューも可能。HTMLの学習、スニペットの動作確認、簡易プロトタイプの作成にご活用ください。

❓ よくある質問

JavaScriptは動作しますか？

はい。インラインの<script>タグ内に記述したJavaScriptはプレビュー内で実行されます。sandbox属性によりallow-scriptsが許可されています。

外部ライブラリ（CDN）は使えますか？

はい。<script src="...">や<link rel="stylesheet" href="...">で外部CDNからライブラリを読み込むことができます。

コードは保存されますか？

いいえ。このツールは全てブラウザ上で動作し、入力したコードはページを閉じると消えます。必要に応じてコピーして保存してください。

セキュリティ上の問題はありますか？

プレビューはsandbox属性付きのiframeで表示されるため、メインページへの影響は制限されています。ただし、悪意のあるコードの実行にはご注意ください。

🔧 関連ツール

{}

JSON整形ツール

JSONデータを見やすく整形・検証。シンタックスエラーも即座に検出。

B64

Base64変換

テキストをBase64にエンコード・デコード。日本語も完全対応。

URLエンコード/デコード

URLの特殊文字をエンコード・デコード。日本語URLの変換に便利。

Unix時間変換

Unixタイムスタンプと日時を相互変換。現在時刻もリアルタイム表示。

バイト数カウント

テキストのバイト数をUTF-8、UTF-16、Shift-JISで計算。文字コード判定にも。

正規表現テスター

正規表現パターンをリアルタイムでテスト。マッチ結果をハイライト表示。