CSSの基礎

この章で得られるスキル：

✅ CSSの役割を説明できる
✅ CSSの適用方法（インライン、内部スタイル、外部スタイル）を理解している
✅ 要素セレクタを使える
✅ 色（color, background-color）を指定できる
✅ フォント（font-size, font-family, font-weight）を指定できる
✅ ボックスモデル（margin, padding, border）を理解している
✅ displayプロパティ（block, inline, inline-block）を理解している

Step 0: まず体験してみよう

説明の前に、まず CSSがないと何が困るのか を体験しよう。

シナリオ：ブログ記事をデザインする

以下は、HTMLだけで作ったブログ記事である：

このHTMLをブラウザで開くと、以下のような問題がある：

デザインが味気ない
- すべて黒い文字で、背景は白
- フォントもブラウザのデフォルト
読みにくい
- 行間が詰まっている
- 余白がない
個性がない
- 自分らしさが全くない

では、これに CSS を適用すると、どうなるだろうか？

やってみよう

CSSを適用する前と後で、見た目がどう変わるかを比較しよう
なぜCSSが必要なのか考えてみよう（HTMLは構造、CSSは見た目を分離するため）
background-colorの値を変更して、ページ全体の雰囲気が変わることを確認しよう
CSSを削除して、装飾がなくなることを体験してみよう

CSSを使うことで、同じ構造のHTMLでも、まったく異なる 見た目 を実現できる。

Step 1: CSSとは何か

CSS（シーエスエス） とは、 Cascading Style Sheets の略で、Webページの 見た目 を制御するための言語である。

CSSの役割

CSSは「見た目のデザイン」を制御するための技術である。

色（テキストの色、背景色）
フォント（大きさ、太さ、種類）
レイアウト（配置、余白、サイズ）
アニメーション（動き、変化）

HTMLは構造、CSSは見た目 を分離することで、デザインの変更が容易になる。

CSSの基本的な仕組み

CSSでは、 セレクタ で対象を指定し、 プロパティ で見た目を指定する。

例：段落の文字色を赤にする

p {
  color: red;
}

p：セレクタ（<p>タグを対象にする）
color：プロパティ（文字色を指定）
red：値（赤色）

やってみよう

color: red;をcolor: blue;に変更して、文字色が変わることを確認しよう
h1 { color: green; }を追加して、見出しの色を変えてみよう
なぜpと指定するだけで、すべての段落に適用されるのか考えてみよう（セレクタが対象を指定しているため）
セレクタ、プロパティ、値の3つの要素が、CSSの基本構造であることを理解しよう

Step 2: CSSの適用方法

CSSをHTMLに適用する方法は3つある：

1. インラインスタイル

HTML要素に直接style属性で指定する方法：

<p style="color: red;">この文字は赤色です。</p>

特徴：

✅ 簡単に適用できる
❌ 再利用できない
❌ HTMLとCSSが混ざって読みにくくなる

重要

インラインスタイルは 非推奨 である。特別な理由がない限り、使わないこと。

2. 内部スタイルシート

<head>の中に<style>タグで記述する方法：

<!DOCTYPE html>
<html>
  <head>
    <title>私のページ</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>この文字は赤色です。</p>
  </body>
</html>

特徴：

✅ そのページ内で再利用できる
❌ 他のページでは使えない

3. 外部スタイルシート

別ファイル（.css）に記述し、<link>タグで読み込む方法：

style.css:

p {
  color: red;
}

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>私のページ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>この文字は赤色です。</p>
  </body>
</html>

特徴：

✅ 複数のページで再利用できる
✅ HTMLとCSSが分離されて読みやすい
✅ 最も推奨される方法

やってみよう

CSSのプロパティを変更して、スタイルが即座に反映されることを確認しよう
なぜ外部スタイルシートが推奨されるのか考えてみよう（複数ページで再利用でき、保守性が高いため）
インラインスタイルを使うと、HTMLとCSSが混在して読みにくくなることを理解しよう
実際のWebサイトでは、ほとんどが外部スタイルシートを使っていることを認識しよう

Step 3: 基本的なセレクタ（要素セレクタ）

要素セレクタ は、HTMLのタグ名を指定してスタイルを適用する。

例：すべての段落を青色にする

p {
  color: blue;
}

例：すべての見出し（h1）を緑色にする

h1 {
  color: green;
}

複数のプロパティを指定

p {
  color: blue;
  font-size: 16px;
  line-height: 1.5;
}

font-size：フォントサイズ（16ピクセル）
line-height：行間（1.5倍）

