# 案件
## サービス内容
企業向けの何かを作る
企業用アンケート支援システム

顧客の情報
顧客に対してチャットで質問したり販売

サイトのLPページ(訪問者が最初に着地するページ)のレイアウトやデザインをコードなしに
自在に変更できる
figmaみたいな要領で

一つの例えばメンバー紹介の部分があったとするとき、一つのコンポーネントを「ブロック」と呼びタグはすべて「section」で囲う

そのsectionごとに区切ってコードを読み取る

section内にdivなどで囲われたタグが規則性に則って連続している場合その連続する要素がどういう方法で整列されているのか？
flex?grid?

## 内容

- iframe追加・編集・削除
- ブロック追加・編集・削除（ブロック一つ一つの上下に新たにブロックを追加。上下にカーソルを置くと＋マークが表示される。そこをクリックすると何を追加する（テキストか画像かブロックかiframeかの四択）みたいな選択肢が左サイドバーに表示されるのでブロックを選択することで様々なデザインのブロックのテンプレートが選択可能。ページ全体にあったテンプレートを自分で選んでクリックすることで選択したテンプレートのsectionが要素を下に押しのけて表示される）
- カラム追加・編集・削除（複数の要素がflexとかで整列されているような規則性があるものの場合横列の要素をいくつにするかを右サイドバーのどこかのフォームで数字を入力することでその数にすることができる）
- テキスト追加・編集・削除（要素一つ一つの上下にテキストを追加。例えばdivとかpとかh1とかの上下にカーソルを置くと＋マークが表示される。そこをクリックすると何を追加する（テキストか画像かブロックかiframeかの四択）みたいな選択肢が左サイドバーに表示されるのでテキストを選択することで新しいテキストボックスが要素を押しのけて表示される）
- 画像追加・編集・削除（要素一つ一つの上下に画像を追加。例えばdivとかpとかh1とかの上下にカーソルを置くと＋マークが表示される。そこをクリックすると何を追加する（テキストか画像かブロックかiframeかの四択）みたいな選択肢が左サイドバーに表示されるので画像を選択することで新しいimgタグが要素を押しのけて表示される）

本番環境をそのまま操作する
ローカルにもっていってgithubを介すなどしない

ReactとかNode.jsも使わずにjavascriptだけを使う！

## テキスト追加・編集・削除
https://www.tam-tam.co.jp/tipsnote/html_css/post8653.html

このサイトの通りcontentEditable属性を駆使して