3枚のカードが与えられています。
次の要件に従ってレイアウトを更新してください。各カードは以下の条件を満たす必要があります。
- **幅**は200px。
- **内部余白**は20px。
- カード同士の**間隔**は15px。
- **枠線**は2ピクセルの太さ、実線、グレーの色。
- パディングや枠線を追加しても、指定した幅が**変わらない**こと。

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNhcmQiPkNhcmQgMTwvZGl2PgogICAgPGRpdiBjbGFzcz0iY2FyZCI+Q2FyZCAyPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjYXJkIj5DYXJkIDM8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmNhcmQgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAvKiBDaGFuZ2UgdGhlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgX19fCiAgX19fCiAgX19fCiAgX19fCiAgX19fCiAgLyogQ2hhbmdlIHRoZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwp9

- 要素の幅を定義するには`width`プロパティを使用。
- 内部余白には`padding`を使用。
- カード間のスペースには`margin`を使用。
- 枠線を追加するには`border: 2px solid gray`を使用。
- パディングや枠線による全体の幅の増加を防ぐには`box-sizing: border-box`を使用。

LmNhcmQgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAvKiBDaGFuZ2UgdGhlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgd2lkdGg6IDIwMHB4OwogIHBhZGRpbmc6IDIwcHg7CiAgbWFyZ2luOiAxNXB4OwogIGJvcmRlcjogMnB4IHNvbGlkIGdyYXk7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKICAvKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCn0=

ウェブページの外観と雰囲気を変えるスタイリング言語であるCSSの基本を習得します。テキストスタイル、色、間隔、ボックスモデル、Flexbox、装飾効果などのコアコンセプトを探求します。視覚的に魅力的で構造化されたウェブページを作成するスキルを身につけます。

CSSがHTMLにどのように接続され、セレクタを通じてスタイルが適用されるかを理解します。色、テキストのスタイリング、ホバー効果を適用して視覚的なプレゼンテーションを制御します。

行の高さ、間隔、フォントプロパティ、カスタムフォントを使用してタイポグラフィを改善します。フォントファミリー、太さ、スタイル、サイズを制御して可読性を向上させます。

マージン、パディング、ボーダー、幅のプロパティを使用したレイアウト構造の制御。ボックスサイズの挙動およびブロック、インライン、インラインブロックなどの要素表示タイプの理解。

Flexboxプロパティを使用して水平方向および垂直方向のレイアウトを制御します。方向、配置、間隔を調整してUIコンポーネントを構成します。

背景色、画像、疑似要素、シャドウを使用してレイアウトを強化します。視覚コンポーネントに奥行きとコントラストを持たせたスタイル設定。

チャレンジ：壊れたレイアウトを修正する