CSS講座 / CSSとは何か、HTMLとの役割の違い

CSS（Cascading Style Sheets）は、HTML文書の色、文字、余白、レイアウトなどの見た目を指定する言語です。HTMLは内容の意味と構造を表し、CSSはその構造をどのように表示するかを決めます。

HTML・CSS・JavaScriptの役割

庭の案内ページで「Small Garden」を一番大切な見出しとして示すのは、HTMLのh1です。その文字を緑色にし、大きく表示するのはCSSの役割です。普通の段落を緑色にしても、見出しの意味が与えられるわけではありません。

CSSにもマウスを重ねたときの表示やアニメーションがあります。画面が変化するから必ずJavaScriptが必要、という区分ではありません。まず内容と見た目を分ける考え方を押さえます。

CSSを書かなくても見出しが大きい理由

ブラウザーには初期スタイルがあります。CSSを書いていない文書でも、見出しが大きくなり、段落の間に余白が付き、リンクに下線が出るのはそのためです。初期フォントや余白はブラウザーや利用者の設定によって異なることがあります。

次の断片は本文の構造を読むための例です。実行を始めるときは後の完全なHTMLをテキストエディターに貼り付け、UTF-8でindex.htmlとして保存して開きます。拡張子が.html.txtになっていないかも確認してください。

<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>

例の英語は表示用の内容です。文章の変更とスタイルの変更を区別できるよう、最初はそのまま使い、CSSだけを変更します。

セレクター・プロパティ・値を読む

h1 {
  color: #087f5b;
}

h1が対象を選ぶセレクター、colorが変える特徴を示すプロパティ、#087f5bが指定する値です。color: #087f5b;のようにプロパティと値をコロンでつないだものを宣言と呼びます。6桁の16進数色は赤・緑・青の成分を表します。

この規則はh1の文字色を変えますが、文章を翻訳したり段落を追加したりはしません。案内文だけを選ぶには、HTMLにclass="notice"を付け、CSSでは.noticeと書きます。先頭のドットはCSS側の記法で、HTMLのクラス名には含めません。

文法の読み方はCSSの基本文法とエラーの調べ方でも確認できます。CSSの用途と初期スタイルについてはMDNのCSS入門も参考になります。

完全なHTMLを保存して動かす

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>
</body>
</html>

保存したファイルをブラウザーで開くと、薄い背景の上に緑色の見出しが現れ、営業時間の案内には枠と内側の余白が付きます。style要素の中がCSSです。別のライブラリーやサーバーは必要ありません。

colorは文字色、background-colorは背景色です。font-familyはフォントの候補、単位のないline-height: 1.7は文字サイズに対する行の高さの倍率を指定します。paddingは枠の内側、marginは外側の余白です。border: 1px solidは1ピクセルの実線を表します。

max-widthは内容の最大幅を制限します。狭い画面でも必ずその幅を占める指定ではありません。今はすべてを暗記せず、「どの要素を選び、何を変更したか」を対応付けます。複数ページで同じデザインを使う方法は外部スタイルシートの接続で扱います。

値を一つずつ変えて結果を比較する

1. h1のcolorを#1d4ed8に変えて保存・再読み込みします。大見出しだけが青くなり、h2や一般の段落はこの規則の対象になりません。
2. bodyのline-heightを1.7から2に変えます。窓を狭めるか長い段落を使い、行間が広がることを確認します。
3. .noticeのbackground-colorを#fff4ccに変えます。営業時間の枠だけが黄色になり、bodyに指定したページ全体の背景は変わりません。

三つを同時に変えず、一回の変更ごとに結果を見ます。反映されなければ、編集したファイルと開いているファイルが同じか、波括弧やコロンを消していないかを調べます。最後に元の値へ戻し、HTMLの見出し・段落・リンク構造が保たれていることも確認します。