0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@toamoku-20220418(toamoku)

🚀 HTML・CSSで自己紹介ページを作ろう【第三回・最終回】レスポンシブ対応・仕上げ・公開する

0
Posted at

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でデザインを整える
  • 【第三回】レスポンシブ対応・仕上げ・公開する（この記事）
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?