CURRICULUM / LAYER 01 / CHAPTER 03

CSSを読む

HTMLが「これは何か」を示すラベルだとしたら、CSSは「それをどう見せるか」を指示する装飾のレシピです。

この役割分担を腹落ちさせると、コードを読む眼が一段深くなります。

なぜ「意味」と「見た目」を分けるのか

前の章で、「HTMLのタグは意味のラベルである」と話しました。

では、見た目はどこで決まっているのでしょうか。

答えは、HTMLとは別のファイルに書かれているCSSです。

たとえば、同じ<h1>というラベルでも、あるサイトでは黒い大きな明朝体で、別のサイトでは赤いゴシック体で表示されます。

HTMLには「これは見出しです」としか書いていないのに、見え方が違う。

なぜなら、それぞれのサイトでCSSが「<h1>はこう見せる」というルールを別々に書いているからです。

— Key Concept

HTMLとCSSの関係は、「中身」と「服」の関係です。

中身(意味)は変えずに、服(見た目)だけを着せ替えられる。

だからこそ、同じHTMLにスマホ用とPC用で違うCSSを当てたり、季節ごとにテーマを変えたりできるのです。

CSSの基本構造 ─ セレクタとプロパティ

CSSは、たった一つの基本パターンの繰り返しでできています。

それがこれです。

/* 「どこを」「どうする」のセットを並べていく */
h1 {
  color: red;
  font-size: 32px;
}

このコードは、こう読みます。

「<h1>という要素は(セレクタ)、文字色を赤にして、フォントサイズを32ピクセルにする(プロパティ)」と。

たったこれだけのパターンが、世界中のあらゆるウェブサイトの見た目を作っています。

用語を整理しましょう。

セレクタ(selector) ── 「どこを」装飾するかを指定する部分。上の例では h1
宣言ブロック ── { } で囲まれた中身全体
プロパティ(property) ── 「何を」変えるか。color や font-size など
値(value) ── 「どう」変えるか。red や 32px など

プロパティと値のセットを宣言(declaration)と呼び、行末は必ず ;(セミコロン)で締めます。

これを忘れると次の宣言が認識されないので、CSS入門者の最初のつまずきポイントです。

セレクタ ─ 「どこを」指定する3つの基本

CSSの面白さは、セレクタの書き方にあります。

HTMLのどこに装飾を当てるかを、いろいろな切り口で指定できるのです。

まずは絶対に覚えておきたい3種類だけ紹介します。

1. 要素セレクタ ─ タグ名で指定する

一番シンプルな書き方です。

タグ名をそのまま書くと、そのタグ全体に装飾が当たります。

/* ページ内のすべての <p> に当たる */
p {
  line-height: 1.8;
  color: #333;
}

シンプルですが、強力です。

「ページ内のすべての段落の行間を広めにしたい」というような全体ルールを一発で書けます。

2. クラスセレクタ ─ 名前を付けて指定する

現実のサイトでは、「同じ<p>でも、ここの段落だけは赤くしたい」といった細かい指定をしたくなります。

そのために使うのがクラスです。

HTMLの方でタグに class="名前" という属性を付けておき、CSSではその名前を .(ドット)から始めて指定します。

<!-- HTML側: クラス名を付ける -->
<p>普通の段落です。</p>
<p class="warning">これは警告の段落です。</p>

/* CSS側: ドットから始めてクラス名を書く */
.warning {
  color: #c8451f;
  font-weight: bold;
}

こう書くと、class="warning" が付いた要素だけが赤く太字になります。

普通の<p>には何の影響もありません。

クラスは、CSSの世界で最もよく使われるセレクタです。

3. IDセレクタ ─ 一つだけを指定する

クラスとよく似ていますが、IDはページ内に一つだけ使うものです。

HTMLでは id="名前"、CSSでは #(ハッシュ)から始めます。

/* id="header" が付いた要素だけに当たる */
#header {
  background: #1a1814;
  color: white;
}

