CSS 入門

Volardev 編集部 April 12, 2026

1. CSS とは？

CSS は Cascading Style Sheets（カスケーディング・スタイル・シート）の略称です。

CSS は、HTML 要素がスクリーン、紙、または他のメディア上でどのように表示されるかを記述するための言語です。CSS を使用することで、Web ページのレイアウトやデザインを効率的に制御できます。

2. なぜ CSS を使うのか？

CSS は、HTML ページ内のコンテンツのスタイルを定義するために使用されます。これには、デザイン、レイアウト、および異なるデバイスや画面サイズに応じた表示のバリエーション（レスポンシブデザイン）が含まれます。

2.1 CSS の実装例

以下のコードは、CSS を使用して HTML ページにスタイルを適用する簡単な例です。

<!DOCTYPE html>
<html>
<head>
<style>
/* ボディ全体の背景色を設定 */
body {
  background-color: lightblue;
}

/* h1 見出しの文字色を白にし、中央揃えにする */
h1 {
  color: white;
  text-align: center;
}

/* p 段落のフォントを指定し、サイズを 20px にする */
p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>マイ・ファースト CSS 例</h1>
<p>これは段落です。</p>

</body>
</html>

3. CSS が解決した大きな課題

HTML は本来、フォントや色の設定といった「装飾用」のタグを含むようには設計されていませんでした。

HTML は、以下のようにページの「構造」を記述するためのものでした。

<h1> : これは見出しです
<p> : これは段落です

HTML 3.2 の仕様に <font> タグやカラー属性が追加された際、開発者にとって悪夢が始まりました。大規模な Web サイトを開発する場合、すべてのページにフォントや色の情報を追加する作業は、非常に時間がかかり、コストのかさむプロセスになったのです。

この問題を解決するために、W3C（World Wide Web Consortium）によって CSS が作成されました。これにより、HTML ページからスタイル表現（フォーマット）を切り離すことが可能になりました。

4. CSS は工数を大幅に削減する

スタイルの定義は、通常外部の .css ファイルに保存されます。

外部スタイルシートファイルを使用することで、そのファイルを 1 つ変更するだけで、Web サイト全体のルック＆フィール（見た目と使い心地）を一括で変更できるようになります。

4.1 CSS の主なメリット

メンテナンス性の向上: スタイルが一箇所に集約されているため、修正が容易です。
ページの読み込み速度の向上: ブラウザが CSS ファイルをキャッシュできるため、2 ページ目以降の表示が速くなります。
デザインの柔軟性: 同一の HTML 構造に対して、CSS を切り替えるだけで全く異なるデザインを適用できます。