Studio問題：親子関係とパディング・マージン

学習のポイント

• ボックスの中に別のボックスを入れる（親子関係）
• パディング（内側の余白）とマージン（外側の余白）の違い
• 色や余白を使って、見やすいレイアウトをつくる

問題１：親子関係のボックスを作成する

下の完成図のようにボックスを作成します。
レイヤー名の変更と背景色の指定もおこないます。

レイヤー構造

Base
　L メインボックス
　　L 見出し
　　L コンテンツボックス
　　　L 説明文

Base
　L メインボックス
　　L 見出し
　　L コンテンツボックス
　　　L 説明文

背景色

• メインボックスの背景色：#77DDFF
• コンテンツボックスの背景色：#FFF

問題２：幅とパディングを指定する

それぞれのボックスに、幅と高さとパディングを設定してください．

問題３：マージンを指定する

それぞれのボックスに、マージンを設定してください．

問題４：カードを作成する

練習問題ブロックの下にドーナツのカードを作成してください。
ドーナツ画像をStudio.Stockから自由に選択してください。

テキストデータ

ドーナツ

濃厚なチョコのコクと、ふんわり食感がたまらない新作ドーナツ。

レイヤー構造

Base
　L メインボックス
　　L 見出し
　　L コンテンツボックス
　　　L 説明文
　L カード
　　L Image
　　L 見出し
　　L テキストボックス
　　　L 説明文

Base
　L メインボックス
　　L 見出し
　　L コンテンツボックス
　　　L 説明文
　L カード
　　L Image
　　L 見出し
　　L テキストボックス
　　　L 説明文

それぞれのボックスに幅と高さを設定してください．

パディングとマージンを自由に設定して完成図に近いデザインにしてみましょう。
今回は練習なので完成図と一致しなくても構いません。