Day 1: CSSの世界へようこそ
今日学ぶこと
- CSSとは何か、HTMLとの関係
- CSSの3つの記述方法
- 基本構文（セレクタ、プロパティ、値）
- 色の指定方法
- 基本的なセレクタ
CSSとは何か
CSS（Cascading Style Sheets）は、Webページの見た目を定義する言語です。HTMLが「構造」を担当するのに対し、CSSは「デザイン」を担当します。
flowchart LR
subgraph Web["Webページの構成"]
HTML["📄 HTML<br>構造・内容"]
CSS["🎨 CSS<br>見た目・デザイン"]
JS["⚡ JavaScript<br>動き・機能"]
end
HTML --> CSS --> JS
style HTML fill:#3b82f6,color:#fff
style CSS fill:#8b5cf6,color:#fff
style JS fill:#f59e0b,color:#fff
同じHTMLでも、CSSを変えるだけでまったく異なるデザインにできます。これがCSSの力です。
CSSの3つの記述方法
1. 外部スタイルシート（推奨）
別ファイルにCSSを書き、HTMLからリンクします。
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
h1 {
color: #3b82f6;
}
2. 内部スタイルシート
HTMLの<style>タグ内に書きます。
<head>
<style>
h1 {
color: #3b82f6;
}
</style>
</head>
3. インラインスタイル
HTML要素に直接書きます。
<h1 style="color: #3b82f6;">タイトル</h1>
| 方法 | メリット | デメリット |
|---|---|---|
| 外部スタイルシート | 再利用可能、キャッシュされる | ファイルが増える |
| 内部スタイルシート | 1ファイルで完結 | ページ間で共有不可 |
| インラインスタイル | 即座に適用 | 管理が困難、非推奨 |
ベストプラクティス: 常に外部スタイルシートを使いましょう。コードの再利用性と保守性が格段に向上します。
CSSの基本構文
セレクタ {
プロパティ: 値;
プロパティ: 値;
}
h1 {
color: #3b82f6;
font-size: 32px;
text-align: center;
}
flowchart LR
subgraph Rule["CSSルール"]
Selector["h1<br>セレクタ"]
Property["color<br>プロパティ"]
Value["#3b82f6<br>値"]
end
Selector --> Property --> Value
style Selector fill:#3b82f6,color:#fff
style Property fill:#22c55e,color:#fff
style Value fill:#f59e0b,color:#fff
| 用語 | 説明 | 例 |
|---|---|---|
| セレクタ | スタイルを適用する対象 | h1, .class, #id |
| プロパティ | 変更する見た目の種類 | color, font-size |
| 値 | プロパティに設定する値 | red, 16px, center |
| 宣言 | プロパティと値のペア | color: red; |
| ルール | セレクタ + 宣言ブロック | h1 { color: red; } |
基本的なセレクタ
要素セレクタ
HTML要素名で選択します。
p {
color: #333;
}
h1 {
font-size: 2rem;
}
クラスセレクタ
.（ドット）でクラス名を指定します。最もよく使うセレクタです。
<p class="highlight">重要なテキスト</p>
<p class="highlight">もう一つの重要なテキスト</p>
.highlight {
background-color: #fef3c7;
padding: 8px;
}
IDセレクタ
#でID名を指定します。ページ内で1つだけの要素に使います。
<header id="main-header">
<h1>サイトタイトル</h1>
</header>
#main-header {
background-color: #1e293b;
color: white;
}
ユニバーサルセレクタ
*ですべての要素を選択します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
flowchart TB
subgraph Selectors["基本セレクタ"]
Elem["要素セレクタ<br>p { ... }"]
Class["クラスセレクタ<br>.name { ... }"]
ID["IDセレクタ<br>#name { ... }"]
Uni["ユニバーサル<br>* { ... }"]
end
style Elem fill:#3b82f6,color:#fff
style Class fill:#22c55e,color:#fff
style ID fill:#f59e0b,color:#fff
style Uni fill:#8b5cf6,color:#fff
推奨: 日常的なスタイリングにはクラスセレクタを使いましょう。IDセレクタは詳細度が高すぎるため、上書きが難しくなります。
色の指定方法
CSSでは色をさまざまな方法で指定できます。
/* キーワード */
color: red;
color: blue;
/* 16進数（Hex） */
color: #ff0000;
color: #3b82f6;
color: #333; /* #333333 の省略形 */
/* RGB */
color: rgb(59, 130, 246);
/* RGBA（透明度付き） */
color: rgba(59, 130, 246, 0.5);
/* HSL */
color: hsl(217, 91%, 60%);
/* HSLA */
color: hsla(217, 91%, 60%, 0.5);
| 方法 | 例 | 特徴 |
|---|---|---|
| キーワード | red, blue |
直感的だが色が限定的 |
| Hex | #3b82f6 |
最も一般的 |
| RGB | rgb(59, 130, 246) |
直感的な数値指定 |
| HSL | hsl(217, 91%, 60%) |
色相・彩度・明度で指定 |
Tips:
rgba()やhsla()の代わりに、最新のCSSではrgb(59 130 246 / 0.5)のようにスラッシュ記法も使えます。
よく使うCSSプロパティ
テキスト関連
p {
color: #333; /* 文字色 */
font-size: 16px; /* 文字サイズ */
font-weight: bold; /* 太さ */
text-align: center; /* 配置 */
line-height: 1.6; /* 行間 */
text-decoration: none; /* 装飾（下線など） */
}
背景関連
.box {
background-color: #f1f5f9; /* 背景色 */
border: 1px solid #e2e8f0; /* 枠線 */
border-radius: 8px; /* 角丸 */
padding: 16px; /* 内側の余白 */
margin: 16px 0; /* 外側の余白 */
}
CSSコメント
/* これはコメントです */
/*
複数行の
コメントも書けます
*/
h1 {
color: #3b82f6; /* メインカラー */
}
実践: 最初のスタイリング
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSデビュー</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="main-header">
<h1>My Website</h1>
<p>CSSで美しくデザイン</p>
</header>
<main>
<section>
<h2>CSSとは</h2>
<p>CSSは<span class="highlight">Webページの見た目</span>を定義する言語です。</p>
<p class="note">HTMLと組み合わせて使います。</p>
</section>
<section>
<h2>今日学んだこと</h2>
<ul>
<li>CSSの基本構文</li>
<li>セレクタの種類</li>
<li>色の指定方法</li>
</ul>
</section>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
</html>
styles.css
/* リセットと基本設定 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.6;
color: #333;
}
/* ヘッダー */
#main-header {
background-color: #1e293b;
color: white;
text-align: center;
padding: 32px;
}
#main-header h1 {
font-size: 2rem;
}
#main-header p {
color: #94a3b8;
}
/* メインコンテンツ */
main {
max-width: 800px;
margin: 0 auto;
padding: 32px 16px;
}
section {
margin-bottom: 32px;
}
h2 {
color: #3b82f6;
margin-bottom: 16px;
}
.highlight {
background-color: #fef3c7;
padding: 2px 6px;
border-radius: 4px;
}
.note {
color: #64748b;
font-style: italic;
}
ul {
padding-left: 24px;
}
li {
margin-bottom: 8px;
}
/* フッター */
footer {
background-color: #f1f5f9;
text-align: center;
padding: 16px;
color: #64748b;
}
まとめ
| 概念 | 説明 |
|---|---|
| CSS | Webページの見た目を定義する言語 |
| 外部スタイルシート | <link>で読み込む推奨の方法 |
| セレクタ | スタイル適用対象の指定方法 |
| プロパティ: 値 | 変更する見た目とその設定値 |
| クラスセレクタ | .nameで最もよく使うセレクタ |
| 色指定 | hex, rgb, hsl など複数の方法 |
重要ポイント
- CSSは外部スタイルシートで書くのがベスト
- 日常のスタイリングにはクラスセレクタを使う
- 色はプロジェクト内で統一して使う
box-sizing: border-boxは必ず設定する
練習問題
問題1: 基本
HTMLファイルを作成し、外部CSSで見出しの色、本文のフォントサイズ、背景色を変更してください。
問題2: 応用
3つの異なるクラス（.success, .warning, .error）を作り、それぞれ緑、黄、赤の背景色を持つメッセージボックスを表示してください。
チャレンジ問題
Day 1のHTMLで作った自己紹介ページに外部CSSを適用し、見た目を美しく整えてください。
参考リンク
次回予告: Day 2では「セレクタとカスケード」について学びます。CSSの名前の由来である「カスケード」の仕組みを理解しましょう。