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