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

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

• <div class="gallery"> で全体を囲む
• 中に <div class="card"> を3つ
• 各カードに絵文字アイコン・<h2>タイトル・<p>説明文

好きなもの（ゲーム、音楽、プログラミングなど）を自由に書いてみましょう。

カードの内容は後から変えられるので、まずは構造を完成させることを優先しましょう。

ポイント: 3枚のカードは全て同じ HTML 構造にします。

class 名を揃えることで、1つの CSS ルールで全カードにスタイルが当たります。

ブラウザで開いて、3つのカードの内容（アイコン・タイトル・説明文）が表示されることを確認しましょう。

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

body にはグラデーション背景を設定すると映えます。

linear-gradient の書き方:

linear-gradient(角度, 色1, 色2) で2色のグラデーションを作れます。

135deg は左上→右下方向です。0deg は下→上、90deg は左→右です。

box-shadow の値:

0 4px 12px rgba(0,0,0,0.1) = 右0px、下4px、ぼかし12px、黒の10%透明度

中間確認: ブラウザで開いて、紫のグラデーション背景に白いカードが表示されることを確認しましょう。

border-radius: 16px で角を丸くすると柔らかい印象になります。

min-height: 100vh を body に追加すると、カードが少なくても背景が画面全体に広がります。

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

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

これだけでスマホ対応の基本ができます。

justify-content: center でカードを中央に寄せます。

Flexbox の最小知識:

・display: flex — 子要素を横並びにする

・gap — 子要素間の隙間

・flex-wrap: wrap — 入りきらないとき折り返す

・justify-content: center — 中央寄せ

・width: 280px — 各カードの幅を固定

確認: 3枚のカードが横に並んでいることを確認しましょう。画面を狭くすると折り返されます。

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

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

line-height: 1.6 で行間を広げると説明文が読みやすくなります。

margin-bottom で各要素の間に適切な余白を入れましょう。

フォントサイズの目安:

・アイコン: 3rem（大きく目立たせる）

・タイトル: 1.2rem（やや大きめ）

・説明文: 0.95rem（本文サイズ）

確認: アイコンが大きく表示され、タイトルと説明文が読みやすくなっていればOKです。

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

transition の仕組み: transition: プロパティ名 秒数 で、そのプロパティが変化するときにアニメーションします。0.3s は0.3秒かけて変化するという意味です。

transform: translateY(-8px) は「上に8px移動」です。マイナスが上方向です。

transition の書き方:

transition: プロパティ1 秒数, プロパティ2 秒数 のようにカンマ区切りで複数指定できます。

0.3s は0.3秒かけて変化するという意味です。値を大きくするとゆっくり、小さくすると速くなります。

:hover はマウスが乗っているときだけ適用される擬似クラスです。

確認: カードにマウスを乗せて、ふわっと浮き上がればOKです！

発展課題:

・カードを4枚以上に増やす

・カードにボタンを追加する

・背景のグラデーション色を変えてみる

・カードクリックで別ページに遷移する（<a> タグで囲む）