1. 👋 はじめに

前回はCSSでデザインを整えました。PCで見ると素敵な自己紹介ページができましたね！

でも、スマホで確認するとどうでしょう？
写真とテキストが窮屈に並んでいたり、文字が小さすぎたりしませんか？

最終回は レスポンシブ対応・最終調整・そして公開 まで仕上げます🎉

このシリーズのゴール（おさらい）：
HTML・CSSだけで、レスポンシブ対応した自分だけの自己紹介ページを完成させ、インターネットに公開すること！

この記事を読めば：

✅ メディアクエリでスマホ対応ができる
✅ 仕上げのチェックポイントがわかる
✅ GitHub Pagesで無料公開する方法がわかる

2. 📱 モバイルファーストで考え直す

現在の問題点を確認する

CSSシリーズ第二回で学んだ「モバイルファースト」を実践します。
ブラウザの開発者ツール（F12）でスマホ表示に切り替えて確認してみましょう。

【現状の問題点】

❌ ヘッダー：ロゴとナビが横に並びきらず崩れる
❌ 自己紹介：写真とテキストが横並びで窮屈
❌ スキル一覧：グリッドの列幅が狭すぎる
❌ タイムライン：余白が広すぎて間延びする
❌ フォント：見出しが大きすぎて画面からはみ出る

3. 📐 メディアクエリで調整する

ブレークポイントを決める

CSSシリーズ第二回で学んだブレークポイントを使います。

/* このページで使うブレークポイント */
/* デフォルト（〜767px）：スマホ向け */
/* 768px〜：タブレット・PC向け */

① ヘッダーをスマホ対応にする