やってみよう

h1のフォントサイズを変更して、見出しの大きさが変わることを確認しよう
pにfont-weight: bold;を追加して、段落が太字になることを確認しよう
なぜ要素セレクタを使うと、すべての同じ要素に適用されるのか考えてみよう（タグ名で対象を選択しているため）
複数のプロパティを組み合わせることで、きめ細かいデザインができることを理解しよう

Step 4: 色の指定

文字色：`color`

p {
  color: red;
}

背景色：`background-color`

body {
  background-color: lightblue;
}

色の指定方法

方法	例	説明
色名	`red`, `blue`, `green`	140種類ほどの色名がある
16進数	`#FF0000`（赤）	`#RRGGBB`形式
RGB	`rgb(255, 0, 0)`（赤）	Red, Green, Blueの値（0〜255）
RGBA	`rgba(255, 0, 0, 0.5)`（半透明の赤）	RGBに透明度（0〜1）を追加

例：色の使い分け

h1 {
  color: #333;  /* ダークグレー */
  background-color: #f0f0f0;  /* ライトグレー */
}

p {
  color: rgb(0, 0, 0);  /* 黒 */
  background-color: rgba(255, 255, 0, 0.3);  /* 半透明の黄色 */
}

やってみよう

16進数の値を変更して、色が変わることを確認しよう（例：#FF0000→#00FF00）
RGBAの透明度（最後の数値）を変更して、背景が透けることを確認しよう
なぜ色の指定方法が複数あるのか考えてみよう（色名は簡単、16進数は正確、RGBAは透明度を指定できる）
実務では16進数が最もよく使われることを知ろう

Step 5: フォントの指定

フォントサイズ：`font-size`

p {
  font-size: 16px;
}

h1 {
  font-size: 32px;
}

ポイント

フォントサイズの単位：

px（ピクセル）：固定サイズ
em：親要素のフォントサイズに対する倍率（例：1.5emは親の1.5倍）
rem：ルート要素（<html>）のフォントサイズに対する倍率
%：親要素に対する割合

フォントの太さ：`font-weight`

p {
  font-weight: normal;  /* 通常 */
}

h1 {
  font-weight: bold;  /* 太字 */
}

.title {
  font-weight: 700;  /* 数値（100〜900） */
}

フォントの種類：`font-family`

body {
  font-family: "Arial", "Helvetica", sans-serif;
}

カンマ区切りで複数指定（左から優先的に使用）
最後にフォールバック（sans-serif, serif, monospace）を指定

やってみよう

font-sizeの値を変更して、文字の大きさが変わることを確認しよう
font-weightをnormalとboldで切り替えて、太さが変わることを確認しよう
なぜfont-familyに複数のフォントを指定するのか考えてみよう（最初のフォントがない場合に、次のフォントを使うため）
font-familyの最後にsans-serifやserifなどの汎用フォントを指定することが重要であることを理解しよう

Step 6: ボックスモデル

すべてのHTML要素は ボックス として扱われる。ボックスは、以下の4つの領域で構成される：

+----------------------------------+
|          margin（外側の余白）      |
|  +----------------------------+  |
|  |    border（境界線）          |  |
|  |  +----------------------+  |  |
|  |  |  padding（内側の余白） |  |  |
|  |  |  +--------------+  |  |  |  |
|  |  |  |   content    |  |  |  |  |
|  |  |  |  （内容）     |  |  |  |  |
|  |  |  +--------------+  |  |  |  |
|  |  +----------------------+  |  |
|  +----------------------------+  |
+----------------------------------+

margin（外側の余白）

要素の外側の余白：

p {
  margin: 20px;  /* 上下左右すべて20px */
}

h1 {
  margin-top: 10px;     /* 上のみ */
  margin-right: 20px;   /* 右のみ */
  margin-bottom: 10px;  /* 下のみ */
  margin-left: 20px;    /* 左のみ */
}

/* ショートハンド */
div {
  margin: 10px 20px 10px 20px;  /* 上 右 下 左 */
}

padding（内側の余白）

要素の内側の余白：

p {
  padding: 15px;  /* 上下左右すべて15px */
}

div {
  padding: 10px 20px;  /* 上下10px、左右20px */
}

border（境界線）

要素の 境界線：

p {
  border: 1px solid black;  /* 太さ スタイル 色 */
}

div {
  border-top: 2px dashed red;     /* 上のみ */
  border-right: 1px solid blue;   /* 右のみ */
}

ボックスモデルの理解

ボックスモデルを理解することは、CSSレイアウトの基本である。

