Comparison Table Generator JobDoneBot
入力して、コピー。それだけ。手書きHTML: テーブル構造を書いてCSS調整... 30分→JobDoneBot: フォーム入力してコピー 30秒
入力して、コピー。それだけ。
商品を入力 (2/10)
商品 1
評価:
商品 2
評価:
比較項目 (0)
価格・評価・特徴は自動表示。追加の比較項目をここで設定できます。
テンプレート
カスタマイズ
プレビュー
| 商品1 | 商品2 | |
|---|---|---|
| 価格 | - | - |
| 評価 | ★★★☆☆ | ★★★☆☆ |
| 特徴 | - | - |
出力
「CSSを含むHTML」はインラインスタイル付き。WordPress等にそのまま貼れます。
生成HTML
<style>
.jdb-compare-table { width: 100%; border-collapse: collapse; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; border-radius: 8px; overflow: hidden; }
.jdb-compare-table th, .jdb-compare-table td { padding: 12px 16px; text-align: center; border: 1px solid #e2e8f0; }
.jdb-compare-table th { background: #1e40af; color: #ffffff; font-weight: 600; }
.jdb-compare-table .jdb-label { text-align: left; font-weight: 500; background: #dbeafe; min-width: 120px; }
.jdb-compare-table .jdb-recommended { position: relative; }
.jdb-compare-table .jdb-badge { display: inline-block; background: #2563eb; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; margin-bottom: 4px; }
.jdb-compare-table .jdb-stars { color: #fbbf24; }
.jdb-compare-table .jdb-price { font-weight: 700; font-size: 16px; color: #2563eb; }
.jdb-compare-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
</style>
<div class="jdb-compare-wrapper">
<table class="jdb-compare-table">
<thead><tr><th></th><th>商品1</th><th>商品2</th></tr></thead>
<tbody>
<tr><td class="jdb-label">価格</td><td>-</td><td>-</td></tr>
<tr><td class="jdb-label">評価</td><td><span class="jdb-stars">★★★☆☆</span></td><td><span class="jdb-stars">★★★☆☆</span></td></tr>
<tr><td class="jdb-label">特徴</td><td>-</td><td>-</td></tr>
</tbody>
</table>
</div>
すべての処理はブラウザ内で完結。データはサーバーに送信されません。
📥
入力対応形式
1形式📄
テキスト入力
変換
📤
出力形式
2形式📄
HTML
📄
HTML+CSS
比較表ジェネレーターでできること
商品比較表HTMLを30秒で生成。コピペでブログに貼れる
✨主な機能
📊
比較表HTML生成
フォーム入力から即座にHTMLテーブルを生成
🎨
5種テンプレート
シンプル・カード・ストライプ・ランキング・価格比較
🎯
カラーカスタマイズ
6色のテーマカラーから選択
📱
レスポンシブ対応
スマホでも見やすい比較表
📋
ワンクリックコピー
HTMLまたはCSS付きHTMLをコピー
👁️
リアルタイムプレビュー
入力と同時にテーブルを描画
🚀使い方（たった3ステップ）
1
商品を入力
商品名・価格・評価・特徴を入力します（2〜10個）
2
テンプレートを選択
5種類のデザインから選びます
3
HTMLをコピー
ワンクリックでクリップボードにコピー。ブログに貼るだけ
💡JobDoneBotならではの特徴
- ✓完全無料・回数無制限
- ✓データはサーバーに送信されない
- ✓WordPressにそのまま貼れる
- ✓レスポンシブ対応
- ✓30秒で完成
❓よくある質問
🔒
完全ローカル処理 - ファイルはあなたのPC内で完結
サーバーへのアップロード不要。プライバシー完全保護、処理速度は爆速。