ToolShare Lab

Week 05 / Phase 2: CSS(第1週) バイブコーディングの土台 — フロントエンドレッスン

CSSの世界 — セレクタとプロパティ
HTMLを「見た目」に変える魔法の言語

Phase 1の4週間でHTMLの基本を身につけたあなたは、もう「構造を書ける人」です。今週からのPhase 2では、その構造に色・余白・フォント・レイアウトを加えて「本物のWebサイト」に仕上げていきます。第1週はCSSの最重要基礎、セレクタとプロパティ、そして「どのスタイルが適用されるか」を決める詳細度の仕組みです。

読了時間: 約30分 公開日: 2026年4月29日 前提知識: Week 01〜04 完了

今週のゴール

CSSの3つの書き方(インライン・インターナル・外部CSS)を理解し、外部CSSをHTMLに正しくリンクできる。要素・クラス・ID・属性セレクタを使い分け、色・フォント・サイズを指定できる。HEX/RGB/HSLの色指定方法と、px/em/rem/% の単位の違いを説明できる。カスケード・詳細度・継承の仕組みを理解し、「なぜこのスタイルが適用されないのか」を自力で解決できる。

CSSとは何か — HTMLとの役割分担

CSSは Cascading Style Sheets(カスケーディング・スタイル・シート)の略です。日本語にすると「重なって適用されるスタイル指示書」。一言でいうと 「HTMLの見た目を決める言語」 です。

HTMLとCSSの関係は、家に例えるとこうなります。

Phase 1で家を建てたあなたは、これから内装を仕上げていきます。同じ構造のHTMLでも、CSSを変えれば全く違うサイトになります。それがCSSの力です。

CSSなしのHTMLを見てみる

まず、CSSなしのHTMLがどう見えるか確認しましょう。Week 02 で書いたレシピページをブラウザで開くと、こうなっているはずです。

これがブラウザのデフォルトスタイルです。ブラウザは「CSSが何もなくても最低限読めるように」スタイルを当ててくれています。でも、これだけでは「Webサイト」とは呼べません。

CSSを書く基本構文

CSSは「セレクタ・プロパティ・値」の3点セットで書きます。 

セレクタ {
    プロパティ: 値;
}

/* 具体例 */
h1 {
    color: red;
    font-size: 32px;
}

これだけ覚えれば、CSSの99%は書けます。あとは「どんなセレクタがあるか」「どんなプロパティがあるか」を覚えていくだけです。

