CSSの書き方は超シンプル！基本ルールと3つの適用方法を徹底解説

こんにちは！前回の記事で、Webサイトの「骨格」であるHTMLと、「内装」であるCSSの役割分担について学びました。

「役割はわかったけど、じゃあ具体的にどうやってCSSを書けばいいの？」

そう思っている方、ご安心ください。CSSの書き方は、実は驚くほどシンプルです。一度ルールを覚えてしまえば、色を変えたり、文字サイズを変えたりと、自由にデザインを操れるようになります。

この記事では、CSSの基本的な文法（書き方）と、それをHTMLに適用するための3つの方法を分かりやすく解説します！

🎨 CSSルールの「解剖図」：誰に、何を、どうする？

CSSのルールは、基本的にたった一つの形で成り立っています。
それは、「誰に」「何を」「どうする」を指定するだけです。

セレクタ { プロパティ: 値; }

この「セレクタ」「プロパティ」「値」が何なのか、分解してみていきましょう。

セレクタ (Selector) = 誰に: 「誰に」スタイルを適用するかを指定する部分です。HTML文書の中から、デザインを変更したい要素を特定します。
例： h1 （ページ内のすべての大見出し）
例： p （ページ内のすべての段落）
例： .profile （profileという名前（クラス）が付けられた要素）
プロパティ (Property) = 何を: 「何を」変更したいかを指定します。color（文字色）や font-size（文字サイズ）など、変更できるスタイルの種類のことです。
値 (Value) = どうする: 「どのように」変更したいかを指定します。プロパティに対して設定する具体的な内容です。
例： color プロパティに blue や #333333（色）を指定
例： font-size プロパティに 16px（サイズ）を指定

例えば、「ブログのすべての中見出し（h2タグ）の文字色を青に、文字サイズを24pxにしたい」場合、こう書きます。

/* h2要素の文字色を青に、フォントサイズを24pxにする */
h2 {
  color: blue;
  font-size: 24px;
}

{ }（波括弧）：h2 { ... } のように、セレクタに対する命令（宣言）の始まりと終わりを囲みます。
:（コロン）：color: blue のように、「プロパティ」と「値」を区切ります。
;（セミコロン）：color: blue; のように、一つの命令の終わりを示します。複数のスタイル（例：文字色とサイズ）を指定する場合は、必ず ; で区切ってください。これが抜けていると、CSSが正しく動作しない原因No.1です。

CSSのルールが書けたら、次はそのCSSをHTML文書に「適用」する必要があります。
適用する方法は主に3つありますが、ブログ運営では「外部スタイルシート」が圧倒的におすすめです。

方法：
CSSのルールを style.css のような独立したCSSファイルに書き、HTMLの<head>タグ内で<link>タグを使って読み込みます。

HTML (<head>内):

<link rel="stylesheet" href="style.css">

利点：

方法：
CSSのルールを、HTMLファイル内の<head>セクションに、<style>タグで囲んで直接書き込みます。

HTML (<head>内):

<style>
  p {
    color: green;
  }
</style>

利点：

方法：
スタイルを適用したいHTML要素（タグ）に style 属性として直接書き込みます。

HTML (<body>内):

<p style="color: red; font-size: 12px;">この段落は赤色です。</p>

注意点：

3つの方法の特徴を一覧表にまとめました。

比較項目	外部スタイルシート（推奨）	内部スタイルシート	インラインスタイル（非推奨）
方法	`.css`ファイルを作成し、`<link>`で読み込む	HTMLの`<head>`内に`<style>`で記述	HTML要素の`style`属性に直接記述
場所	独立した`.css`ファイル	HTMLファイル内の`<head>`	HTMLファイル内の各要素
適用範囲	サイト全体（読み込んだ全ページ）	そのHTMLページのみ	その要素のみ
長所	メンテナンス性が最高サイト全体で一貫性を保てるパフォーマンスが良い（キャッシュ）	ページ固有のスタイルを管理しやすい手軽にテストできる	ピンポイントで適用できる
短所	2ファイル（HTML/CSS）の管理が必要	他のページで再利用できない多用するとHTMLが肥大化	メンテナンス性が非常に低い再利用性が全くない優先順位が最高で管理が困難
推奨用途	サイト全体の基本デザイン	特定のページのみの例外的なデザイン	ごく稀な、一度きりの調整