Day 25 です。
25 日間の CSS 特訓、完走です。
1 日目の「ボックスモデル」から始まり、Flexbox、Grid、レスポンシブ、アニメーション、そして昨日の複雑なインタラクションまで。
あなたはもう、CSS を「なんとなく書く人」から、「意図して自在に操れる人」へと進化しました。
最終日の今日は、これまでに学んだ技術を総動員して、世界に一つだけの「インタラクティブ・クリスマスカード」を作りましょう。
はじめに：集大成としての Web 制作
今日のコードには、この 25 日間で学んだ要素がたくさん詰まっています。
- 配置: Flexbox / Absolute / Center (Day 2, 7)
- 装飾: Gradient / Box-shadow (Day 8, 9)
- 描画: Border で三角形を作る CSS アート (Day 22)
- 動き: Animation / Keyframes (Day 16)
- 論理: Checkbox Hack (Day 24)
- 文字: Google Fonts / Text Gradient (Day 11)
これらを組み合わせれば、画像素材がなくても、感動的な Web 体験を生み出せます。
🎯 本日の目標
- CSS アート: 三角形を重ねて「クリスマスツリー」を描く。
-
パーティクル:
box-shadowとアニメーションで「雪」を降らせる。 - インタラクション: スイッチを押すと、ツリーのイルミネーションが点灯する仕掛けを作る。
📝 ミッション内容
以下の仕様の Web カードを作成してください。
- 静寂な夜: 初期状態は、暗い夜空に雪が降っているだけの静かな画面。
- 光の魔法: 画面内のスイッチ（またはカード全体）をクリックすると、ツリーに飾られたライトが点滅し、文字が黄金に輝き出す。
- お祝い: 中央には「Merry Christmas」の美しい文字。
💻 実装サンプル
正解例
See the Pen CSSマスターへの道「クリスマスカード制作」 by サカツ (@saka2jp) on CodePen.
🧠 解説と重要ポイント
1. 雪の降らせ方（Particle Logic）
雪を 100 個の div で作るのはナンセンスです。
ここでは box-shadow を使って、「1 つの div の影として、別の場所に白い点を描画する」 というテクニックを使っています。
これにより、たった 3 つの div（layer1〜3）だけで、奥行きのある雪景色を表現しています。
2. 三角形ツリー（Border Logic）
Day 22 で学んだ技術です。
width: 0; height: 0; border-bottom: 80px solid green;
透明なボーダーと色付きボーダーを組み合わせることで、HTML 上は四角い div が、見た目は三角形になります。これを 3 つ重ねてツリーにしています。
3. インタラクション（Checkbox Logic）
Day 24 の応用です。
#light-switch:checked ~ .card .title
というセレクタで、「スイッチが押されたら、カードの中のタイトルを変える」という指示を出しています。
JS なしで「点灯式」を実現する技術です。
💡 応用：あなただけのカードに
このコードは「ベース」に過ぎません。ここからが本当のクリエイティブです。
- 色を変える: ピンクや白のツリーにしてみる。
-
要素を増やす:
::beforeを使って、地面に雪を積もらせる。 -
3D にする: Day 17 の
transform: rotateYを使い、クリックしたらカードがパタンと開くようにする。
おわりに
25 日間、お疲れ様でした。
最初の頃、「CSS はなぜ思った通りに動かないんだ」とイライラした日もあったかもしれません。
でも今、あなたはこのクリスマスカードのコードを見て、「あ、ここは Flexbox だ」「ここは Animation だ」と、構造が透けて見えているはずです。
それが「エンジニアの目」を手に入れた証拠です。
CSS は奥が深く、毎年新しい機能（コンテナクエリや :has など）が増え続けています。
しかし、この 25 日間で築いた「基礎」と「自力で解決する力」があれば、どんな新技術も怖くありません。
明日からは、このスキルを使ってポートフォリオを作るもよし、JavaScript に挑戦するもよし。
あなたの Web 制作の旅は、ここからが本当のスタートです。