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で自己紹介ページを作ろう【第二回】CSSでデザインを整える

0
Posted at

1. 👋 はじめに

前回はセマンティックHTMLで自己紹介ページの骨組みを作りました。
今の状態は文字だけが並んだ、装飾のないページです。

今回は CSSでデザインを整えて いきます！🎨

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

この記事を読めば：

  • ✅ CSS変数でカラーテーマを定義できる
  • ✅ Flexbox・Gridでレイアウトを組める
  • ✅ タイポグラフィ・余白の整え方がわかる
  • ✅ ホバーエフェクト・簡単なアニメーションが作れる

2. 🎨 まずはCSSファイルの土台を作る

リセットCSSとCSS変数を定義する

CSSシリーズ第一回で学んだ知識をここで使います！
box-sizing: border-box を全要素に設定し、CSS変数でカラーテーマを一元管理しましょう。

/* style.css */

/* ① リセット：全要素にborder-boxを設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ② CSS変数でカラーテーマを定義 */
:root {
  /* カラー */
  --color-primary: #3b82f6;      /* メインカラー（青） */
  --color-primary-dark: #2563eb; /* ホバー時の濃い青 */
  --color-text: #1f2937;         /* 本文の文字色 */
  --color-text-light: #6b7280;   /* 薄い文字色 */
  --color-bg: #ffffff;           /* 背景色 */
  --color-bg-secondary: #f9fafb; /* セクションの背景色 */
  --color-border: #e5e7eb;       /* 枠線の色 */

  /* フォントサイズ */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
  --font-size-3xl: 2.5rem;    /* 40px */

  /* 余白 */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 4rem;    /* 64px */

  /* その他 */
  --border-radius: 8px;
  --max-width: 1000px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ③ 基本のタイポグラフィ設定 */
body {
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--color-text);
  line-height: 1.7;
  background: var(--color-bg);
}

/* ④ リンクのデフォルトスタイルをリセット */
a {
  color: inherit;
  text-decoration: none;
}

/* ⑤ 画像を最大幅100%に */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

💡 CSS変数を使うメリット（CSSシリーズ第一回のおさらい）
--color-primary を1箇所変更するだけで、サイト全体のメインカラーを一括で変更できます。
「後で色を変えたくなったとき」に威力を発揮します！

3. 📝 ヘッダーのスタイリング

header {
  position: sticky;    /* CSSシリーズ第二回で学んだスクロール追従 */
  top: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;             /* 中央揃え */
  padding: var(--spacing-md) var(--spacing-lg);

  /* Flexboxで左右に配置 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: var(--font-size-lg);
  font-weight: bold;
}

header nav ul {
  display: flex;              /* ナビを横並びに */
  gap: var(--spacing-lg);
  list-style: none;
}

header nav a {
  font-weight: 500;
  transition: color 0.2s ease;  /* CSSシリーズ第三回のtransition */
}

header nav a:hover {
  color: var(--color-primary);
}

💡 position: sticky を使った理由
CSSシリーズ第二回で学んだ sticky を使うことで、スクロールしてもヘッダーが画面上部に固定されます。
ナビゲーションはいつでもアクセスできると親切です。

4. 📝 自己紹介セクションのスタイリング

#about {
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.about-inner {
  max-width: var(--max-width);
  margin: 0 auto;

  /* Flexboxで写真とテキストを横並びに */
  display: flex;
  align-items: center;
  gap: var(--spacing-2xl);
}

.profile-image {
  width: 240px;
  height: 240px;
  border-radius: 50%;      /* 円形にする */
  object-fit: cover;       /* 縦横比を保ちつつ枠に収める */
  flex-shrink: 0;          /* 縮まないようにする（CSSシリーズ第二回） */
  box-shadow: var(--shadow);
}

.about-text h1 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-sm);
}

.catchphrase {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  font-weight: bold;
  margin-bottom: var(--spacing-md);
}

.about-text .bio {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-light);
}

.sns-links {
  display: flex;
  gap: var(--spacing-md);
  list-style: none;
}

.sns-links a {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sns-links a:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
}

⚠️ 詳細度のバグに注意！（CSSシリーズ第一回のおさらい）
第一回のHTMLでは .catchphrase も .about-text 直下の <p> です。
もし .about-text .bio の代わりに .about-text > p と書いてしまうと、.catchphrase にもマッチしてしまい、キャッチコピーの色が意図した青ではなく本文用のグレーに上書きされてしまいます。

