发布于 2024-12-07 09:19

HTMLの最適化/デザイン/最適化されたデュアルエンドアシスタント

HTMLジェネレーター使い方ガイド

使用手順

内容を入力：HTMLに変換したいテキストを入力欄に貼り付けます。
スタイルを選択：ニーズに合わせて適切なスタイルテンプレートを選びます。
HTMLを生成：「HTMLを生成」ボタンをクリックすると、自動的に対応するHTMLコードが生成されます。
コードをコピー：生成されたHTMLコードをコピーし、ウェブページエディターに貼り付けます。

Claudeの利用をおすすめします

HTMLコードをより効率的に生成・最適化するには、Claudeの利用をおすすめします。Claudeは標準に準拠したHTMLコードを素早く生成し、最適化のアドバイスも提供してくれます。

≡

詳細な例

使用ガイド

HTMLの生成

以下の要件を入力すると、HTMLアシスタントが指示に基づいて新しいHTMLコードを生成します：

要件： "見出し、段落、折りたたみコンテンツを含むシンプルなHTMLページを生成してください。"

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シンプルなHTMLページ</title>
<style>
#board * { margin: 0; padding: 0; box-sizing: border-box; }
#board { font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', 'MS PGothic', sans-serif; background-color: #e3f2fd; color: #0d47a1; width: 45em; max-width: 100%; margin: 0 auto; padding: 1.5em; border-radius: 1em; box-shadow: 0 0.5em 1em rgba(0,0,0,0.1); }
#board .content { padding: 1.5em; }
#board h1 { font-size: 2em; margin-bottom: 1em; }
#board p { font-size: 1em; line-height: 1.6; }
#board details { margin-top: 1em; }
#board summary { font-weight: bold; cursor: pointer; }
#board summary + * { padding: 1em; background-color: #fff; }
</style>
</head>
<body>
<div id="board">
<div class="content">
<h1>シンプルなページへようこそ</h1>
<p>これはページ上の短い段落です。</p>
<details>
<summary>折りたたみコンテンツ</summary>
<p>ここに折りたたみコンテンツの詳細情報が表示されます。</p>
</details>
</div>
</div>
</body>
</html>

最適化とチェック

既存のHTMLコードをアシスタントに入力し、エラーチェックと最適化を行います。例えば：

元のコード：

<div>
<h1>ようこそ</h1>
<p>これは段落です</p>
</div>

最適化後：

<div id="board">
<div class="content">
<h1>ようこそ</h1>
<p>これは段落です</p>
</div>
</div>

レスポンシブデザイン

@mediaクエリを使用してレスポンシブな等比例スケーリングデザインを実現し、さまざまなデバイスで完璧に表示されるようにします。例えば：

要件： "このシンプルなページにレスポンシブデザインを追加してください。"

レスポンシブコード：

@media only screen and (min-width: 768px) {
#board { font-size: 14px; width: 20em; padding: 0.8em; }
#board h1 { font-size: 1.5em; }
}

*作者：离子曲*

作品

浏览 (9)