結論: CSSは「見た目の指示書」。head の style タグに書く

POINTHTML＝文章に意味の札を付ける。CSS＝その札を「どう見せるか」の指示書。役割が違うので、両方そろって初めてページらしくなる。

HTMLとCSSは、よくセットで語られますが役割が違います。HTMLは「ここは見出し」「ここは段落」という意味を決め、CSSは「見出しはトマト色で真ん中に」「段落の文字は20ピクセルで」という見た目を決めます。

書く場所は HTML の head の中です。<style> タグを作って、その中に指示を並べます。ブラウザはページを読むときにこの指示書を見て、見た目を整えてから画面に出します。

今日のコード（コピーして使えます）

動画の最後にできあがったコードです。右上の「コードをコピー」ボタンを押すと全文が入ります。head の中の <style> 〜 </style> が今回足した部分です。猫の画像は第2回の記事からダウンロードできます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
  <style>
    h1 { color: tomato; }
    p { font-size: 20px; }
    body { background: lightyellow; }
    h1 { text-align: center; }
  </style>
</head>
<body>
  <h1>はじめてのページ</h1>
  <h2>自己紹介</h2>
  <p>IT業界をやさしく案内します。</p>
  <p>これは1行目。<br>
  これは2行目。</p>
  <ol>
    <li>開発の流れ</li>
    <li>職種図鑑</li>
    <li>用語集</li>
    <li>学び方</li>
  </ol>
  <a href="https://it-nyumon.com/">サイトへ</a>
  <a href="https://it-nyumon.com/">
    <img src="neko.png" alt="ねこ" width="200">
  </a>
</body>
</html>

CSSの形: セレクタ { 何を: どうする; }

POINT「誰に」「何を」「どうする」の3点セット。h1 に、色を、赤に ＝ h1 { color: red; }
h1 { color: red; } 誰に（セレクタ） 何を（プロパティ） どうする（値） 最後は ;
セレクタで相手を選び、波かっこの中に「何を: どうする;」を書く。
  • セレクタ（h1）: 指示の相手。相手を「選ぶ」という意味です。同じ相手には何度でも指示できます。
  • プロパティ（color）: 何を変えるか。コロン : の左側です。
  • 値（red）: どう変えるか。コロンの右側で、最後にセミコロン ; を付けます。

指示は選んだ相手ぜんぶに効きます。p を選べばページ内のすべての段落に、body を選べばページ全体に効きます。

4つの指示: color・font-size・background・text-align

  • color: 文字の色。red や blue のような英語の名前で指定できます。ちょっと洒落た tomato（トマト色）のような名前もあります。
  • font-size: 文字の大きさ。20px のようにピクセル（画面の点の数）で書きます。
  • background: 背景の色。body に指定するとページ全体が変わります。lightyellow は淡い黄色です。
  • text-align: 文字の寄せ。center で中央寄せ。見出しを真ん中にするとぐっとサイトらしくなります。

CSSの指示（プロパティ）は何百種類もありますが、この4つだけで見た目の印象はかなり変えられます。まずはこの4つを組み合わせて遊んでみてください。

色の名前や単位のつづりを間違えると、その行だけ無視されます。エラーは出ず、ただ効かないだけなので気づきにくいです。効かないときは、まずつづりとセミコロンを疑ってください。

よくあるつまずき: 効かないときに見るところ

  1. セミコロン ; の付け忘れ — 次の行まで巻き込んで効かなくなります。
  2. 波かっこの閉じ忘れ — { と } は必ずペアで。
  3. つづり — colour（イギリス英語）は効きません。color です。
  4. style タグの位置 — <head> の中に書きます。
  5. 保存と更新 — メモ帳で上書き保存してから、ブラウザで更新（F5）。

よくある質問

CSSを書いたのに見た目が変わりません。

多いのは、セミコロンの付け忘れ、波かっこの閉じ忘れ、プロパティ名のつづり間違い（colour など）、style タグが head の中に入っていない、の4つです。1か所ずつ確認してください。ブラウザの更新（F5）も忘れずに。

色は英語の名前以外でも指定できますか？

できます。#ff6347 のように「#」と6桁の英数字で細かく指定する書き方（16進カラーコード）が一般的です。最初は red や tomato のような名前で十分で、慣れてきたら色コードに移ると良いです。

CSSを別のファイルに分けるには？

style.css というファイルに指示だけを書き、HTML の head に link タグで読み込みます。ページが増えても指示書は1枚で済みます。このやり方はシリーズの「ページを増やす」回で扱います。

HTMLとCSSはどちらを先に学ぶべきですか？

HTMLが先です。CSSは「HTMLのどこを、どう見せるか」を決めるものなので、見出しや段落といった HTML の部品が分かっていないと指示の相手を選べません。この記事の順番どおりで大丈夫です。