/* ❌ NG：.catchphrase にもマッチしてしまう */
.about-text > p {
  color: var(--color-text-light);  /* → キャッチコピーもグレーになる！ */
}

/* ✅ OK：本文専用のクラスで狙い撃ちする */
.about-text .bio {
  color: var(--color-text-light);  /* → .bio クラスの要素だけに適用 */
}

HTML側も本文の <p> に class="bio" を追加しておきましょう。

<p class="bio">2024年からWeb開発を学び始め、...</p>

💡 object-fit: cover について
プロフィール写真の縦横比が正方形でなくても、border-radius: 50% の円形の枠にきれいに収まるようにします。
画像が引き伸ばされず、はみ出た部分は自動でトリミングされます。

5. 📝 スキル一覧セクションのスタイリング

#skills {
  padding: var(--spacing-2xl) var(--spacing-lg);
  background: var(--color-bg-secondary);
}

#skills h2 {
  max-width: var(--max-width);
  margin: 0 auto var(--spacing-xl);
  font-size: var(--font-size-2xl);
}

.skill-list {
  max-width: var(--max-width);
  margin: 0 auto;
  list-style: none;

  /* Gridで縦に並べる（CSSシリーズ第二回） */
  display: grid;
  gap: var(--spacing-lg);
}

.skill-item {
  display: grid;
  grid-template-columns: 200px 1fr;  /* 名前:固定幅・バー:残り全部 */
  align-items: center;
  gap: var(--spacing-md);
}

.skill-name {
  font-weight: 500;
}

.skill-bar {
  height: 12px;
  background: var(--color-border);
  border-radius: 999px;    /* 完全な丸角（CSSシリーズ第一回） */
  overflow: hidden;
}

.skill-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;

  /* ページ読み込み時にバーが伸びるアニメーション（CSSシリーズ第三回） */
  animation: fillBar 1s ease forwards;
}

@keyframes fillBar {
  from { width: 0; }
  /* to の値はHTML側のstyle="width: 90%"などが使われる */
}

💡 なぜここは Grid を使うのか？
CSSシリーズ第二回で学んだ「Flexbox vs Grid の使い分け」を思い出してください。
スキル名とバーを「列」として整列させたいので、Gridが適しています。

5. 📝 経歴・実績セクションのスタイリング

#works {
  padding: var(--spacing-2xl) var(--spacing-lg);
}

#works h2 {
  max-width: var(--max-width);
  margin: 0 auto var(--spacing-xl);
  font-size: var(--font-size-2xl);
}

.timeline {
  max-width: var(--max-width);
  margin: 0 auto;
  list-style: none;

  /* タイムラインの縦線を表現 */
  border-left: 2px solid var(--color-border);
}

.timeline-item {
  position: relative;
  padding-left: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* タイムラインの丸ポイント（::beforeで作る・CSSシリーズ第三回） */
.timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
}

.timeline-item time {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-sm);
}

.timeline-item h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

.timeline-item p {
  color: var(--color-text-light);
}

💡 ::before でタイムラインの丸ポイントを作る
CSSシリーズ第三回で学んだ疑似要素の応用です。
HTMLを増やさずに、CSSだけで装飾的な丸ポイントを表現できます。

6. 📝 お問い合わせセクションのスタイリング

#contact {
  padding: var(--spacing-2xl) var(--spacing-lg);
  background: var(--color-bg-secondary);
}

#contact h2 {
  max-width: 600px;
  margin: 0 auto var(--spacing-sm);
  font-size: var(--font-size-2xl);
}

#contact > p {
  max-width: 600px;
  margin: 0 auto var(--spacing-xl);
  color: var(--color-text-light);
}

#contact form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  font-family: inherit;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* フォーカス時のスタイル（CSSシリーズ第一回） */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

button[type="submit"] {
  padding: var(--spacing-sm) var(--spacing-xl);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  font-weight: bold;
  cursor: pointer;

  transition: background 0.2s ease, transform 0.2s ease;
}

button[type="submit"]:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

button[type="submit"]:active {
  transform: translateY(0);
}