用語整理:

  • セレクタ(selector): 「何に」スタイルを当てるか(例: h1, .btn, #header)
  • プロパティ(property): 「何を」変えるか(例: color, font-size, margin)
  • 値(value): 「どう」変えるか(例: red, 32px, 10px)
  • 宣言ブロック(declaration block): {} で囲まれた部分。複数のプロパティを書ける

CSSの3つの書き方 — どこに書くべきか

CSSはHTMLに3通りの方法で適用できます。結論からいえば、本番では「外部CSS」の一択ですが、3つとも知っておく必要があります。

方法1: インラインCSS(非推奨)

HTMLタグのstyle属性に直接書く方法。一番手軽だけど、一番ダメな書き方です。 

<h1 style="color: red; font-size: 32px;">見出し</h1>

使ってはいけない理由:

メールHTMLなど特殊な用途以外では、絶対に使わないでください。

方法2: インターナルCSS(限定的に使う)

HTMLの<head>内に <style> タグでまとめて書く方法。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
    <style>
        h1 {
            color: red;
            font-size: 32px;
        }
        p {
            line-height: 1.8;
        }
    </style>
</head>
<body>
    <h1>見出し</h1>
    <p>段落のテキスト</p>
</body>
</html>

1ページ完結のテストやLP制作で「このページ専用のスタイルがあと少しだけある」場合に使います。複数ページにまたがるサイトでは、外部CSSに移行しましょう。

方法3: 外部CSS(推奨)

style.css のようにCSSだけを書いた別ファイルを作り、HTMLから <link> タグで読み込みます。本番のWebサイトはこれ一択です。 

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>見出し</h1>
    <p>段落のテキスト</p>
</body>
</html>
/* style.css */
h1 {
    color: red;
    font-size: 32px;
}
p {
    line-height: 1.8;
}

外部CSSのメリット:

覚え方: 個人練習でもインライン・インターナルは使わない。最初から外部CSSで書く癖を付ける。実務に出たときに困らない。

セレクタの基本 — 「何に」スタイルを当てるか

セレクタはCSSの心臓です。「どのHTML要素に、このスタイルを当てるか」を指定します。基本の5種類をマスターすれば、ほとんどの場面で困りません。

1. 要素セレクタ(タイプセレクタ)

HTMLタグ名で指定する、もっとも基本的なセレクタ。指定したタグ全部に適用されます。 

/* すべてのh1にスタイルを当てる */
h1 {
    color: navy;
}

/* すべてのpにスタイルを当てる */
p {
    line-height: 1.7;
}

2. クラスセレクタ(.で始まる)

HTML要素のclass属性を指定します。セレクタの中で一番よく使うのがこれ。 

<!-- HTML -->
<p class="lead">リード文</p>
<p>通常の段落</p>
<p class="lead">もう一つのリード文</p>
/* CSS: classが"lead"の要素だけにスタイルを当てる */
.lead {
    font-size: 20px;
    font-weight: bold;
}

複数の要素に同じスタイルを当てたいときは、classを使います。1つの要素に複数のクラスを付けることもできます(スペースで区切る)。 

<p class="lead highlight">リード文かつ強調</p>

3. IDセレクタ(#で始まる)

HTML要素のid属性を指定します。1ページに1回だけ使えるセレクタ。 

<!-- HTML -->
<header id="site-header">...</header>
/* CSS */
#site-header {
    background-color: black;
    color: white;
}

ただし、CSSではIDセレクタはあまり使いません。クラスを優先するのが現代の主流です。理由は次の章「詳細度」で解説します。IDは主にJavaScriptやページ内リンク(<a href="#site-header">)で使います。

4. 属性セレクタ

HTMLの属性で指定するセレクタ。[]で囲みます。 

/* type="email"のinputだけにスタイル */
input[type="email"] {
    border: 2px solid blue;
}

/* href="https://"で始まるa要素(外部リンク)にスタイル */
a[href^="https://"] {
    color: green;
}

5. 複合セレクタ(子孫セレクタ・子セレクタ)

セレクタを組み合わせて「特定の場所にあるあの要素」に絞り込めます。 

/* article内のp(子孫すべて) */
article p {
    color: gray;
}

/* article直下のp(直接の子だけ) */
article > p {
    font-size: 18px;
}

/* navの中のa */
nav a {
    text-decoration: none;
}

/* class="card"の中のh3 */
.card h3 {
    margin-top: 0;
}

セレクタ選びの基本: 9割は「クラスセレクタ」を使う。要素セレクタはサイト全体のリセット用。属性セレクタはフォーム関連だけ。IDセレクタはCSSではほぼ使わない。

プロパティと値 — 「どう」スタイルを当てるか

プロパティは何百種類もありますが、最初の100ページくらいで使うのは20個ほどです。Week 05 で覚えるべき主要プロパティを整理します。

テキスト系プロパティ

p {
    color: #333;              /* 文字色 */
    font-size: 16px;          /* 文字サイズ */
    font-family: sans-serif;  /* フォント */
    font-weight: bold;        /* 太さ(normal / bold / 数値) */
    line-height: 1.7;         /* 行の高さ */
    text-align: center;       /* 左右配置(left/center/right) */
    text-decoration: none;    /* 下線(none で消す) */
}

背景系プロパティ

.box {
    background-color: #f5f5f5;        /* 背景色 */
    background-image: url(bg.jpg);    /* 背景画像 */
    background-size: cover;           /* 画像サイズ */
    background-position: center;      /* 画像位置 */
    background-repeat: no-repeat;     /* 繰り返し */
}

余白・サイズ系プロパティ

.box {
    width: 300px;             /* 幅 */
    height: 200px;            /* 高さ */
    margin: 20px;             /* 外側の余白 */
    padding: 16px;            /* 内側の余白 */
}

※ marginとpaddingの違いは、Week 06「ボックスモデル」で詳しく解説します。今は「箱の外と内に空ける余白」と覚えてください。

枠線・角丸プロパティ

.card {
    border: 1px solid #ccc;   /* 枠線(太さ・種類・色) */
    border-radius: 8px;       /* 角丸 */
}

表示・非表示

.hidden {
    display: none;            /* 完全に非表示(レイアウトから消える) */
}

.invisible {
    visibility: hidden;       /* 見えないが場所は確保 */
}

色の指定方法 — HEX / RGB / HSL の使い分け

CSSで色を指定する方法は5種類あります。状況に応じて使い分けます。

1. 色名(キーワード)

red, blue, green など、名前で指定する方法。約140色が定義されています。 

h1 { color: red; }
p { color: black; }
.warning { background-color: orange; }

手軽だけど、サイトのブランドカラーを正確に指定できないので、本番ではあまり使いません。デモやテストでは便利です。

2. HEX(16進数)— もっとも一般的

#に続けて6桁の16進数で書きます。#RRGGBB(赤・緑・青を各2桁)。 

h1 { color: #ff0000; }       /* 赤 */
p { color: #333333; }        /* 濃いグレー */
.btn { background: #4caf50; }/* 緑 */

/* 同じ数字が並ぶ場合は3桁に省略可能 */
h1 { color: #f00; }          /* #ff0000 と同じ */
p { color: #333; }           /* #333333 と同じ */

デザインツール(Figma, Photoshop)からコピペしやすく、Web制作の現場でもっとも使われている記法です。

3. RGB / RGBA

赤・緑・青を0〜255の数値で指定します。RGBAの「A」は透明度(0〜1)。 

h1 { color: rgb(255, 0, 0); }              /* 赤 */
.overlay { background: rgba(0, 0, 0, 0.5); } /* 黒の半透明 */

透明度を使いたいときはRGBA一択です。HEXでは透明度を扱えません(8桁HEXもあるが、ブラウザサポートが少し遅い)。

4. HSL / HSLA

色相(Hue: 0〜360)・彩度(Saturation: 0〜100%)・明度(Lightness: 0〜100%)で指定。 

h1 { color: hsl(0, 100%, 50%); }        /* 赤 */
p { color: hsl(0, 0%, 20%); }            /* 濃いグレー */

「同じ色相で明度だけ変えたい」「彩度を落としたい」というデザイン調整に強い記法。慣れるとHEXより直感的に色を作れます。

5. CSS変数(カスタムプロパティ)

応用編ですが、ブランドカラーをまとめて管理する強力な機能。 

:root {
    --color-primary: #4caf50;
    --color-text: #333;
}

h1 { color: var(--color-primary); }
p { color: var(--color-text); }

修正時に :root の1箇所を変えるだけで、サイト全体の色が一気に変わります。詳しくはPhase 3 で扱います。

使い分け基準: ブランドカラーや本番サイトはHEX。透明度が必要ならRGBA。色のバリエーション展開ならHSL。デモはキーワード。本番に「red」「blue」を使うのは卒業しましょう。

フォント・テキスト周りのプロパティ

Webサイトの印象はフォントで7割決まると言っても過言ではありません。重要なプロパティを押さえましょう。

font-family — フォントの指定

body {
    font-family: "Helvetica Neue", "Hiragino Sans", "メイリオ", sans-serif;
}

複数のフォントをカンマ区切りで列挙します。ブラウザは左から順にフォントを探して、見つかったものを使います。最後に必ずsans-serif(ゴシック)かserif(明朝)を書く約束。フォント名にスペースが含まれる場合は" "で囲みます。

font-size — 文字サイズ

h1 { font-size: 32px; }
p  { font-size: 16px; }
small { font-size: 0.875rem; }

本文は 16px が読みやすさの基準。それより小さくすると読みにくくなります。rem 単位は次のセクションで解説。

font-weight — 文字の太さ

p { font-weight: normal; }   /* 標準(=400) */
h1 { font-weight: bold; }    /* 太字(=700) */
.thin { font-weight: 300; }  /* 数値でも指定可能 */

line-height — 行の高さ

読みやすさを決める最重要プロパティ。日本語の本文は 1.7〜1.9、英語の本文は 1.5〜1.6 が目安です。 

body { line-height: 1.7; }   /* 単位なしの数値が推奨 */
h1   { line-height: 1.3; }   /* 見出しは詰め気味 */

text-align — 横方向の位置

p      { text-align: left; }    /* 左寄せ(デフォルト) */
.center { text-align: center; }  /* 中央寄せ */
.right  { text-align: right; }   /* 右寄せ */

letter-spacing — 文字間隔

h1 { letter-spacing: 0.05em; }   /* 見出しは少し空けると上品 */
.brand { letter-spacing: 0.2em; } /* ロゴ風の間延び */

CSSの単位 — px / em / rem / % / vw vh

CSSの単位は5つ覚えれば十分です。それぞれ「何を基準にしているか」が違います。

px(ピクセル)— 絶対単位

.box { width: 300px; }
h1   { font-size: 32px; }

画面のドット数で指定する単位。直感的に分かりやすいけど、レスポンシブ対応では使いにくい(画面サイズで自動的に変わらない)。線幅や枠線、画像サイズなど「絶対値で固定したい」ところで使います。

em — 親要素のフォントサイズ基準

body { font-size: 16px; }
h1   { font-size: 2em; }    /* = 32px (16 × 2) */
h2   { font-size: 1.5em; }  /* = 24px */

親要素のフォントサイズを「1」とした相対値。ネストすると倍々に膨らむのでバグの元。初心者は使わなくてOK。

rem — ルート(html)のフォントサイズ基準

html { font-size: 16px; }   /* 基準を決める */
h1   { font-size: 2rem; }   /* = 32px */
p    { font-size: 1rem; }   /* = 16px */
small { font-size: 0.875rem; } /* = 14px */

現代のWeb制作で一番おすすめ。emと違ってネストの影響を受けず、ユーザーがブラウザの文字サイズを大きくしたときに連動してくれる(アクセシビリティ◎)。

%(パーセント)

.container { width: 80%; }   /* 親要素の幅の80% */
img        { width: 100%; }  /* 親いっぱいに広げる */

親要素のサイズを基準にした割合。レスポンシブで頻繁に使います。

vw / vh — 画面幅・画面高さ基準

.hero { height: 100vh; }     /* 画面の高さいっぱい */
h1    { font-size: 5vw; }    /* 画面幅の5% */

vw = ビューポート幅の1%、vh = ビューポート高さの1%。ファーストビューを画面いっぱいに広げるときの定番テクニック。

初心者向けの使い分け早見表:

  • 枠線・画像サイズ・固定幅: px
  • フォントサイズ: rem
  • 幅・余白(可変): %
  • ファーストビューの全画面領域: vh
  • em は当面使わなくてOK

カスケードと詳細度 — どのスタイルが勝つのか

CSS最大のハマりどころが、ここです。「あれ、CSSが効かない…」の9割は、詳細度の理解不足が原因です。

カスケード(Cascade)とは

CSSは「Cascading Style Sheets」=「重なるスタイルシート」。複数のスタイルが同じ要素に当たったとき、後から書いたものが勝つのが基本ルールです。 

p { color: red; }
p { color: blue; }   /* これが勝って青になる */

ただし、これは「同じセレクタ・同じ詳細度」のときだけ。セレクタの強さが違うと、後ろに書いてあっても負けます。

詳細度(Specificity)— セレクタの強さの計算

セレクタには「強さの数値」があります。強い方が勝つ。計算方法は意外とシンプルです。 

p             { ... }   /* 1点(要素1つ) */
.lead         { ... }   /* 10点(クラス1つ) */
article p     { ... }   /* 2点(要素2つ) */
article .lead { ... }   /* 11点(要素+クラス) */
#hero p       { ... }   /* 101点(ID+要素) */
#hero         { ... }   /* 100点(ID1つ) */

たとえばp { color: red; } と article p { color: blue; }が両方あるとき、後者は2点なので青が勝ちます。

「CSSが効かない」を解決する3ステップ

  1. ブラウザのDevToolsを開く(F12 / 右クリック→検証)
  2. 該当要素を選んでStyles欄を見る。打ち消し線(strikethrough)が引かれているスタイルが「上書きされた負けスタイル」
  3. 勝っているセレクタを確認し、それより詳細度の高いセレクタを書く or 同じくらいの詳細度で「後ろに」書き直す

!important — 最終手段(乱用厳禁)

!important を付けると詳細度を全無視して勝てます。ただしこれは「核兵器」。一度使うと別の!importantでしか上書きできなくなり、CSSが地獄化します。 

p { color: red !important; }   /* 何があっても赤 */

使ってよいのは「外部ライブラリのスタイルを上書きしたい」「ユーザースタイルシート」など、ごく限られた場面だけです。

覚え方: 詳細度は「ID>クラス>要素」。CSSが効かないときは「もっと詳しく書く」か「最後に書く」。!importantは最終手段。

継承 — 親から子へ流れるプロパティ

CSSには「親要素のスタイルを子要素が引き継ぐ」仕組みがあります。これが継承(inheritance)です。 

body {
    color: #333;
    font-family: sans-serif;
    line-height: 1.7;
}

このとき、bodyの中のpやh1にも、自動的に同じ色・フォント・行間が適用されます。毎回全部の要素に書く必要はないということ。

継承するプロパティ

継承しないプロパティ

継承を使った効率的なCSS

/* ❌ 毎回書く(冗長) */
h1 { color: #333; font-family: sans-serif; }
h2 { color: #333; font-family: sans-serif; }
p  { color: #333; font-family: sans-serif; }

/* ✅ bodyに書けば全部に効く */
body {
    color: #333;
    font-family: sans-serif;
}

サイト全体の基本スタイル(色・フォント・行間)はbodyにまとめて書く。これが継承の正しい使い方です。

ブラウザのデフォルトCSSとリセット

ブラウザにはあらかじめ「ユーザーエージェントスタイルシート」というデフォルトCSSが組み込まれています。<h1>が大きく、<ul>に左の余白がある、<a>が青字になる、これらは全部ブラウザの仕業です。

困るのは、ブラウザによって違うこと

Chrome、Firefox、Safari、Edgeで、デフォルトの数値が微妙に違います。これを揃えるために、「リセットCSS」を最初に読み込みます。

1. リセット系(Eric Meyer's Reset)

ブラウザのスタイルを全部ゼロにする方式。 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

シンプルで強力ですが、h1とpのサイズも同じになるので、自分で全部書き直す必要があります。

2. ノーマライズ系(Normalize.css)

ブラウザ間の差異だけ修正して、適度なデフォルトは残す方式。Bootstrap などの有名フレームワークも採用。初心者にはこちらがおすすめです。

Normalize.css 公式サイト

3. モダンなアプローチ

最近は「最低限のリセット+box-sizingの統一」を自分で書く方法が主流になっています。 

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
    line-height: 1.7;
    color: #333;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

この10行があるだけで、ブラウザ差異と「画像はみ出し問題」が一気に解決します。新規プロジェクトの最初に書くテンプレとして覚えておきましょう。

今週のよくある間違い

ミス1: セレクタにスペースが余分

/* ❌ クラス名と要素の間にスペースを入れている → 子孫セレクタの意味になってしまう */
.card h3 { color: red; }   /* card内のh3 */
.card.featured { ... }      /* cardかつfeatured(ピリオド前後にスペースなし) */

/* よくやるミス */
.card .featured { ... }   /* card内の、別要素の.featured */
.card.featured { ... }    /* card かつ featured(同じ要素) — 全く別物!! */

ミス2: コロンとセミコロンの忘れ

/* ❌ コロンが抜けている */
h1 {
    color red;     /* コロンがない */
    font-size 32px /* セミコロンもない */
}

/* ✅ */
h1 {
    color: red;
    font-size: 32px;
}

CSSはコロン(:)で「プロパティと値を分け」、セミコロン(;)で「宣言を区切る」。1つでも抜けると、それ以降のスタイルが全部効かなくなります。

ミス3: クラス名にハイフン以外の記号

/* ❌ 数字始まり、空白、特殊文字はNG */
.123-card { ... }      /* 数字始まりは無効 */
.my card { ... }       /* スペースは別クラス扱い */
.my_card { ... }       /* 動くけど習慣的にハイフンを使う */

/* ✅ ハイフン区切り(kebab-case)が定番 */
.my-card { ... }
.btn-primary { ... }

ミス4: 単位の書き忘れ

/* ❌ 0以外で単位を忘れると効かない */
h1 { font-size: 32; }    /* 単位なし → 無効 */
.box { width: 300; }     /* 同じく無効 */

/* ✅ 必ず単位を付ける(0以外) */
h1 { font-size: 32px; }
.box { width: 300px; }

/* 0だけは単位なしでもOK */
.reset { margin: 0; padding: 0; }

ミス5: 「効かないからとりあえず!important」

これをやると地獄が始まります。必ず先にDevToolsで「なぜ効かないか」を調べる。詳細度が原因なら、適切なセレクタを書く。それが正しい解決法です。

今週の課題

Week 05 課題

Phase 1 卒業課題で作ったポートフォリオページに、外部CSSで色とフォントを当てて「サイトっぽく」仕上げることが今週のゴールです。

必須要件

  1. style.cssを新規作成し、HTMLから<link>で読み込む
  2. bodyに基本のフォント・行間・文字色を指定する
  3. <h1>と<h2>に色とサイズを指定する
  4. .btnクラスを作り、ボタン要素に背景色・文字色・パディング・角丸を当てる
  5. 少なくとも3つのクラスを定義し、それぞれ別の要素に適用する
  6. ホバー時に色が変わるリンクを作る(a:hover)
  7. HEX/RGB/RGBAのうち2種類以上を使ってみる
  8. フォントサイズにremを使う(html要素にfont-size: 16pxを設定)
  9. リセットCSSとして上記「モダンなアプローチ」のテンプレを冒頭に書く
  10. F12でDevToolsを開き、「Computed」タブで実際に適用されているスタイルを確認する

ボーナス課題

自己チェック項目(提出前に確認)

提出前に、AIが作ったコードでよくある間違いも確認しておきましょう。上で見た「今週のよくある間違い」に加えて、AI特有のクセもあります。

自己診断テスト

  1. CSSの3つの書き方(インライン/インターナル/外部)のうち、本番で使うべきはどれですか？
  2. クラスセレクタとIDセレクタの違いと、CSSではどちらを優先すべきか説明できますか？
  3. p { color: red; } と article p { color: blue; } が両方あるとき、articleの中のpは何色になりますか？
  4. HEXとRGBAの使い分け基準を説明できますか？
  5. emとremの違いと、初心者がどちらを使うべきか説明できますか？
  6. 「CSSが効かない」ときの調査手順を3つ以上挙げてください
  7. !importantを乱用してはいけない理由は？
  8. 継承するプロパティと、しないプロパティをそれぞれ3つずつ挙げてください
  9. 新規プロジェクトの最初に書くべきリセットCSSを暗唱できますか？

次週予告 — Week 06: ボックスモデル

Week 05 お疲れ様でした! CSSの基礎の中でも一番大事な「セレクタ・プロパティ・詳細度」をマスターしました。これでブラウザのDevToolsを開いて「なぜこのスタイルが効くのか」を読めるようになっているはずです。

次のWeek 06では、「ボックスモデル」を扱います。すべてのHTML要素は「箱」で、その箱には「内容・余白(padding)・枠線(border)・外側の余白(margin)」の4層があります。width: 300pxと書いた箱が実際は330pxになる謎、marginが消える「相殺」現象、ブロックとインラインの違いなど、CSSの大ハマリどころを一気に解消します。

さらにdisplayプロパティ(block / inline / inline-block)、position(static / relative / absolute / fixed)も登場。これでようやく「要素を自由に配置する力」が手に入ります。

Phase 2 ロードマップ:

  • Week 05 (今週): セレクタ・プロパティ・詳細度・色・フォント・単位
  • Week 06: ボックスモデル・display・position・float
  • この先（Coming）: Flexbox・Grid — モダンレイアウトの2大武器
  • この先（Coming）: レスポンシブデザイン・メディアクエリ・モバイルファースト

← Week 04: セマンティック・メタタグ・アクセシビリティ | カリキュラム全体に戻る | Week 06: ボックスモデル完全攻略 →