← 用語集一覧へ戻る

CSS

Cascading Style Sheets
web development beginner
Webページの見た目（色・フォント・レイアウト・余白など）を指定するスタイルシート言語のこと。HTMLと組み合わせてデザインを表現する。
CSS (Cascading Style Sheets)

概要（サマリー）

CSS（Cascading Style Sheets）とは、Webページの見た目を指定するための言語のことである。文字の色・フォント・余白・レイアウトなど、ページの「デザイン部分」を担当する。HTMLがページの構造（何があるか）を定義するのに対し、CSSはその見え方（どう見せるか）を定義する。HTMLとCSSはセットで使うのが基本であり、どちらかだけでは完成したWebページにはならない。

詳細解説

CSSの基本の書き方

CSSは「セレクター・プロパティ・値」の3つで構成される。

p {
  color: red;
  font-size: 16px;
  line-height: 1.8;
}

この例では、「p（段落）タグの文字色を赤にし、フォントサイズを16px、行間を1.8倍にする」という意味になる。セレクターで「どの要素に」、プロパティと値で「何をどうするか」を指定する。

HTMLとCSSをつなぐ方法

CSSをHTMLに適用する方法は主に3つある。

  • 外部ファイル（推奨）: <link rel="stylesheet" href="style.css"> で別ファイルを読み込む。複数ページで共有できる
  • <style> タグ: HTMLの <head> 内に直接書く。そのページ専用のスタイルに使う
  • インラインスタイル: <p style="color: red;"> のようにHTMLタグに直接書く。優先度が高いが管理しにくいため多用は避ける

カスケード（優先順位）と詳細度

CSSの「C」は「Cascading（流れ落ちる）」の意味で、複数のスタイルが同じ要素に当たったとき、どのスタイルが優先されるかのルールを持っている。これを「詳細度（Specificity）」と呼ぶ。

おおまかな優先順位は以下のとおりだ（下ほど強い）。

  1. ブラウザのデフォルトスタイル
  2. 外部CSSファイル
  3. <style> タグ内のスタイル
  4. インラインスタイル（style="..." 属性）
  5. !important 付きのスタイル

「スタイルが効かない」というトラブルの多くは、この優先順位のぶつかりが原因だ。

ボックスモデル

CSSではすべての要素が「ボックス」として扱われる。内側から「コンテンツ → padding（内側の余白）→ border（枠線）→ margin（外側の余白）」という4つの層で構成されており、この仕組みをボックスモデルと呼ぶ。

.card {
  padding: 16px;    /* コンテンツと枠の間の余白 */
  border: 1px solid #ccc;  /* 枠線 */
  margin: 24px 0;   /* 要素の外側の余白（上下24px） */
}

ブラウザの開発者ツールを開くと、各要素のボックスモデルを視覚的に確認できる。レイアウトが思いどおりにならないときに重宝する。

FlexboxとGridレイアウト

横並びや複雑なレイアウトを実現するための代表的な手法が2つある。

Flexbox（1次元）
要素を縦または横の一方向に並べるのが得意だ。

.container {
  display: flex;
  justify-content: space-between; /* 水平方向の配置 */
  align-items: center;            /* 垂直方向の配置 */
  gap: 16px;                      /* 要素間の隙間 */
}

Grid（2次元）
縦横のグリッド状にレイアウトするのが得意だ。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列均等分割 */
  gap: 24px;
}

現代のWebデザインはこの2つを組み合わせて構築されることが多い。

メディアクエリとレスポンシブデザイン

画面サイズに応じてデザインを変える仕組みがメディアクエリだ。スマホ・タブレット・PCで異なるレイアウトを適用する「レスポンシブデザイン」に欠かせない。

/* デフォルト（スマホ向け） */
.container {
  flex-direction: column;
}

/* 768px以上（タブレット・PC向け） */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

CSS変数

CSS変数（カスタムプロパティ）を使うと、色やサイズなどの値を一元管理できる。

:root {
  --color-primary: #3b82f6;
  --spacing-md: 16px;
}

button {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

テーマカラーを変えたいときに1箇所直すだけで全体に反映されるため、保守性が大きく上がる。

ブラウザ差異と注意点

CSSの解釈はブラウザごとに微妙に異なる場合がある。ChromeとSafariで表示が違う、といった問題はよく起きる。AIが生成したCSSを使う場合も、主要なブラウザで確認する習慣をつけておくとよい。

AIコーディングとCSS

AIはCSSのコード生成が得意だ。「ボタンを丸くしてホバーで色が変わるようにして」といった自然言語の指示から、完成度の高いCSSを生成できる。ただし、AIが生成するCSSは冗長になりがちで、!important を多用したり、不要なスタイルが混入したりすることもある。生成結果を鵜呑みにせず、意味を確認しながら使う習慣が大切だ。

よくある勘違い

CSSを変えたのに反映されない？

ブラウザのキャッシュが原因のことが多い。Ctrl+Shift+R（Macは Cmd+Shift+R）で強制リロードすると反映されることがある。それでも直らない場合は、CSSファイルのパスが間違っていないか、セレクターが正しいか、優先順位に問題がないかを確認しよう。

!important を使えばどんな問題も解決できる？

一時的な解決にはなるが、多用すると管理が難しくなる。!important はCSSの詳細度を強制上書きするため、乱用すると「なぜこのスタイルが効かないのか」を追いにくくなる。根本的な詳細度の問題を理解して解決するほうが長期的には健全だ。

CSSはプログラミング言語？

厳密には異なる。CSSはデザインを「宣言」するための言語であり、条件分岐やループといったプログラミングの概念は基本的に持っていない。JavaScriptで動的にクラスを付け替えてスタイルを切り替えるパターンはよく使われるが、それはJavaScript側の処理だ。

FlexboxかGridか、どちらを使えばいい？

どちらが優れているというわけではなく、用途で使い分ける。1列・1行に並べるだけならFlexbox、縦横の2方向でグリッド状に配置したいならGridが適している。実際の開発では両方を組み合わせて使うことが多い。

より詳しくAIに聞いてみよう

  • CSSとは何かを、デザイン未経験者でもわかるように説明してください。
  • CSSのカスケードと詳細度の仕組みを、具体例を使って初心者向けに教えてください。
  • FlexboxとGridの違いと、それぞれどんな場面で使うべきか教えてください。
  • CSSのボックスモデルを、ブラウザの開発者ツールで確認する方法を教えてください。
  • AIコーディングでCSSを生成してもらうときに、意図したデザインを正確に伝えるコツを教えてください。