【6日でできるHTML＆CSS入門】スタイルシートの基本形

―“セレクタ・プロパティ・値”の 3 点セットを押さえよう―
　HTML が文書の骨格を示すだけではページは質素なままです。スタイルシート（CSS） を加えると、同じタグ構造でも配色や文字サイズ・余白を自在に変えられます。ここでは〈コメント → セレクタ → プロパティ:値〉という スタイルシートの基本形 を、シンプルなサンプルコードを通して解説します。

１．CSS 基本形を分解する

1.1. コメント

/* これはコメントです　複数行でも
   書けます */

ブラウザには出力されず、コードの補足に使います。

1.2. セレクタ

スタイルを適用する 対象要素 を示します。
例：body、h1、.note、#main

1.3. プロパティと値

用語役割例
プロパティ変更したい項目color, font-size, background-color
値指定内容#ff6600, 150%, Yellow

書式は プロパティ: 値;。複数行まとめて書くときは { … } で囲みます。

２．内部スタイルのサンプル

2.1. lesson23_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スタイルシートの基本形</title>
<style>
  /* body と h1 の見た目を定義 */
  body{
    background-color:#fff8e1; /* クリーム色 */
    color:#333;
    font-family:"Hiragino Kaku Gothic ProN",sans-serif;
  }
  h1{
    color:#ff6600;   /* オレンジ */
    font-size:240%;  /* 2.4 倍 */
  }
</style>
</head>
<body>
  <h1>CSS は 3 要素で構成</h1>
  <p>コメント／セレクタ／プロパティ:値 を覚えれば第一歩はクリアです。</p>
</body>
</html>

表示結果

背景が淡いクリーム色、h1 は大きなオレンジ文字、本文は濃いグレー。

2.2. lesson23_2.html（h1 の色だけ変更）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>色を変えてみる</title>
<style>
  body{
    background-color:#fff8e1;
    color:#333;
  }
  h1{
    color:#0066cc;  /* 青系に変更 */
    font-size:240%;
  }
</style>
</head>
<body>
  <h1>色を変えるのは 1 行</h1>
  <p>プロパティの値を書き換えるだけで雰囲気が一変します。</p>
</body>
</html>

表示結果

h1 が爽やかなブルーに。HTML 部分はまったく修正していません。

３．プロパティ表（サンプルで使用）

セレクタプロパティ値効果
bodybackground-color#fff8e1背景を淡いクリーム色に
bodycolor#333既定文字色を濃いグレーに
h1color#ff6600 / #0066cc見出し文字色
h1font-size240%親要素比 2.4 倍

４．タグ・属性まとめ

要素／属性説明
<style>内部スタイル定義ブロック
background-color背景色を設定
color文字色を設定
font-sizeフォントサイズを相対・絶対値で指定

まとめ

  • CSS の最小単位は コメント・セレクタ・プロパティ:値 の 3 つ。
  • 変更は HTML ではなく CSS だけ を書き換えるのがモダンな流儀。
  • 小規模検証は <style> タグで十分、規模が大きくなったら外部ファイル化する。