ボックスのデザイン
レイアウトはわかったけど、ボックスをもっとおしゃれにしたいな。
いいね！じゃあ、デザイン設定を使って、実際にボックスを装飾していこう。
線、角丸、背景色、影を順番に設定していくよ。
線の設定
まず何から始めればいい？
最初に、ボックスに枠線を付けてみよう。
「線」セクションをクリックして開いてね。
線の太さを1pxに設定すると、こんな感じになるよ。
細い線がついた！
角丸の設定
次は角を丸くしてみよう。角丸の数値を16pxに設定してみて。
角が丸くなって、優しい雰囲気になったね！
そうでしょ？角丸はデザインの印象を大きく変えるんだ。
背景色の設定
背景にも色を付けたいな。
じゃあ、「塗り」セクションを開いて、背景色を設定しよう。
薄い白色（#F5F5F5くらい）を選んでみて。
柔らかい感じになった！
カラースタイルの登録
この薄い白色、よく使いそうだよね。
カラースタイルとして登録しておくと、後で簡単に使えるよ。
どうやって登録するの？
カラーピッカーの横にある「+」ボタンをクリックするんだ。
名前を「カード背景色」って入力して保存してみて。
登録できた！
カラースタイル一覧を見てみよう。「カード背景色」が追加されているはずだよ。
ほんとだ！これで次から簡単に使えるんだね。
影の設定
最後に、影を付けて立体感を出そう。
「影」セクションを開いてね。
影の設定を以下のようにしてみよう：
| 設定項目 | 値 |
|---|---|
| X軸 | 0px |
| Y軸 | 2px |
| ぼかし | 8px |
わあ！ボックスが浮いてるみたいに見える！
いい感じでしょ？これでカード風のデザインが完成だね。
完成
これが完成したボックスだよ。
すごい！カードっぽくなった！
線、角丸、背景色、影を組み合わせるだけで、
プロっぽいデザインができるんだ。
この4つの要素は、デザインの基本だから、ぜひ覚えておいてね！
ありがとう！いろんなパターンを試してみるね。
次は、テキストのデザインについて学んでいこう。