使ってみよう

要素の移動

ヘッダーナビゲーションより下はすべて、プロトタイピングのためのキャンバスです。

デフォルトでいくつかのエレメントが設置されています。

これらエレメントはすべてドラッグドロップで移動ができます。

TIP

要素を移動した結果は自動的に localstorage に保存されます。ブラウザで再度開いたときに localstorage にデータがあれば状態を復元します。

ツリービューパネルを利用することでエレメントのツリー構造を閲覧できます。

また、ツリービュー上でのドラッグドロップ・ツリービューとキャンバス間でのドラッグドロップでも要素を移動することができます。

TIP

ツリービューについては画面構成と機能説明で詳細を説明します

要素の追加

新しい要素はコンポーネントパネルから行います。

追加したい要素をコンポーネントパネルで検索しキャンバスえドラッグドロップすることで追加されます。

デフォルトで HTML5 の主要なタグと element のコンポーネントが登録されています。

TIP

コンポーネントパネルについては画面構成と機能説明で詳細を説明します

出力

エクスポートメニューから単一のHTMLとして結果を出力できます。

出力されたHTMLでは依存するJS/CSSはCDNからロードするようになっています。オンラインな環境ならどこでも閲覧ができます。

TIP

HTML 以外にも現状を保存・復元するための JSON ファイル出力ができます。画面構成と機能説明で詳細を説明します。