CSSだけでカードギャラリーを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう

HTMLの骨組みを作ろう

index.html と style.css を作成し、3枚のカードのHTML構造を書きましょう。

💡 ヒント

の中に

を3つ並べます。各カードに絵文字アイコン・タイトル・説明文を入れましょう。

カードに白い背景・角丸・影・内側余白を設定して、カード風のデザインにしましょう。

body にはグラデーション背景（background: linear-gradient(135deg, #667eea, #764ba2)）を設定すると映えます。

💡 ヒント

background: #fff, border-radius: 16px, box-shadow: 0 4px 12px rgba(0,0,0,0.1), padding: 24px を設定します。

親要素 .gallery に Flexbox を設定して、3枚のカードを横並びに配置しましょう。

flex-wrap: wrap を追加すると、画面が狭いときに自動で折り返されます。

💡 ヒント

.gallery に display: flex, gap: 24px, justify-content: center を設定。各カードに width: 280px を指定します。

アイコンを大きく表示し、タイトルと説明文のフォントスタイルを整えましょう。

ページタイトル（h1）は白色にして、グラデーション背景の上で読みやすくします。

💡 ヒント

アイコンは font-size: 3rem, text-align: center。タイトルは font-weight: bold, color: #333。説明文は color: #666, line-height: 1.6。

カードにマウスを乗せると、少し上に浮き上がって影が大きくなるアニメーションを追加して完成です！

transition でアニメーションの速度を設定し、:hover で変化後のスタイルを書きます。

💡 ヒント

.card に transition: transform 0.3s, box-shadow 0.3s を設定。.card:hover に transform: translateY(-8px), box-shadow: 0 8px 24px rgba(0,0,0,0.15) を設定します。

🎯