← クエスト一覧
クエスト50：プロフィールページ
スライド
1
/
2
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌐 HTML & CSS
/
Quest 50
/ 50
クエスト50：プロフィールページ
基礎
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
アバター・名前・スキルバー・SNSリンクを含むプロフィールページを作ろう！
📖 解説を見る
🏆 総合問題：プロフィールページを作ろう！
これまで学んだ HTML・CSS を全部使って、自分のプロフィールページを作ろう！
Flexbox、Grid、アニメーション、レスポンシブを組み合わせてみよう！
ヒントを見る
カード・Flexbox・プログレスバー・transition を組み合わせよう！
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
style.css
<div class="profile"> <div class="avatar">😊</div> <h1 class="name">たろう</h1> <p class="bio">プログラミングが大好きな中学生！</p> <!-- スキルバーをここに追加しよう --> <!-- SNSリンクをここに追加しよう --> </div>
/* プロフィールページをここにスタイリングしよう */
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 3 正解
レッスンに戻る
全問正解でクエストクリア！
未挑戦
問題 1: プロフィール画像（絵文字）を変えよう！（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦
問題 2: スキルバーを1つ追加しよう！（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦
問題 3: ダークモード対応にしてみよう！（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
🏆
HTML & CSSコース 完全制覇！
全クエストをクリアしました！すごい！
🗺️ クエスト一覧へ
Xでシェア
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