/* デフォルト（スマホ向け）にヘッダーのスタイルを調整 */
.header-inner {
  flex-direction: column;   /* 縦並びに変更 */
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

header nav ul {
  gap: var(--spacing-md);
  flex-wrap: wrap;           /* 折り返しを許可 */
  font-size: var(--font-size-sm);
}

/* タブレット以上（768px〜）は元の横並びに戻す */
@media (min-width: 768px) {
  .header-inner {
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  header nav ul {
    font-size: var(--font-size-base);
  }
}

② 自己紹介セクションをスマホ対応にする

/* デフォルト（スマホ向け）：縦並びにする */
.about-inner {
  flex-direction: column;    /* 横並び→縦並びに変更 */
  text-align: center;
  gap: var(--spacing-lg);
}

.profile-image {
  width: 160px;               /* スマホでは小さめに */
  height: 160px;
}

.sns-links {
  justify-content: center;    /* 中央揃えに */
}

/* タブレット以上（768px〜）：横並びに戻す */
@media (min-width: 768px) {
  .about-inner {
    flex-direction: row;
    text-align: left;
  }

  .profile-image {
    width: 240px;
    height: 240px;
  }

  .sns-links {
    justify-content: flex-start;
  }
}

💡 .about-text h1 の font-size はここでは指定していません！
見出しのフォントサイズは後述の clamp() で一括管理します。
メディアクエリと clamp() を同じプロパティに両方書くと、後に書いた方が上書きしてしまい、片方の指定が無意味になります。
このページでは見出しサイズの調整を clamp() に一本化しています。

③ スキル一覧をスマホ対応にする

/* デフォルト（スマホ向け）：名前とバーを縦に */
.skill-item {
  grid-template-columns: 1fr;  /* 1列にする */
  gap: var(--spacing-sm);
}

/* タブレット以上（768px〜）：横並びに戻す */
@media (min-width: 768px) {
  .skill-item {
    grid-template-columns: 200px 1fr;
  }
}

④ タイムラインをスマホ対応にする

/* デフォルト（スマホ向け）：余白を小さく */
.timeline-item {
  padding-left: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

/* タブレット以上（768px〜）：余白を大きく */
@media (min-width: 768px) {
  .timeline-item {
    padding-left: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
}

⑤ 全体のフォントサイズを調整する

/* clamp()を使うとブレークポイントなしで滑らかに調整できる（CSSシリーズ第二回） */
.about-text h1 {
  font-size: clamp(1.5rem, 5vw, var(--font-size-3xl));
  /* 最小1.5rem・画面幅の5%・最大2.5rem */
}

main section h2 {
  font-size: clamp(1.25rem, 4vw, var(--font-size-2xl));
}

💡 clamp() を使うとブレークポイントが減らせます！
メディアクエリを何個も書かなくても、画面幅に応じてなめらかにフォントサイズが変化します。

4. 🖼️ 画像の最適化

レスポンシブ画像の対応

<!-- HTMLシリーズ第二回で学んだloading属性を活用 -->
<img
  src="profile.jpg"
  alt="田中太郎のプロフィール写真"
  class="profile-image"
  loading="eager"
/>
<!-- ファーストビューの画像はeager（すぐ読み込む）でOK -->

画像ファイルサイズを小さくする

📦 公開前にやっておきたい画像の最適化：

① 画像形式をWebPに変換する
   → JPEGより30%程度ファイルサイズが小さくなる

② 画像を適切なサイズにリサイズする
   → プロフィール画像なら500px程度で十分（過剰に大きい画像は不要）

③ 圧縮する
   → TinyPNG（tinypng.com）などの無料ツールで圧縮

5. ✅ 公開前の最終チェック

アクセシビリティの最終確認

✅ すべての画像に適切な alt が付いているか
✅ フォームの label と input が正しく紐づいているか
✅ キーボードだけで操作できるか（Tabキーで確認）
✅ 見出しの階層が正しいか（h1→h2→h3の順）
✅ コントラスト（文字色と背景色の差）は十分か

コントラストチェック

文字色と背景色のコントラスト比が低いと、読みにくくなります。

WCAG（Web Content Accessibility Guidelines）の基準：
  通常のテキスト → コントラスト比 4.5:1 以上
  大きいテキスト（18px以上の太字など） → 3:1 以上

チェックツール：
  WebAIM Contrast Checker（webaim.org/resources/contrastchecker）
  Chrome開発者ツールの要素インスペクターでも確認可能

パフォーマンスの確認

✅ 画像を最適化したか
✅ 使っていないCSSは残っていないか
✅ Google Chromeの Lighthouse でスコアを確認したか
   （開発者ツール → Lighthouse タブ → 分析を実行）

SEOの最終確認（HTMLシリーズ第一回のおさらい）

✅ <title> は適切な内容になっているか
✅ <meta name="description"> は設定したか
✅ OGP（og:title・og:image等）は設定したか
✅ <html lang="ja"> は設定されているか

OGPを追加しよう

<head>
  <!-- 前回までに書いた内容に追加 -->

  <!-- OGP設定（HTMLシリーズ第一回で学んだ内容） -->
  <meta property="og:title" content="田中太郎 | ポートフォリオ" />
  <meta property="og:description" content="フロントエンドエンジニア田中太郎の自己紹介ページです。" />
  <meta property="og:image" content="https://taro-tanaka.github.io/ogp-image.png" />
  <meta property="og:url" content="https://taro-tanaka.github.io/" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

⚠️ OGPのURLは絶対パスで！（HTMLシリーズ第一回のおさらい）
og:image には必ず https:// から始まる絶対URLを指定しましょう。
公開後のURLが決まってから設定するのがおすすめです。

6. 🌍 GitHub Pagesで無料公開する

GitHub Pagesとは？

GitHub Pagesとは「GitHubのリポジトリを無料でWebサイトとして公開できるサービス」です。
HTML・CSS・JavaScriptだけのサイトなら、完全無料で公開できます。

公開までの手順

① GitHubアカウントを作成する（すでにある場合はスキップ）
   → github.com

② 新しいリポジトリを作成する
   → リポジトリ名：「ユーザー名.github.io」にすると
     ルートURL（https://ユーザー名.github.io/）で公開できる

③ ファイルをアップロードする
   → index.html・style.css・profile.jpg などをアップロード

④ GitHub Pagesを有効にする
   → Settings → Pages → Source を「main」ブランチに設定

⑤ 数分待つと公開される！
   → https://ユーザー名.github.io/ でアクセスできる

git を使ってアップロードする場合

# ① リポジトリをクローン
git clone https://github.com/ユーザー名/ユーザー名.github.io.git

# ② フォルダに移動
cd ユーザー名.github.io

# ③ ファイルをコピー（index.html・style.css・画像など）

# ④ 変更をコミット
git add .
git commit -m "自己紹介ページを追加"

# ⑤ GitHubにプッシュ
git push origin main

💡 ファイル名は必ず index.html にしましょう！
index.html はWebサーバーが「デフォルトで表示するファイル」として認識します。
portfolio.html のような名前だと、URLに /portfolio.html を付けないと表示されません。

公開後の確認

✅ https://ユーザー名.github.io/ にアクセスして表示されるか確認
✅ スマホの実機でも確認する（開発者ツールだけでなく）
✅ OGP設定が正しいか確認する
   → OGPプレビューツールで確認できる
   （例：LinkedIn Post Inspector・Facebook Sharing Debugger・
     サードパーティのOGP/Xカードプレビューツールなど）

7. 🎯 完成！全体の振り返り

3回のシリーズで学んだこと

回	やったこと	使った知識
第一回	HTML構造を作る	セマンティックHTML・アクセシビリティ（HTMLシリーズ）
第二回	CSSでデザイン	CSS変数・Flexbox・Grid・アニメーション（CSSシリーズ）
第三回	公開まで仕上げ	レスポンシブ・SEO・GitHub Pages

このシリーズで実践したこと

✅ セマンティックHTML（header・main・section・article・footer）
✅ アクセシビリティ（alt・aria-label・label紐づけ・フォーカス管理）
✅ CSS変数によるテーマ管理
✅ Flexbox・Gridの使い分け
✅ 疑似要素（::before・::after）による装飾
✅ アニメーション・prefers-reduced-motion対応
✅ レスポンシブデザイン（メディアクエリ・clamp）
✅ SEO対策（title・description・OGP）
✅ GitHub Pagesでの公開

HTMLシリーズ・CSSシリーズで学んだ「なぜそうするのか」の知識が、
すべて今回のページ制作に活かされました。

「なんとなく書くコード」から「意味を理解して書くコード」へ。
このシリーズを通して、その変化を実感していただけたら嬉しいです🎉

8. 🚀 次のステップ

このページをベースに、さらにレベルアップしてみましょう！

🌱 次にやってみること：

① デザインをカスタマイズする
   → CSS変数の色を変えるだけでも印象が変わります

② TypeScriptで動きを追加する（TypeScriptシリーズを参照）
   → ダークモード切り替えボタンを作ってみる
   → スクロールに応じたアニメーションを追加する

③ Reactで作り直してみる（フロントエンド基礎講座を参照）
   → コンポーネント設計の練習になります

④ 独自ドメインを設定する
   → GitHub Pagesの設定から独自ドメインを紐づけられます

完成したページはあなたの「デジタル名刺」です。
就職・転職活動・フリーランスの営業など、
さまざまな場面であなたを紹介してくれる存在になります。
ぜひ育てていってください🌟

お疲れ様でした！このシリーズはこれで完結です🎉

💬 質問や感想があれば、コメント欄でお気軽にどうぞ!
👍 役に立ったら、いいね&ストックをお願いします!
🎓 ここまで読んでくださって、本当にありがとうございました!

🔗 シリーズ記事

【第一回】構成を考える・HTMLで骨組みを作る
【第二回】CSSでデザインを整える
【第三回】レスポンシブ対応・仕上げ・公開する（この記事）