実務ではIDよりクラスを使うことのほうが圧倒的に多いです。

理由は、後から「やっぱりここも同じ装飾にしたい」となったとき、クラスなら複数の要素に付け回せるけれど、IDは1ページに1つしか使えないからです。

— Note

セレクタには他にも「子要素」「属性」「擬似クラス」など、たくさんの種類があります。

でも全部覚える必要はありません。

実務の8割は、上の3つ(要素・クラス・ID)と、せいぜい :hover(マウスが乗ったとき)くらいで回ります。

最初は欲張らないこと。

よく使うプロパティ ─ 「何を」変えるか

プロパティも数百種類ありますが、入門段階で押さえるべきは10個もありません。

次のものをラベルとして読めれば、世の中のCSSの大半は読めるようになります。

/* 文字まわり */
color:        /* 文字色 */
font-size:    /* 文字サイズ */
font-weight:  /* 太さ(normal / bold / 数値) */
line-height:  /* 行間 */
text-align:   /* 文字の横位置(left / center / right) */

/* 背景と境界 */
background:   /* 背景色や背景画像 */
border:       /* 境界線(太さ・種類・色) */

/* 余白とサイズ */
margin:       /* 要素の外側の余白 */
padding:      /* 要素の内側の余白 */
width:        /* 横幅 */
height:       /* 縦幅 */

特に大事なのが、margin(マージン)と padding(パディング)の違いです。

どちらも「余白」を指定するプロパティですが、向きが逆です。

margin は外側の余白 ── その要素と、隣の要素との「距離」
padding は内側の余白 ── その要素の「枠」と「中身」との「距離」

最初は混乱しますが、「外」と「内」のどちらの余白を空けたいのかを、毎回自問するクセをつけると間違えなくなります。

CSSはどこに書くのか

書き方が分かったところで、もう一つ知っておきたいのが「どこに書くか」です。

CSSをHTMLに適用する方法は、大きく3つあります。

<!-- ① 外部ファイル(おすすめ・実務の標準) -->
<link rel="stylesheet" href="style.css">

<!-- ② <head> 内に直接書く(ページ専用のスタイル) -->
<style>
  h1 { color: red; }
</style>

<!-- ③ タグに直接書く(基本は避ける) -->
<p style="color: red;">赤い段落</p>

実務では、ほぼ常に①の外部ファイル方式を選びます。

HTMLとCSSをファイル単位で完全に分離できるので、見た目を変えたいときにCSSファイルだけを編集すれば済むからです。

③のインラインスタイル(タグに直接書く方法)は、AIが書いてきたコードでよく見かけますが、基本的には避けるべきパターンです。

なぜなら、見た目の指定がHTMLの中にバラバラに散らばってしまい、後から修正するのが地獄になるから。

前章で出てきた「<div style="font-size:32px">」のような書き方を見たら、警戒信号です。

解読演習

では、CSSを「どこを」「何を」「どう」の3点セットで読む練習をしましょう。

今回も3問です。

— EXERCISE 01-03-A

このCSSは、何を、どう変えるか

次のCSSを読んで、それぞれのルールが「どこに」「何を」「どう」適用されるか、自分の言葉で説明してみてください。

body {
  background: #f4efe6;
  color: #1a1814;
  line-height: 1.8;
}

h1 {
  font-size: 36px;
  border-bottom: 2px solid #c8451f;
  padding-bottom: 8px;
}

.note {
  background: #ebe4d4;
  padding: 16px;
  border-left: 3px solid #c8451f;
}

解答例を見る

1つ目のルールは、body(=ページ全体)に対する指定です。

