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

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

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

viewport メタタグ:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

を必ず書きましょう。これがないとスマホで正しく表示されません。

このタグは「画面幅に合わせて表示する」という指示をブラウザに伝えます。

ブラウザで開いて、ヘッダー・メインエリア・フッターの3つが表示されることを確認しましょう。

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

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

* { box-sizing: border-box; margin: 0; } でブラウザのデフォルト余白をリセットします。

min-height: 100vh でページが画面の高さいっぱいになります。

display: flex; flex-direction: column; を body に設定すると、フッターが常に画面下部に配置されます。

flex: 1 を main に設定すると、ヘッダーとフッターの間のスペースを全て使います。

確認: ヘッダーとフッターがダーク背景で表示されていればOKです。

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

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

display: flex; justify-content: center; align-items: center; で絵文字を丸の中央に配置します。

💡 ポイント: width と height を同じ値にしないと正円になりません。

色は background: #4299e1 で青にしていますが、好きな色に変えてOKです。

margin: 0 auto 16px で丸を中央寄せし、下に16pxの余白を入れています。

確認: 丸いアイコンの中に絵文字が中央に表示されていればOKです。

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

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

padding: 32px 24px で上下32px、左右24pxの余白を設定します。

中間確認: ブラウザで開いて、プロフィールとスキルが横並びになっていることを確認しましょう。

flex: 1 を .skills に設定すると、残りのスペースを全て使って広がります。

gap: 32px でプロフィールとスキルの間に余白ができます。

💡 ポイント: max-width: 900px で広い画面でも横に広がりすぎないようにしています。

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

スキルバーの仕組み:

外側のバー（.skill-bar、灰色）の中に内側のバー（.skill-fill、グラデーション）を入れます。

内側バーの width をインラインスタイルで指定してレベルを表現します。

例: width: 80% = 80%習得、width: 30% = 30%習得

HTML側: <div class="skill-fill" style="width:80%"></div>

overflow: hidden で内側バーが外側からはみ出さないようにします。

border-radius: 8px でバーの端を丸くすると見た目が良くなります。

linear-gradient(90deg, #4299e1, #667eea) で左から右へのグラデーションを作っています。

確認: 各スキルのバーが異なる長さで表示されていればOKです。

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

@media の構文:

@media (条件) { CSSルール } の形で書きます。

条件を満たすときだけ中のCSSが適用されます。

max-width: 768px は「画面幅が768px以下のとき」という意味です。

flex-direction: column で横並びを縦並びに切り替えます。

.profile { min-width: auto } で幅の制限を解除します。

アバターも width: 80px; height: 80px に小さくして、スマホ画面に合わせます。

開発者ツールのスマホ表示モード（F12 → スマホアイコン）で確認できます。

アイコンサイズや余白も調整して完成です！🎉

発展課題:

・ダークモード対応（prefers-color-scheme: dark）

・スキルを増やす

・SNSリンクを追加する

・バーにアニメーションをつける