●画像リソースは実際必要な解像度@2xで用意するのがベスト
過剰に大きな画像をアップすると、
└ 圧縮の結果、むしろ粗くなる
└ オーバーサイズ故、無用にサイズVarが生成される、出し分け条件も不明瞭
●px指定＝max-widthの状態となる
相対配置でオーバーサイズのpx指定をすれば
max-width指定の状態を実現できる
↓
これは、全ての要素に max-width: 100%; の指定があるから
で、逆に邪魔をするケースが出てくる
└ その場合の対処は、cssでunset
●画像のauto指定方法
→ 縦・横いずれかの「辺をクリック」
●文字を選択した時の色
標準の設定項目には用意なく、カスタムコードで実現可能
<!-- グローバル・レギュレーション -->
<style>
::selection {
background: #ffe600;
}
</style>
サイト内共通事項 → サイト設定のカスタムコードに設定
注）プレビューでは反映されない
※ページ固有ならばiframe指定でよし
●paddingやmarginでも％指定
└ 透明画像を使えば良い
●アニメーションがうまく動かない原因のケーススタディ
＃表示トリガーの初期状態が親のhidden外で隠れてる
＃画像が重すぎて描画に時間が掛かっている
●z-indexの不自由な縛り
→ 親のz-indexをinitialize（autoで上書）することで
上層レイヤーに縛られず前後調整可能
●OG（カバー画像）は、
→ アップしたままの画像が設定される
※アップロード・ページ内に配置する画像はすべからく自動で軽量化・最適化される
●アスペクト比をキープするレイアウト法（疑似aspect-ratio）
親はh : autoとし、imgはw : 100%とすることで、画像が親ボックスいっぱいになる。
子divを「絶対位置」のw : 100% , h : 100%とすることでアスペクト比をキープしたレイアウトができる。
●固定配置と絶対配置
固定配置は、ルート要素にのみ設定できる
＝＞ div.baseの直下
→ 固定配置になった要素は、（レイヤーパネルで）子要素内に移動しても固定配置の設定が保持される
●スライドショーガタつく問題
スライド間にマージン・gapを設けるとアニメーション終了あたりでガタつく
→ スライド内で余白をもたせることで解消
●カスタムコード
Studio上のDOM要素にはクラス指定ができない、
→ IDで枝番・連番等で付与してスタイルを適用していくしかない
※preview環境では表示確認できない
●CSSはiframeで指定
すれば良し
※jsは不可（カスタムコードで書くしかない!）
●コンポーネントの注意事項
・名称を変えただけでは、同じコンポーネント扱いになる（コピー先で変更して元のPJにコピーする場合など）
└ 何かしら、１箇所だけでも変更してれば別data扱いとなる（？→確認）
・プロパティ使用のコンポーネントの場合、解除すると、
元のプロパティの初期情報に戻るので、要編集
・Path変更→リンク更新してくれるが
コンポーネントのプロパティで設定してる情報は更新されない!
Discussion