”Setロゴマーク”
2022年2月28日  |  Design

STUDIOの入れ子に限界値がある話

こんにちは。新卒デザイナーの櫻田です。

「新卒デザイナー」という肩書きが使えなくなるまであと1ヶ月ほどになってきました。

 

最近はSTUDIOを使う案件を担当することが多くだいぶ使いこなしてきたな~と思っていたのですが、先日ボックスの親子関係について初めて知ったことがあるので備忘録的に書き記します。

 


アラートの詳細

ブラウザアラート:ボックスの親子関係が保存できる最大の深さを超えたためデータを保存できません。

アラート内容:

ボックスの親子関係が保存できる最大の深さを超えたためデータを保存できません。

 

アラート時の操作:

・既存のボックスに新しいdivボックスを追加しようとした

 

アラート後の挙動:

・STUDIOが強制リロード

・リロード後は操作する直前の状態に戻る

 

 

原因は?

どうやらSTUDIOのボックスの入れ子構造には限界値があり、それを超えるとこのようなアラートが出て操作ができなくなったりするようです。

STUDIOのヘルプページであるSTUDIO Uには以下のように書いてありました。

 

”システム上、12-15階層程度が上限となります。

それ以上重ねていくと選択やコピー&ペーストがうまく動かなくなる場合がございますので、ご注意ください。

 

ボックスは何重くらいまで入れ子にできますか? | STUDIO U

検証

では実際にはどれくらいまでなら入れ子にできるのでしょうか。STUDIO Uのヘルプを見る感じだと、明確には上限が決まってなさそうですね。

ちなみに今回は、すでに12階層がある段階で13階層目を追加しようとしたところでアラートが出ました。

 

また、新規プロジェクトでひたすらdivボックスを重ねていくと、9階層目を追加したところでアラートが出ました。

 

 

階層の上限が変動する要因は分からないのですが、検証の時のボックスが大きかったことを考えると要素のサイズ等も関係してそう?ここら辺はまた分かり次第追記したい思います。

 

 

今後の対策としてはむやみやたらにdivボックスで囲わないということしかなさそうです。divボックスって何かと便利なのでつい囲ってしまいがちなのですが、上限があるということを知っていると囲うか囲わないかの取捨選択ができる….はず。

「divを作れる上限数」はHTML/CSSでのWeb制作では無い概念なので、サイトの規模やデザインによってはSTUDIOを使うかコーディングするかの選択の参考にもなるかと。