今回の課題

影かげと丸まるい角かどがあるカードかーどを作つくろう！

📖 解説を見る

🃏 カードって何なに？

カードは情報じょうほうを「箱はこの中なかにまとめた見みた目め」のUIパーツです。

✏️ よく使つかうCSS：

.card {
  border-radius: 12px;　→　角かどを丸まるくする
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);　→　影かげ
  overflow: hidden;　→　はみ出でた部分ぶぶんを隠かくす
  padding: 20px;
}

⚠️ ポイント：
・box-shadow で浮ういてるように見みえる
・border-radius で角かどを丸まるくするとやわらかい印象いんしょうに

ヒントを見る

.card に border-radius: 12px; と box-shadow を書こう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: カードにホバーで上うえに浮うく（translateY(-4px)）エフェクトを追加ついかしよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: Flexboxでカードを3つ横よこに並ならべよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: 上うえに色いろの帯おびがある「カラーバーカード」を作つくろう！（border-top: 4px solid #6366f1）（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト14：カードコンポーネントを作ろう