1. 新レスポンシブデザイン(レスポンシブデザイン)の理解

• 旧レスポンシブは非常に使用しずらいので、絶対に使用しない。ページ作成時にアップグレードする。(今後新レスポンシブがデフォルトになる。)

  

レスポンシブデザインのポイント

• PCを作成するときは、SPも意識しながらコーディングする

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

• PCとSPで明らかにデザインが違う場合は、諦めてPCとSPをそれぞれ同一ページ内で作成して Current page withに応じて表示を変えたりする

• 4種類のContainer Layoutの違いを理解

  • Fixed
  • Align to Parent
  • Row
  • Column

  Container Layout Types

• Width, Height, Margins, Padding の挙動は一般的なCSSと同じ

4種類のContainer Layoutの違い

Fixed

• 幅と高さが固定されたコンテナを定義し、子要素を絶対配置する
• 子要素の位置やサイズの変更は、ドラッグ＆ドロップで行う
• 固定されたコンテナは、画面サイズやコンテンツサイズの変更に反応しない

<aside> 🌿 多分、position: fixed;と同じものだと思う

</aside>

Align to Parent

• 子要素は親コンテナ内のノナントに整列される
  • ノナント：四分円のようなものだが、長方形を4分割ではなく9分割したもの
• Align to Parentの中に描画されたり、ドラッグされた新しい子要素は、最も近いノナントにスナップする
• 子要素の位置とサイズはプロパティ・エディタで制御されるが、要素はドラッグ＆ドロップで再配置できる
• 親コンテナのサイズが変更されても、子要素はそれぞれのノナントに整列したままとなり、互いに重なり合うことができる