PR

HTMLコードのプレビューツール

2024.12.19

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

このツールは、HTMLコードをリアルタイムでプレビューするツールです。
仕事でよく使うため作成しました。HTMLコードの動作確認をする方はご活用ください。

主な機能

  • HTMLコードのリアルタイムプレビュー
  • レイアウトの切り替え（横並び/縦並び）
  • カスタムCSSの適用
  • YouTubeなどの埋め込みコードの確認

このツールは、安全な使用のために必要なセキュリティ対策を実装しています。入力されたHTMLコードは適切に処理され、プレビュー機能に影響を与えない形で表示されます。

コピーしました！

プレビュー用カスタム設定

使用方法

使用手順
  • 左側のエディタにHTMLコードを入力します
  • 入力したコードは右側でリアルタイムにプレビューされます
  • 必要に応じて「レイアウト切り替え」ボタンで表示を変更できます
  • プレビュー用のカスタムCSSを適用することも可能です

対応している主なHTML要素

  • 見出し（h1～h6）
  • 段落（p）
  • リスト（ul, ol, li）
  • テーブル（table, tr, td, th）
  • リンク（a）
  • 画像（img）
  • 装飾（strong, em）
  • コード（code, pre）
  • iframe（YouTube等の埋め込み）

使用例

基本的なHTML

<h1>見出し</h1>
<p>これは段落です。</p>
<ul>
 <li>リスト項目1</li>
 <li>リスト項目2</li>
</ul>

YouTube動画の埋め込み

<iframe width="560" height="315" 
 src="https://www.youtube.com/embed/動画ID" 
 frameborder="0" 
 allowfullscreen></iframe>

カスタムCSSの例

.my-class {
 color: #ff0000;
 font-size: 1.2em;
 padding: 10px;
 border: 1px solid #ccc;
}

注意事項

  • 大量のコードを一度に入力すると処理が遅くなる場合があります
  • 一部のHTML要素やCSSプロパティは安全性のため制限されています
  • プレビューで問題なく表示されても、実際の記事では表示が異なる場合があります

トラブルシューティング

プレビューが表示されない
HTMLの構文が正しいか確認してください
スタイルが適用されない
カスタムCSSの構文を確認してください
埋め込みコードが機能しない
iframeのURLが正しいか確認してください

不具合や改善要望がありましたら、お気軽にお知らせください。
» お問い合わせはこちら

コメント