今回の課題

自分じぶんのプロフィールカードを自由じゆうにデザインしよう！

📖 解説を見る

👤 プロフィールカードを完成かんせいさせよう！

今いままで学まなんだFlexbox・カード・ホバーを組くみ合あわせます。

✏️ 構成こうせい：
・円形えんけいアバター（色いろの丸）
・名前なまえと説明せつめい
・SNSボタン（横並よこならび）

⚠️ ポイント：
・円形えんけい = border-radius: 50%; width = height
・カードは box-shadow で浮うかせる
・全体ぜんたいを text-align: center で中央ちゅうおうに

ヒントを見る

アバターは border-radius: 50% の div、名前は h2、ボタンは flex で横並びにしよう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: 自分じぶんの名前なまえと好すきなことを書かいたプロフィールカードを作つくろう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: カードにホバーで少すこし大おおきくなる（transform: scale(1.03)）エフェクトをつけよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: グラデーション背景はいけいの上うえに白しろいカードが浮ういたデザインに変かえよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト24：プロフィールカードを作ろう

クエスト24：プロフィールカードを作ろう

れんしゅうもんだい