【6日でできるHTML＆CSS入門】スタイルシートとは

―構造とデザインを切り離す“スタイルシート”の役割―
　HTML が「文章の骨格」を作る道具だとすれば、スタイルシート（Style Sheet） は「装い」を決める衣装デザイナーです。タグの配置や意味づけはそのままに、フォント・色・レイアウトを後から一括調整できる―この分離こそ、現代的な Web ページがメンテナブルである最大の理由です。ここでは最も広く使われる CSS（Cascading Style Sheets） を中心に、定義方法から具体例まで順を追って学びます。

１．スタイルシートの基本

1.1. スタイルシートとは

定義：構造化文書（HTML、SVG など）の見た目を宣言的に制御する仕組み
目的：コンテンツとデザインの分離・再利用性・一括変更の容易さ

1.2. CSS が「カスケード」と呼ばれる理由

ブラウザ既定 → 制作者 CSS → ユーザー CSS の優先順位が滝のように流れる。
同じ要素に複数ルールがヒットしたら「詳細度（Specificity）」「後勝ち」で衝突解決

1.3. CSS を記述する 3 つの方法

方法	書き方	主な用途
インライン	<p style="color:red">	例外的な 1 箇所だけ
内部スタイル	<style>…</style>	小規模ページ／学習
外部スタイル	<link rel="stylesheet" href="main.css">	実務で推奨

２．内部スタイルで色と文字を変えてみる

2.1. サンプルファイル（単独動作）

ファイル名： lesson22_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのスタイルシート</title>
<style>
  /* 背景と本文文字色を一括設定 */
  body {
    background:#e0f7ff;     /* 明るい水色 */
    color:#222;             /* ダークグレー */
    font-family:"Segoe UI",sans-serif;
  }
  /* 見出しだけ別カラー＆サイズ */
  h1 {
    color:#008000;          /* グリーン */
    font-size:220%;
    text-align:center;
  }
</style>
</head>
<body>
  <h1>スタイルシート入門</h1>
  <p>HTML のタグ構造はそのまま、CSS で色やレイアウトを自由に変更できます。</p>
</body>
</html>

2.2. 表示イメージ

表示結果

背景：淡い水色
h1：中央寄せ・緑色・大きめ文字
本文：ダークグレーで標準サイズ

2.3. コード解説

行	主なタグ／プロパティ	説明
5–15	`<style>`〜`</style>`	内部スタイルブロック
8	`background`	ページ全体の背景色
9	`color`	既定文字色
13	`font-size`	ルートより 220 % に拡大
14	`text-align`	中央揃え

３．CSS セレクタ入門

3.1. 基本セレクタ

セレクタ例	対象	例
`p`	同名タグ全部	`<p>`
`.note`	指定クラス	`<div class="note">`
`#header`	id が header	`<header id="header">`

3.2. 組み合わせ

子孫： ul li → リスト内のすべての <li>
子： nav > a → <nav> 直下のリンクだけ
疑似クラス： a:hover → ホバー時のリンク色

４．演習：ボタンにホバー効果を付与

ファイル名： lesson22_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンホバー効果</title>
<style>
.btn {
  display:inline-block; padding:0.6em 1.2em;
  background:#ff8c00; color:#fff; border:none; border-radius:6px;
  transition:background 0.3s ease;
}
.btn:hover {
  background:#ffb347;          /* 明るく変化 */
}
</style>
</head>
<body>
  <button class="btn">クリック</button>
</body>
</html>

表示結果

５．使用タグ・属性まとめ

要素／属性	用途	備考
`<style>`	内部 CSS 宣言	`<head>` 内に配置
`background`	背景色／画像	キーワード・16進・rgb() 等
`color`	文字色	継承プロパティ
`font-family`	書体	カンマ区切りでフォールバック
`transition`	アニメーション	物理演算不要の簡易効果

まとめ

CSS = 見た目定義ファイル。HTML と切り離せば一括変更が容易。
記述場所はインライン／内部／外部の 3 通り。実務は外部を推奨。
セレクタとプロパティを組み合わせれば、色・余白・アニメーションまで自在に制御可能。