⚠️ :focus に outline: none を書くときの注意（CSSシリーズ第一回）
outline: none だけを書くとキーボードユーザーが「今どこにフォーカスがあるか」わからなくなってしまいます。
必ず border-color や box-shadow で代わりのフォーカス表示を用意しましょう。

7. 📝 フッターのスタイリング

footer {
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  color: var(--color-text-light);
}

footer p:first-child {
  margin-bottom: var(--spacing-sm);
}

footer a {
  transition: color 0.2s ease;
}

footer a:hover {
  color: var(--color-primary);
}

footer small {
  font-size: var(--font-size-sm);
}

8. 🎨 セクション見出しの共通スタイル

各セクションの <h2> に共通のスタイルを当てて統一感を出しましょう。

main section h2 {
  position: relative;
  padding-bottom: var(--spacing-md);
}

/* 見出しの下に短いアクセントラインを追加（::afterを使う） */
main section h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
}

9. ♿ アクセシビリティ：アニメーション低減設定に対応する

CSSシリーズ第三回で学んだ prefers-reduced-motion をここで実践します！
スキルバーの読み込みアニメーション（fillBar）やボタンのホバー時の transform など、このページには複数のアニメーションがあります。
前庭障害などでアニメーションが辛いユーザーに配慮しましょう。

/* アニメーション低減設定のユーザーには動きを抑える */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

💡 このルールをCSSファイルの最後にまとめて書くのがおすすめです。
全要素に対して一括で適用されるため、個別のアニメーションに prefers-reduced-motion を書く手間が省けます。

10. ✅ ここまでの完成イメージ

┌─────────────────────────────────────────┐
│ Taro Tanaka         About Skills Works  │ ← 白背景・下に線
├─────────────────────────────────────────┤
│                                         │
│   ⭕     こんにちは、田中太郎です 👋      │
│  写真    フロントエンドエンジニア          │ ← 写真とテキスト横並び
│         自己紹介文...                    │
│         [X] [GitHub]                    │
│                                         │
├─────────────────────────────────────────┤
│ Skills （薄いグレー背景）                 │
│ ──                                      │
│ HTML/CSS      ▓▓▓▓▓▓▓▓▓░ 90%            │
│ TypeScript    ▓▓▓▓▓▓▓░░░ 70%            │ ← Gridで整列
│                                         │
├─────────────────────────────────────────┤
│ Works & Career                          │
│ ──                                      │
│ ● 2024年4月  Web開発の学習を開始          │ ← タイムライン
│ │                                       │
│ ● 2024年10月 ポートフォリオを制作         │
│                                         │
├─────────────────────────────────────────┤
│ Contact （薄いグレー背景）                │
│ ──                                      │
│ [お名前入力欄]                           │
│ [メール入力欄]                           │
│ [メッセージ入力欄]                       │
│ [送信するボタン]                         │
│                                         │
├─────────────────────────────────────────┤
│         X ・ GitHub                     │
│     © 2026 Taro Tanaka                  │ ← フッター
└─────────────────────────────────────────┘

11. ✅ CSSの確認チェックリスト

✅ box-sizing: border-box を全要素に設定しているか
✅ CSS変数で色・サイズを一元管理しているか
✅ Flexbox・Gridを適切に使い分けているか
✅ :hover・:focus のスタイルを用意しているか
✅ :focus に outline: none だけを設定していないか
✅ transition で状態変化をなめらかにしているか
✅ max-width + margin: 0 auto で中央揃えしているか
✅ prefers-reduced-motion でアニメーション低減設定に対応しているか

12. 🎯 まとめ

項目 使った技術
カラーテーマ CSS変数（--color-primary など）
ヘッダー Flexbox・position: sticky
自己紹介 Flexbox・object-fit: cover
スキル一覧 Grid・animation
経歴 ::before 疑似要素・position: relative/absolute
フォーム :focus スタイル・transition

CSSシリーズで学んだ知識が、こんなにたくさん使われていることに気づきましたか？
ボックスモデル・Flexbox・Grid・疑似要素・アニメーション・CSS変数…「基礎を学ぶ」ことが「実際に作る」ことに直結しています💪

次回は最終回！レスポンシブ対応・仕上げ・公開する を解説します！
スマホでも美しく表示されるように調整し、実際にインターネットに公開するところまで完成させましょう🌟

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

🔗 シリーズ記事

  • 【第一回】構成を考える・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?