目次
CSSとは？
CSS（Cascading Style Sheets）とは、Webページの見た目（デザイン）を定義するための言語です。HTMLが「構造と内容」を担当するのに対し、CSSは「色・フォント・レイアウト・余白」などのスタイル（見た目）を担当します。
HTMLが家の「骨格・間取り」なら、CSSは「内装・壁紙・色」です。
HTMLとCSSの関係
HTMLだけでも文章は表示されますが、スタイルのない白黒ページになります。CSSを加えることで初めて見栄えのするWebページが完成します。
<!-- HTML（構造） -->
<h1>こんにちは</h1>
<p>CSSを学んでいます。</p>
/* CSS（スタイル） */
h1 {
color: #0066cc;
font-size: 32px;
}
p {
color: #333;
line-height: 1.8;
}
CSSの基本構文
セレクター {
プロパティ: 値;
プロパティ: 値;
}
| 要素 | 説明 | 例 |
|---|---|---|
| セレクター | スタイルを適用する対象 | h1 p .class #id |
| プロパティ | 変更したいスタイルの種類 | color font-size margin |
| 値 | プロパティに設定する値 | red 16px auto |
CSSの書き方3種類
① 外部スタイルシート（推奨）
CSSを別ファイル（style.css）に書いて、HTMLからリンクする方法です。管理しやすく、複数ページに同じスタイルを適用できます。
<!-- HTMLのheadタグ内 -->
<link rel="stylesheet" href="style.css">
/* style.css */
body {
font-family: sans-serif;
color: #333;
}
② 内部スタイルシート
HTMLファイルの <head> 内に <style> タグで書く方法です。1ページのみに適用するスタイルに使います。
<head>
<style>
h1 { color: blue; }
</style>
</head>
③ インラインスタイル
HTML要素に直接 style 属性で書く方法です。特定の要素だけに一時的なスタイルを当てる場合に限定して使います。
<p style="color: red; font-weight: bold;">このテキストは赤い太字</p>
主要なCSSプロパティ
テキスト系
| プロパティ | 説明 | 例 |
|---|---|---|
color |
文字色 | color: #333; |
font-size |
文字サイズ | font-size: 16px; |
font-weight |
文字の太さ | font-weight: bold; |
font-family |
フォントの種類 | font-family: sans-serif; |
line-height |
行間 | line-height: 1.8; |
text-align |
テキストの整列 | text-align: center; |
text-decoration |
下線など | text-decoration: none; |
letter-spacing |
文字間隔 | letter-spacing: 0.05em; |
ボックス（余白・サイズ）系
| プロパティ | 説明 | 例 |
|---|---|---|
width |
横幅 | width: 100%; |
height |
高さ | height: 200px; |
padding |
内側の余白 | padding: 16px; |
margin |
外側の余白 | margin: 0 auto; |
border |
ボーダー（枠線） | border: 1px solid #ccc; |
border-radius |
角の丸み | border-radius: 8px; |
box-shadow |
ドロップシャドウ | box-shadow: 0 2px 8px rgba(0,0,0,.1); |
背景系
| プロパティ | 説明 | 例 |
|---|---|---|
background-color |
背景色 | background-color: #f5f5f5; |
background-image |
背景画像 | background-image: url(bg.jpg); |
background-size |
背景画像のサイズ | background-size: cover; |
ボックスモデルとは
すべてのHTML要素は「ボックス（箱）」として扱われます。ボックスモデルを理解することがレイアウト設計の基礎です。
┌─────────────────────────────┐
│ margin（外側余白） │
│ ┌───────────────────────┐ │
│ │ border（枠線） │ │
│ │ ┌─────────────────┐ │ │
│ │ │ padding（内側余白） │ │ │
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ │ （コンテンツ） │ │ │ │
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘
| 領域 | 説明 |
|---|---|
content |
テキスト・画像などの実際の内容 |
padding |
contentとborderの間の余白 |
border |
枠線 |
margin |
要素の外側の余白（他の要素との距離） |
CSSセレクターの基本
| セレクター | 意味 | 例 |
|---|---|---|
| タグセレクター | すべての指定タグ | p { } |
| クラスセレクター | class属性が一致する要素 | .btn { } |
| IDセレクター | id属性が一致する要素 | #header { } |
| 子孫セレクター | 指定要素内のすべて | nav a { } |
| 直接の子セレクター | 直接の子要素のみ | ul > li { } |
| 擬似クラス | 特定の状態の要素 | a:hover { } |
/* クラスセレクター */
.card {
background: white;
border-radius: 8px;
padding: 24px;
}
/* 擬似クラス（ホバー時） */
.btn:hover {
background-color: #004499;
cursor: pointer;
}
CSSの優先順位（詳細度）
同じ要素に複数のスタイルが当たる場合、詳細度（Specificity）の高いルールが優先されます。
| セレクター | 詳細度（強さ） |
|---|---|
| インラインスタイル | 最強 |
IDセレクター #id |
強 |
クラスセレクター .class |
中 |
タグセレクター p |
弱 |
まとめ
- CSSはWebページの見た目（色・フォント・レイアウト・余白）を定義する言語
- 基本構文は
セレクター { プロパティ: 値; } - CSSは外部スタイルシートとして管理するのが基本
- ボックスモデル（content・padding・border・margin）を理解することがレイアウトの基礎
- セレクターの詳細度（IDセレクター > クラスセレクター > タグセレクター）を把握しておく
CSSの基本を覚えたら、次はレイアウトを組むFlexboxを学んでみましょう。
