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

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

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

主な機能

レイアウト切り替え

使用方法

対応している主なHTML要素

使用例

基本的な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の構文を確認してください

埋め込みコードが機能しない

iframeのURLが正しいか確認してください

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