レスポンシブなプロフィールページを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLの構造を作ろう

index.html と style.css を作成し、ページの骨組みを作りましょう。

  • <header> — ページタイトル
  • <main class="content"> — プロフィールとスキル一覧
  • <footer> — コピーライト

<meta name="viewport"> を忘れずに書きましょう！

💡 ヒント
,
,
で大きく分け、main の中に .profile（アイコン+名前+自己紹介）と .skills（スキルリスト）を横並びにする想定で配置します。

参考: CSS レッスン1: CSSの基本

2

基本スタイルを設定しよう

body のフォント・背景色、ヘッダーとフッターの色を設定しましょう。

ダークカラーのヘッダー/フッターに白い文字を使うと、プロっぽいデザインになります。

💡 ヒント
body { font-family: sans-serif; background: #f5f5f5; }、ヘッダーに background: #2d3748; color: #fff; padding: 16px 24px; を設定。

参考: CSS レッスン2: 文字のスタイル

3

プロフィールセクションをデザインしよう

アイコン（丸い枠）、名前、肩書き、自己紹介文にスタイルを当てましょう。

border-radius: 50% で正円を作れます。絵文字をアイコンとして使うと簡単です。

💡 ヒント
アイコンに width: 120px; height: 120px; border-radius: 50%; background: #4299e1; を設定。名前は font-size: 1.5rem; font-weight: bold;。

参考: CSS レッスン3: 背景と枠線

4

Flexboxで横並びレイアウトにしよう

.content に Flexbox を設定して、プロフィール（左）とスキル一覧（右）を横並びにしましょう。

max-width と margin: 0 auto で中央寄せにすると見やすくなります。

💡 ヒント
.content に display: flex; gap: 32px; max-width: 900px; margin: 0 auto; padding: 32px; を設定。

参考: CSS レッスン5: Flexbox

5

スキルカードをデザインしよう

スキル一覧をカード風にデザインし、レベルバーをCSSで表現しましょう。

外側のバー（灰色）の中に、内側のバー（グラデーション）を入れて、width でレベルを表現します。

💡 ヒント
各スキルに背景色付きのバーを作ります。
のように幅で表現。

参考: CSS レッスン4: ボックスモデル

6

メディアクエリでスマホ対応しよう

768px以下の画面幅で、横並びを縦並びに切り替えましょう。

開発者ツールのスマホ表示モード（F12 → スマホアイコン）で確認できます。アイコンサイズや余白も調整して完成です！🎉

💡 ヒント
@media (max-width: 768px) { .content { flex-direction: column; } } で縦並びに。アイコンを小さくし、padding を減らします。

参考: CSS レッスン6: レスポンシブ

🎯

📚 使う技術を学ぶ

⚠️ つまずいたら