要素のサイズは、width + padding + border + marginで決まる。

実務では、開発者ツールを使って、各要素のボックスモデルを視覚的に確認できる。

やってみよう

marginを変更して、要素の外側の余白が変わることを確認しよう
paddingを変更して、要素の内側の余白（背景色の範囲）が変わることを確認しよう
なぜmarginとpaddingが必要なのか考えてみよう（marginは要素間の間隔、paddingは内容と境界の間隔を調整するため）
borderの太さを変更して、境界線の太さが変わることを確認しよう
ブラウザの開発者ツール（F12）を開いて、ボックスモデルを視覚的に確認してみよう

Step 7: displayプロパティ

displayプロパティは、要素の 表示タイプ を指定する。

block（ブロック要素）

常に新しい行から始まる
幅は親要素いっぱいに広がる
高さと幅を指定できる

デフォルトでblock要素のタグ： <div>, <p>, <h1>〜<h6>, <header>, <footer>, <section>など

div {
  display: block;
  width: 300px;
  height: 100px;
}

inline（インライン要素）

同じ行に並ぶ
必要な幅だけを取る
高さと幅を指定できない

デフォルトでinline要素のタグ： <span>, <a>, <strong>, <em>など

span {
  display: inline;
}

inline-block

同じ行に並ぶ（inlineの特徴）
高さと幅を指定できる（blockの特徴）

div {
  display: inline-block;
  width: 100px;
  height: 100px;
}

ポイント

displayプロパティを使うことで、要素の表示タイプを変更できる。

例：<span>（デフォルトはinline）をdisplay: block;にすることで、ブロック要素として扱える。

やってみよう

display: block;をdisplay: inline;に変更して、要素が横に並ぶことを確認しよう
display: inline-block;のwidthとheightを変更して、サイズを指定できることを確認しよう
なぜinline要素にはwidthとheightを指定できないのか考えてみよう（インライン要素は内容に応じてサイズが決まるため）
display: inline-block;が、inlineとblockの良いところを組み合わせていることを理解しよう
実務では、ナビゲーションメニューなどでdisplay: inline-block;がよく使われることを知ろう

演習

この章で学んだ内容を確認するため、以下の演習問題に取り組んでください。

演習問題は、docs/src/questions/frontend/css_basics/フォルダにあります：

k1.mdx: CSSの役割を説明できる
k2.mdx: CSSの適用方法を理解している
w1.mdx: 要素セレクタを使える
w2.mdx: 色を指定できる
w3.mdx: フォントを指定できる
k3.mdx: ボックスモデルを理解している
w4.mdx: displayプロパティを使える

まとめ

この章では、 CSSの基礎 について学んだ。

🎯 達成できたこと

✅ CSSの役割（見た目を制御する）を理解した
✅ CSSの適用方法（外部スタイルシートが推奨）を理解した
✅ 要素セレクタでスタイルを適用できるようになった
✅ 色とフォントを指定できるようになった
✅ ボックスモデル（margin, padding, border）を理解した
✅ displayプロパティ（block, inline, inline-block）を理解した

📚 学んだ内容

CSSは 見た目 を制御するための言語
外部スタイルシート が最も推奨される適用方法
色は 色名、16進数、RGB、RGBA で指定できる
ボックスモデルは content、padding、border、margin で構成される
displayプロパティで要素の表示タイプを変更できる

🚀 次のステップ

次の章では、 CSSレイアウトとセレクタ について学ぶ。より高度なセレクタ（クラス、ID）やFlexboxを使ったレイアウトを習得する。

💡 よくある質問

Q1: marginとpaddingの違いは？

margin：要素の外側の余白（他の要素との間隔）
padding：要素の内側の余白（コンテンツと境界線の間隔）

例：

marginを増やすと、他の要素から離れる
paddingを増やすと、背景色や境界線の範囲が広がる

Q2: インラインスタイルは絶対使ってはいけないのか？

A: 絶対ではないが、 ほとんどの場合は使わない方が良い。

インラインスタイルを使って良い場面：

JavaScriptで動的にスタイルを変更する場合
メールのHTMLテンプレート（外部CSSが使えない場合）

基本的には 外部スタイルシート を使うべきである。

Q3: CSSファイルはどこに置くべきか？

A: プロジェクトの規模によるが、一般的には以下のような構成が推奨される：

project/
├── index.html
├── css/
│   ├── style.css
│   └── reset.css
└── images/
    └── logo.png

HTMLファイルからの相対パスで読み込む：

