4 / 10
レッスン 4
30分CSSの基本
📝 最後に理解度チェック（3問）がありますCSS基本 — セレクタ・プロパティ・値・詳細度・単位
HTML がページの構造を担うのに対し、CSS（Cascading Style Sheets）は見た目を担います。フォントの大きさ、色、余白、レイアウト、アニメーションまで、ブラウザ上の視覚的な表現はすべて CSS によって制御されます。このレッスンでは、CSS の基本文法であるセレクタ・プロパティ・値の三要素、スタイルの適用ルールを決めるカスケードと詳細度、そして数値の単位である px / rem / % / vw を体系的に学びます。
CSS の基本構文
CSSの基本構造：セレクタ・プロパティ・値・詳細度
CSS の基本単位は宣言ブロックと呼ばれる次の構造です。
セレクタ {
プロパティ: 値;
プロパティ: 値;
}
具体例を見てみましょう。
h1 {
color: #1d4ed8;
font-size: 2rem;
margin-bottom: 16px;
}
ここでは h1 がセレクタ、color font-size margin-bottom がプロパティ、#1d4ed8 2rem 16px が値です。セミコロン（;）で各宣言を区切り、中括弧（{}）で囲みます。
💡 CSSファイルの読み込み方: HTMLの
<head>内に<link rel="stylesheet" href="style.css">と記述してCSSファイルを外部読み込みするのが標準です。<style>タグ内に直接書く内部スタイルや、style="..."属性に書くインラインスタイルも動作しますが、保守性の観点から外部ファイル化を強く推奨します。
セレクタの種類
セレクタはどの HTML 要素にスタイルを適用するかを指定します。代表的なセレクタを整理します。
タグセレクタ
HTML タグ名をそのまま指定します。ページ上のすべての同名タグに適用されます。
p { color: #374151; }
a { text-decoration: none; }
クラスセレクタ
.クラス名 で指定します。同じクラスを複数要素に付与でき、再利用性が高いため最もよく使われます。
.card { background: white; border-radius: 8px; }
.btn-primary { background: #2563eb; color: white; }
HTML 側では <div class="card"> のように記述します。
IDセレクタ
#ID名 で指定します。同じIDはページ内に1つだけというルールがあります。詳細度が高いため、使いすぎると後述の詳細度問題を引き起こします。
#header { position: sticky; top: 0; }
複合セレクタ・擬似クラス
セレクタは組み合わせて使うことでより精密な指定ができます。
| セレクタ | 意味 | 例 |
|---|---|---|
A B | AのすべてのB（子孫） | nav a { } |
A > B | Aの直接の子B | ul > li { } |
A + B | Aの直後のB | h2 + p { } |
A.class | AかつclassのB | p.note { } |
:hover | ホバー状態 | a:hover { } |
:nth-child(n) | n番目の子要素 | li:nth-child(2) { } |
::before | 要素の前に疑似要素を挿入 | p::before { } |
💡 クラスを中心に設計する: IDセレクタは詳細度が高く、後で上書きしにくくなります。原則としてスタイル指定にはクラスを使い、IDはJavaScriptの操作対象として使う設計が保守しやすいです。
カスケードと詳細度
CSS の C は「Cascading（カスケード）」の頭文字です。複数のスタイルが同じ要素に指定された場合、どれが優先されるかを決めるルールがカスケードです。
詳細度（Specificity）の計算
詳細度は 4 桁のスコアで表されます。スコアが高いほど優先されます。
| セレクタ種類 | スコア | 例 |
|---|---|---|
| インラインスタイル | 1,0,0,0 | style="color:red" |
| IDセレクタ | 0,1,0,0 | #header { } |
| クラス・属性・擬似クラス | 0,0,1,0 | .btn / [type] / :hover |
| タグ・擬似要素 | 0,0,0,1 | h1 / ::before |
ユニバーサル * | 0,0,0,0 | 詳細度なし |
複合セレクタは各スコアを足し算します。例えば nav ul li.active のスコアは 0,0,1,3（クラス1 + タグ3）です。
!important について
!important をプロパティ値の後ろに付けると詳細度を無視してそのスタイルが最優先になります。
.override { color: red !important; }
⚠️
!importantの乱用は禁物: 一度!importantを使い始めると、上書きするためにさらに!importantが必要になる「詳細度戦争」が起きます。使うのはサードパーティのCSSを上書きせざるを得ないケースなど、本当に必要な場面に限定してください。
カスケードの順序
詳細度が同じ場合は、後から書かれたスタイルが優先されます。これがカスケード（滝のように流れる）の意味です。
p { color: blue; }
p { color: red; } /* こちらが適用される */
主なプロパティ一覧
CSSには200以上のプロパティがありますが、日常的に使うものは限られています。カテゴリ別に整理します。
テキスト・フォント系
| プロパティ | 役割 | 値の例 |
|---|---|---|
color | 文字色 | #1d4ed8, red, rgb(0,0,255) |
font-size | 文字サイズ | 16px, 1rem, 1.2em |
font-weight | 文字の太さ | normal, bold, 700 |
font-family | フォント種類 | 'Noto Sans JP', sans-serif |
line-height | 行間 | 1.6, 24px |
text-align | テキスト揃え | left, center, right |
letter-spacing | 字間 | 0.05em, 1px |
背景・ボーダー系
| プロパティ | 役割 | 値の例 |
|---|---|---|
background-color | 背景色 | #f3f4f6, transparent |
background-image | 背景画像 | url('bg.png') |
border | 枠線（一括） | 1px solid #e5e7eb |
border-radius | 角丸 | 8px, 50%（円形） |
box-shadow | ドロップシャドウ | 0 2px 8px rgba(0,0,0,0.1) |
💡 background の短縮記法:
background: #f3f4f6 url('bg.png') no-repeat center / cover;のように1行で複数のプロパティをまとめて書けます。ただし、読み取りにくくなるため個別指定を好む開発者も多いです。
単位の使い分け
CSSの数値には単位が必要です（0 だけは単位不要）。用途に応じて使い分けます。
px（ピクセル）
画面上の点数を直接指定する絶対単位です。
- ◆用途: ボーダー幅、シャドウのぼかし量、アイコンサイズなど固定が必要な箇所
- ◆注意: ユーザーがブラウザのフォントサイズを変更しても変わらない。アクセシビリティに影響することがある
border: 2px solid #e5e7eb;
border-radius: 8px;
rem
ルート要素（<html>）のフォントサイズを基準とする相対単位です。デフォルトでは 1rem = 16px。
- ◆用途: 文字サイズ、余白（margin / padding）。アクセシビリティに優しい
- ◆メリット: ユーザーがブラウザのフォントサイズを変更すると、remベースの要素も追従する
html { font-size: 16px; }
h1 { font-size: 2rem; } /* = 32px */
p { font-size: 1rem; } /* = 16px */
%（パーセント）
親要素の対応プロパティ値に対する割合を指定します。
- ◆用途: 幅・高さのレイアウト、フォントサイズの相対調整
- ◆注意:
height: 50%は親要素に高さが指定されていないと機能しない
.container { width: 90%; max-width: 1200px; }
.half { width: 50%; }
vw / vh（ビューポート単位）
ブラウザのビューポート（表示領域）の幅（vw）または高さ（vh）に対する割合です。
- ◆vw:
1vw = ビューポート幅の1% - ◆vh:
1vh = ビューポート高さの1% - ◆用途: フルスクリーンセクション、レスポンシブな文字サイズ
.hero { height: 100vh; } /* 画面の高さいっぱい */
.fluid-text { font-size: 4vw; } /* 画面幅に応じて変化 */
| 単位 | 基準 | 主な用途 | アクセシビリティ |
|---|---|---|---|
| px | 固定（画面ピクセル） | border, shadow, icon | 非追従 |
| rem | html の font-size | 文字・余白 | 追従する◎ |
| % | 親要素の同プロパティ | width, height | 状況による |
| vw/vh | ビューポート幅/高さ | フルスクリーン | 状況による |
⚠️ 文字サイズには px より rem を使う:
font-size: 16pxとすると、ユーザーがブラウザの設定でフォントサイズを大きくしても変わりません。font-size: 1remにすることでユーザー設定を尊重でき、アクセシビリティが向上します。
🏋️実践ワーク
以下のワークを実施してください。
- ◆詳細度の計算:
header nav ul li.active a:hoverのセレクタ詳細度スコアを計算してください。（ヒント: タグ・クラス・擬似クラスの数を数える） - ◆単位の比較:
font-size: 16px、font-size: 1rem、font-size: 100%の3つをHTMLに実装し、ブラウザのフォントサイズ設定を変更して挙動の違いを確認してください。 - ◆カスケードの確認: 同じ要素に複数のCSSルールを書き、詳細度と順序を変えながらどのスタイルが適用されるかをDevToolsで確認してください。
- ◆セレクタ実装:
nav > ul > li:first-child aを使ったスタイルを書き、意図した要素だけに適用されることを確認してください。
📝まとめ
CSS の基本構文はセレクタ・プロパティ・値の三要素で構成されます。セレクタはタグ・クラス・IDの順に詳細度が高くなり、詳細度が高いほど優先適用されます。同詳細度なら後書きが優先で、これがカスケードの本質です。単位はpx（絶対）・rem（ルート相対）・%（親要素相対）・vw/vh（ビューポート相対）を用途に応じて使い分けます。文字サイズにはアクセシビリティのために rem を優先し、!important の乱用は避けましょう。次のレッスンではボックスモデルを学び、余白とレイアウトの基礎を習得します。
理解度チェック
3問全問正解でこのレッスンが「完了」になり、コースの全レッスンを完了すると修了証が発行されます。解説つき・何度でも挑戦できます。
Q1.同じボタンに、先に#submit { color: red; }、後に.btn { color: blue; }が書かれています。文字色はどうなりますか。
Q2.ユーザーがブラウザで文字サイズを大きくしたとき、その設定に追従させたい。font-sizeに適した単位はどれですか。
Q3.スタイルが効かないたびに!importantを付けて解決しています。本文に沿った考え方はどれですか。
すべての問題に答えると押せます
「HTML/CSSコーディング入門」全10レッスンを無料で修了しよう
- ✓ 理解度チェックの採点と、合格レッスンの記録
- ✓ 全レッスン合格で修了証を発行（URLでシェア・LinkedInに追加できます）
- ✓ 全レッスンの解説動画と、続きから再開できる学習ダッシュボード
無料で受講をはじめる（1分）
完全無料・クレジットカード不要
関連するブログ記事
関連レッスン（他のコースから）
WordPress HP制作完全講座
ホームページの役割と企画
ホームページ（HP）を作る前に最も重要なのが「なぜ作るのか」という目的の明確化です。
30分無料公開
WordPress HP制作完全講座
サーバー・ドメインの選び方
WordPressでHPを公開するには、サーバー（サイトのデータを保存・配信する場所） と ドメイン（サイトのアドレス） の2つが必要です。
30分無料公開
WordPress HP制作完全講座
WordPressインストールと初期設定
サーバーとドメインの準備が整ったら、いよいよWordPressのインストールです。
30分無料公開
WordPress HP制作完全講座
テーマ選びとカスタマイズ
WordPressのテーマはサイトの「外観と機能の土台」です。
30分本文は無料で閲覧可
WordPress HP制作完全講座
固定ページ作成
WordPressの「固定ページ（Pages）」は、投稿（ブログ記事）とは異なる、恒久的なコンテンツを掲載するためのページタイプです。
30分本文は無料で閲覧可
WordPress HP制作完全講座
ブロックエディタ完全活用
WordPress 5.0から標準搭載されたブロックエディタ（Gutenberg）は、ドラッグ&ドロップとブロックの組み合わせでリッチなコン
30分本文は無料で閲覧可
レッスン一覧
各レッスンの理解度チェックに合格すると ✓ がつきます