Closed1

STUDIOで、片側のみ横幅いっぱいのレイアウトができない話

miyaponmiyapon

親よりも大きな子要素を配置しようとすると親のサイズまでで見切れてしまう。
overflowとか関係ない。

原因は、親にdisplay:flexついてるかららしい。
これはSTUDIOの仕様なのでどうしようもない。

どうやるか。

①親の外に伸ばすためだけのboxを用意してabsoluteでぶっ飛ばす

これは特定条件にのみ利用可能

  • 背景色が地続き
  • シャドウなし

②両側を含めた1枚の巨大な背景画像

特定条件がなくても利用できるが
圧縮されて画質が落ちるという難点あり。

画像をスライス=分割すれば解決できるかもだけど、
ズレに対応しないといけない手間あり。

③カスタムコードでflexを上書きする

多分これが一番早いけど、
カスタムコードに依存しすぎると
STUDIO上の見た目と実態がズレることになるので
保守しづらいのでダルい。

このスクラップは2024/03/29にクローズされました