CSSとは｜Webページの見た目を装飾するスタイルシート言語

CSS（Cascading Style Sheets）は、HTMLで作成したWebページの見た目を装飾するための言語です。文字の色やサイズ、背景色、レイアウトなど、ページのデザインに関わるすべてをCSSで制御します。HTMLが「構造」を担当するのに対し、CSSは「見た目」を担当する役割分担になっています。

CSSを使うことで、HTMLファイルの内容を変更せずにデザインだけを変えることができます。これにより、複数のページで統一されたデザインを効率的に管理できるようになります。

CSSの基本的な書き方

CSSは「セレクタ { プロパティ: 値; }」という形式で記述します。セレクタで装飾対象を指定し、波括弧の中にどのように装飾するかを書きます。

CSS

/* タグに対してスタイルを適用 */
p {
    font-size: 16px;
    color: #333;
}

/* 複数のプロパティを指定できる */
h1 {
    font-size: 32px;
    color: #1a1a2e;
    margin-bottom: 20px;
}

上記の例では、すべての<p>タグの文字サイズを16px、文字色を#333（濃いグレー）に設定しています。また、<h1>タグには文字サイズ、色、下の余白をまとめて指定しています。このように1つのセレクタに対して複数のプロパティをセミコロン（;）で区切って書くことができます。

CSSの3つの記述方法

CSSをHTMLに適用するには、主に3つの方法があります。それぞれの特徴を理解して使い分けましょう。

1. 外部ファイル（推奨）

CSSを別ファイル（拡張子 .css）に書き、HTMLの<head>部で読み込む方法です。最も一般的で推奨される方法です。

HTML

<head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="style.css">
</head>

CSS（style.css）

#blue {
    color: rgb(79, 79, 177);
}

.highlight {
    background-color: yellow;
    font-weight: bold;
}

外部ファイルにすることで、複数のHTMLページから同じCSSファイルを参照でき、デザインの一括変更が容易になります。

2. style要素（ページ内記述）

HTMLファイルの<head>部に<style>タグで直接書く方法です。そのページだけに適用したいスタイルに使います。

HTML

<head>
    <style>
        #blue {
            color: rgb(79, 79, 177);
        }
    </style>
</head>
<body>
    <div id="blue">この文字にCSSが適用されます</div>
</body>

3. インラインスタイル（タグに直接記述）

HTMLタグのstyle属性に直接CSSを記述する方法です。特定の1箇所だけスタイルを変えたい場合に使いますが、管理が難しくなるため多用は避けましょう。

HTML

<div style="color: rgb(79, 79, 177);">この文字にCSSが適用されます</div>

idとclassの使い分け

特定の要素にだけCSSを適用したい場合、idまたはclass属性を使います。この2つには明確な違いがあります。

CSS

/* idセレクタ: #をつける（ページ内で1つだけ） */
#header {
    background-color: #1a1a2e;
    color: white;
    padding: 20px;
}

/* classセレクタ: .をつける（複数箇所で使える） */
.important {
    color: red;
    font-weight: bold;
}

HTML

<div id="header">ヘッダー（ページに1つだけ）</div>

<p class="important">重要な文章1</p>
<p class="important">重要な文章2</p>
<p>通常の文章</p>

idは1ページ内で重複なく1箇所だけに使用し、classは同じスタイルを複数箇所に適用したい場合に使用します。実務ではclassを使うことが多く、idはJavaScriptから要素を取得する場合などに限定的に使用するのが一般的です。

CSSの優先順位

同じ要素に複数のスタイルが指定された場合、以下の順で優先されます（上ほど優先度が高い）。

インラインスタイル（style属性に直接記述）
idセレクタ（#で指定）
classセレクタ（.で指定）
タグセレクタ（タグ名で指定）

よくある間違い

CSSのプロパティの末尾にセミコロン（;）を付け忘れると、それ以降のプロパティが無効になります
idセレクタには#、classセレクタには.を忘れないようにしましょう
CSSファイルのパスが間違っているとスタイルが適用されません。ブラウザの開発者ツール（F12）で確認しましょう

まとめ

CSSはWebページの見た目を装飾するための言語
「セレクタ { プロパティ: 値; }」の形式で記述する
外部ファイル、style要素、インラインスタイルの3つの記述方法がある
外部CSSファイルを使う方法が最も推奨される
idは1箇所だけ、classは複数箇所に使用する
CSSには優先順位があり、インラインスタイル > id > class > タグの順