生成AIで作成しました。htmlのコードをプレビューします。
作成物
作業
生成AI:ChatGPTの無料版
入力したプロンプト
webサイトのページを作成したいです。 作成したいページは、htmlコードをテキストボックスに張り付けるとプレビューを表示するページです。 コードを作成してください。
再現性が乏しいように感じます。
出力
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Previewer</title>
<style>
/* CSSスタイルシート */
#code {
width: 100%;
height: 400px;
font-size: 16px;
font-family: monospace;
border: 1px solid #ccc;
}
#preview {
width: 100%;
height: 400px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!-- HTMLコード入力欄 -->
<textarea id="code" oninput="preview()"></textarea>
<!-- プレビュー表示欄 -->
<div id="preview"></div>
<!-- JavaScriptコード -->
<script>
function preview() {
var code = document.getElementById("code").value;
var preview = document.getElementById("preview");
preview.innerHTML = code;
}
</script>
</body>
</html>
調整
そのまま張り付けてます。
コメント