背景色を薄いベージュ(#f4efe6)に、文字色をほぼ黒(#1a1814)に、行間を文字サイズの1.8倍にしています。

ページ全体の地の色と読みやすさを決めている、土台のルールです。

2つ目は、すべての<h1>見出しへの指定。

文字サイズを36ピクセルに、下に2ピクセルの朱色(#c8451f)の線を引き、線と文字の間に8ピクセルの余白(padding-bottom)を入れています。

「下線付きの大見出し」を作っているわけです。

3つ目は、class="note" が付いた要素への指定。

背景をやや濃いベージュにして、内側に16ピクセルの余白、左側に3ピクセルの朱色の縦線を引いています。

「注意書きボックス」のような見た目になります。

クラスセレクタなので、HTMLで <div class="note">...</div> や <p class="note">...</p> と書いた要素にだけ適用されます。

— EXERCISE 01-03-B

margin と padding、どっちが正しい?

ある人が、ボタンのまわりに余白を入れたいと考えました。

「ボタンの中の文字と、ボタンの枠の間に余裕を持たせたい」のです。

この場合、使うべきは margin と padding のどちらでしょうか? また、その理由を説明してください。

解答例を見る

答えは padding です。

理由はこうです。

「ボタンの中の文字と、ボタンの枠の間に余裕を持たせたい」というのは、ボタンという要素の内側の余白の話です。

marginは「その要素と、隣の要素との距離」を空けるもので、ボタンと外の世界との関係を調整するときに使います。

一方paddingは「要素の枠と、中身との距離」を空けるもので、まさに今回やりたいことに対応します。

ちなみに、「ボタンと、その下にある別のボタンとの間に隙間を空けたい」という場合は、今度は逆に margin を使います。

要素同士の距離を空けたいときはmargin、要素の中の中身との距離を空けたいときはpadding、と覚えておくと便利です。

— EXERCISE 01-03-C

このAIが書いたCSS、どこが微妙?

AIに「赤い警告メッセージのスタイルを書いて」と頼んだら、次のようなコードが返ってきました。

動作はします。

でも、もう少し良い書き方ができそうです。

どこが微妙か、自分の言葉で指摘してみてください。

<p style="color: red; font-weight: bold; background: #ffe; padding: 10px; border: 1px solid red;">
  この操作は取り消せません。
</p>

解答例を見る

指摘ポイントはいくつかあります。

(1) インラインスタイルになっている ── 見た目の指定がHTMLタグの中に直接書かれています。

同じ警告メッセージを別の場所でも使いたくなったとき、コピペするしかなくなります。

CSSの「同じスタイルを複数箇所で使い回せる」という強みを完全に殺してしまっています。

(2) クラスを使っていない ── 本来なら <p class="warning"> のようにクラス名を付けて、CSSの方で .warning { ... } と一回だけ書けば済む話です。

そうすれば、後から「警告の色を朱色に変えたい」となったとき、CSSファイルを1箇所修正するだけで全ての警告に反映されます。

(3) 警告の意味がHTMLから読み取れない ── このコードは「赤くて太字の段落」という見た目の情報しか持っていません。

本当はHTMLとして「これは警告メッセージである」という意味を持たせたいところ。

クラス名 warning を付けるだけでも、人間には意図が伝わるようになります。

総じて、HTMLとCSSの役割分担(意味と見た目の分離)を放棄したコードです。

動くことは動きますが、保守性も再利用性も最悪。

AIに書かせたコードを受け取ったら、まず「インラインスタイルを外部CSSに移せないか」を考えるクセをつけましょう。

この章のまとめ

HTMLが「意味」を、CSSが「見た目」を担当する。中身と服の関係
CSSの基本構造は セレクタ { プロパティ: 値; } の繰り返し
セレクタの基本3種類: 要素(タグ名)・クラス(.名前)・ID(#名前)
覚えるプロパティは10個ほどで実務の大半が回る
margin は外側の余白、padding は内側の余白
CSSは 外部ファイル に書くのが標準。インラインスタイルは基本避ける

次の章では、JavaScriptに入っていきます。

HTMLが「意味」、CSSが「見た目」だとすれば、JavaScriptは「動き」の担当。

クリックされたら何かが起きる、入力されたら何かが変わる。

そういう動的な振る舞いをコードで読めるようになることを目指します。