<link rel="stylesheet" href="css/style.css">

Q4: ボックスモデルのサイズ計算が面倒なのだが？

A: box-sizing: border-box;を使うと、widthにpaddingとborderが含まれるようになる：

* {
  box-sizing: border-box;
}

div {
  width: 300px;     /* この幅にpaddingとborderが含まれる */
  padding: 20px;
  border: 5px solid black;
  /* 実際のコンテンツ幅は 300 - 20*2 - 5*2 = 250px */
}

多くのプロジェクトで、すべての要素にbox-sizing: border-box;を適用している。

Q5: 色の16進数（#RRGGBB）がわからない

A: 16進数は、0〜9とA〜Fの組み合わせで色を表現する：

#000000：黒（R=0, G=0, B=0）
#FFFFFF：白（R=255, G=255, B=255）
#FF0000：赤（R=255, G=0, B=0）
#00FF00：緑（R=0, G=255, B=0）
#0000FF：青（R=0, G=0, B=255）

カラーピッカーツールを使えば、視覚的に色を選べる。

Q6: displayプロパティは他にどんな値があるのか？

A: 主な値：

block：ブロック要素
inline：インライン要素
inline-block：インラインブロック
none：非表示
flex：Flexboxレイアウト（次章で学習）
grid：Gridレイアウト

display: none;は、要素を完全に非表示にする（スペースも取らない）。

Q7: CSSのコメントはどう書くのか？

A: /*と*/で囲む：

/* これはコメントです */
p {
  color: red;  /* 文字色を赤にする */
}

/*
複数行の
コメントも書けます
*/

HTMLのコメント（）とは異なるので注意。

Step 0: まず体験してみよう​

シナリオ：ブログ記事をデザインする​

Step 1: CSSとは何か​

CSSの基本的な仕組み​

Step 2: CSSの適用方法​

1. インラインスタイル​

2. 内部スタイルシート​

3. 外部スタイルシート​

Step 3: 基本的なセレクタ（要素セレクタ）​

例：すべての段落を青色にする​

例：すべての見出し（h1）を緑色にする​

複数のプロパティを指定​

Step 4: 色の指定​

文字色：color​

背景色：background-color​

色の指定方法​

例：色の使い分け​

Step 5: フォントの指定​

フォントサイズ：font-size​

フォントの太さ：font-weight​

フォントの種類：font-family​

Step 6: ボックスモデル​

margin（外側の余白）​

padding（内側の余白）​

border（境界線）​

Step 7: displayプロパティ​

block（ブロック要素）​

inline（インライン要素）​

inline-block​

演習​

まとめ​

🎯 達成できたこと​

📚 学んだ内容​

🚀 次のステップ​

💡 よくある質問​

Q1: marginとpaddingの違いは？​

Q2: インラインスタイルは絶対使ってはいけないのか？​

Q3: CSSファイルはどこに置くべきか？​

Q4: ボックスモデルのサイズ計算が面倒なのだが？​

Q5: 色の16進数（#RRGGBB）がわからない​

Q6: displayプロパティは他にどんな値があるのか？​

Q7: CSSのコメントはどう書くのか？​

Step 0: まず体験してみよう

シナリオ：ブログ記事をデザインする

Step 1: CSSとは何か

CSSの基本的な仕組み

Step 2: CSSの適用方法

1. インラインスタイル

2. 内部スタイルシート

3. 外部スタイルシート

Step 3: 基本的なセレクタ（要素セレクタ）

例：すべての段落を青色にする

例：すべての見出し（h1）を緑色にする

複数のプロパティを指定

Step 4: 色の指定

文字色：`color`

背景色：`background-color`

色の指定方法

例：色の使い分け

Step 5: フォントの指定

フォントサイズ：`font-size`

フォントの太さ：`font-weight`

フォントの種類：`font-family`

Step 6: ボックスモデル

margin（外側の余白）

padding（内側の余白）

border（境界線）

Step 7: displayプロパティ

block（ブロック要素）

inline（インライン要素）

inline-block

演習

まとめ

🎯 達成できたこと

📚 学んだ内容

🚀 次のステップ

💡 よくある質問

Q1: marginとpaddingの違いは？

Q2: インラインスタイルは絶対使ってはいけないのか？

Q3: CSSファイルはどこに置くべきか？

Q4: ボックスモデルのサイズ計算が面倒なのだが？

Q5: 色の16進数（#RRGGBB）がわからない

Q6: displayプロパティは他にどんな値があるのか？

Q7: CSSのコメントはどう書くのか？