LiteCanvas Bootstrap

セクション (Hero/Cards/Form/Pricing/Footer等) をクリック追加して並び替え、内容を編集して完全Bootstrap 5 HTMLコードを出力。

⬅ 左のセクション/パーツをクリックして追加してください
プリセット「ランディングページ一括」で一発作成も可能

使い方

左パネルのセクション/パーツボタンをクリックしてキャンバスに追加
キャンバス上のセクションにマウスを乗せると、右上に操作ボタン (↑↓✎×) 表示
✎ ボタンで内容編集モーダルを開き、テキスト・色・リンクなどを変更
↑↓ で順序入替、× で削除
上部の📱🖥アイコンでモバイル/タブレット/デスクトップ表示を切替
「HTMLコード」ボタンで完全なBootstrap 5 HTMLを生成

含まれるセクション

大セクション: ナビバー / ヒーロー / 3特徴 / 3カード / 料金表 / お客様の声 / CTA / お問合せフォーム / FAQ / フッター
パーツ: 見出し / 段落 / 画像 / ボタン / アラート / 余白
プリセット: ランディングページ一括 (Hero+特徴+CTA+フッター) / コーポレートサイト一括 (ナビバー+Hero+カード+お問合せ+フッター)

出力されるHTML

Bootstrap 5.3.3 CSS/JS の CDN リンクを含む完全な HTML
Bootstrap Icons CDN も自動include
レスポンシブ対応・viewport meta も自動付与
そのままサーバにアップして公開可能

制約 (簡易版)

本ツールは簡易版です。本格的なドラッグ&ドロップ・複雑なレイアウト調整は Bootstrap Studio (有料公式) をご利用ください
編集データはブラウザの sessionStorage に一時保存 (タブ閉じで消失)
カスタムCSS追加・JavaScript埋込みは現状未対応