![見出し画像](https://assets.st-note.com/production/uploads/images/86615436/rectangle_large_type_2_cc36315d31312de58313acb2c1013853.jpg?width=1200)
パディングとスタックの設定(DLデータあり)
パディングとスタックを使ったデザインをすると、下の動画の右側のように、背景が正しく追従しないことがありませんか?
左のように正しく設定するコツは以下の2つです。
1. パディングを適用したフォルダーの直下のレイヤーは2つまで
単一レイヤーでもグループでも構いません。
例えば以下のような形です。(divにパディングを適用しています)
こうすることで、コンテンツと背景がわかりやすくなります。
2. コーディングを意識したレイヤー構成
パディングやスタックを使用する場合、特にHTMLの構成と似てきます。そこで、コーディングを意識すると正しい挙動に近づきます。(専門ではないのでコードが正しいかわかりませんが…)
データDL
今回のデータはこちらからDLできます。
この記事が気に入ったらサポートをしてみませんか?