CSS レッスン11
CSS総合演習
これまで学んだCSSの知識をすべて使って、スタイリッシュなプロフィールカードを作ろう
総合演習の目標
この演習では、これまでのCSSレッスンで学んだ技術をフル活用します：
テキスト・フォント- 読みやすいタイポグラフィ背景・グラデーション- 美しいカラー表現Grid / Flexbox- レイアウト設計position- 要素の自由な配置アニメーション- インタラクティブな動き疑似クラス・疑似要素- ホバーエフェクトや装飾
まずはお手本を確認し、次に自分なりのアレンジを加えてみましょう！
お手本：プロフィールカード
グラデーション背景、アニメーション、ホバーエフェクトなどを組み合わせたプロフィールカードです。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Previewチャレンジ：SNS風カードページ
複数のプロフィールカードを並べたレイアウトに挑戦しましょう。Grid、レスポンシブ、アニメーションを駆使してください。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview自由に試してみよう
これまでの知識をすべて活用して、オリジナルのプロフィールカードやWebページを作ってみましょう！
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview