【目次】

新規ページを作成したい

1. 開発画面左上にある「Page: ~」をクリックし、「Add a new page…」をクリック

   

2. Page nameに任意のページ名を入力（分かりやすいもの）

3. Clone from は「index」を設定すると、準備等が簡単になるのでおすすめ

   • indexページで構築していたものがそのまま複製されるよ！ページ幅などの初期設定をしなくて済むので楽。要らないコンポーネントを削除する手間はあるけれどね。

     <aside> 🌿 同じページ構成を使いたいものがあれば、indexではなくそれを指定すればもっと楽になるね！

     </aside>

   

4. 入力が終わったら「CREATE」をクリック

5. ページが作成され、左上にある「Page: ~」の ~ が、今作成したページの名前になっていればOK

   

   

   クリックして展開されたメニューにも、作成したページが存在している

コーディング前に、ページの基本幅を設定しよう

PCデザインから始めるにしても、SPデザインから始めるにしても、デザインカンプにあわせて横幅を設定するかと思う。その設定方法について紹介する。

1. ページそのものをダブルクリックし、設定画面を表示させる

2. Layoutタブを開き、「Preset page width」から好きなものを選択する

   なお以下の選択肢があり、選択すると自動で横幅が設定される（らしいが、現状、選択しても自動調整されない。なぜ）

   • Custom: デフォルト設定。
   • Full width: ページ幅を 1200 に設定します。
   • Centered: ページ幅を 980 に設定します。
   • Mobile: ページ幅を 380 に設定します。

   

3. 「Width for UI builder」で任意の幅に設定することも可能

   

   ※ここで設定すると、上記で説明した「Preset page width」は自動でCustomに再設定されるみたいだが、現状私の方では何も起こらなかった。一応手動でCustomに変更しておいた方がいいかも？

基本的にmin-width / min-heightは設定しない（0にする）

• 基本的にmin-width / min-heightは設定しない（0にする）

  • Stylesで全element（または主要なelement）に設定しておくと楽かも。

  • Repeating Groupの各アイテムのheightは、Appearanceにある「Min height of row」で調整可能。特にmin-heightを固定する必要がない場合は0にしておこう！

    

• レスポンシブ対応の時に、min-widthを全てに設定していると、意図しないところで横スクロールが起きてしまう原因になる。

  • フルスクラッチの時って、基本的にwidthとmax-widthしか設定していなかったよね？つまりそういうことよ💡

• min-heightもフルスクラッチの時に常に設定していたか？してないよね。marginやpaddingで対応していたよね。

設定済みのStyleを反映させる / オリジナルStyleを設定する

• Style Attributeで設定済みのStyleを反映させることが出来る

  

• オリジナルのstyleを作成する場合は、右下の「Detach style」をクリックするか、選択肢から「None(Custom)」を選択すればOK