【CSS第1回】CSSとは？基本と書き方
HTMLで作成した文書に「デザインの魔法」をかけましょう。本講座では、CSSの基本役割と記述ルール、そしてHTMLへ適用する3つの書き方をわかりやすく解説します。
1. CSSの役割とは？
HTMLはウェブページの「骨組み（構造）」を作る役割でしたが、これに対して CSS（Cascading Style Sheets） は、ページの「見た目（デザイン）」を制御する言語です。
CSSを使うことで、文字の大きさや色を変更したり、背景画像を設定したり、要素を横並びに配置するなど、視覚的な美しさと使いやすさを思い通りに表現できるようになります。HTMLだけで書かれた味気ないページが、CSSのコードを追加するだけで一気に洗練されたウェブサイトへと生まれ変わります。
2. CSSの基本記述ルール
CSSを記述する際は、「誰に」「何を」「どうする」というシンプルなルールに従います。この3大要素は以下のように呼ばれます。
- セレクタ（Selector）: 「誰に」に該当する、スタイルを適用したいHTML要素を指定する部分。
- プロパティ（Property）: 「何を」に該当する、変更したい属性（色、大きさ、余白など）を指定する部分。
- 値（Value）: 「どうする」に該当する、具体的な設定値（赤色に、20pxに、など）を指定する部分。
図：CSSの基本書式（セレクタ・プロパティ・値の関係）
⚠️ 記述の必須ルール
・プロパティと値は波括弧 { } の中に記述します。
・プロパティと値の間はコロン : で区切ります。
・文末には必ずセミコロン ; を置いて処理を区切ります。
3. CSSをHTMLに適用する3つの方法
CSSのコードをHTMLに反映させる方法は、主に以下の3つがあります。
① 外部スタイルシート（最も推奨）
独立したCSSファイル（例: style.css）を作成し、HTMLの <head> 内から <link> タグを使って読み込ませる方法です。デザインの管理が一元化でき、最も美しい書き方です。
<link rel="stylesheet" href="style.css">
② 内部スタイルシート（styleタグ）
HTMLファイル内の <head> の中に直接 <style> タグを作り、その中へCSSコードを書く方法です。特定の1ページだけに適用したい場合に適しています。
③ インライン（style属性）
HTML要素のタグ内に直接 style="..." 属性を追加して局所的にCSSを指定する方法です。管理が極めて煩雑になるため、検証目的以外での使用は避けるのがベストです。
4. 最初のCSSコードを書いてみよう
以下のコードを記述したファイルを作成してみましょう。HTML側から外部CSSを読み込ませることで、ページの段落が美しい緑色になります。
p { color: #10b981; font-size: 16px; }
CSSコードにおいて、スタイルルールのプロパティと値を囲むために使用する記号（ブラケット）は何でしょうか？
※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。
5. まとめと次回予告
第1回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。
- CSSはHTMLで作った構造に「見た目」のデザインを与える言語。
- 基本記述は「セレクタ { プロパティ: 値; }」のセットで行う。
- HTMLに適用する方法は3つあり、外部スタイルシートの読み込みが最も推奨される。
次回（第2回）は、「セレクタの種類と優先順位」をテーマに、特定の要素へピンポイントにスタイルを当てるためのクラス・IDの使い方や優先度ルール（詳細度）を学びます。お楽しみに！
📖 CSSの基礎を全10回でマスターする
🔑 第1回 理解度チェックの解答と解説
【解説】
正解は **波括弧（中かっこ） `{ }`** です。この波括弧の内部に、プロパティと値のペアを記述してスタイル規則を定義します。コロン `:` やセミコロン `;` の打ち忘れも構文エラーの代表的な原因となるため、常にセットで覚えるようにしましょう。