CSS（Cascading Style Sheets）

分類: テクノロジ系アルゴリズムとプログラミング
出る試験: 基本情報応用情報
重要度: ★★★☆☆

Webページの見せ方を指定する言語。中身を書くHTMLと、見た目を決めるCSSに役割を分ける。

もう少し詳しい説明

CSSは、Webページの見せ方を指定する言語です。日本語では「段階スタイルシート」と訳されます。

HTMLが「ここは見出し」「ここは段落」と中身の意味を書き、CSSが「見出しは大きく濃い色で」と見せ方を書きます。

h1 { font-size: 2rem; color: #1b4332; }
p  { line-height: 1.9; }

左の h1 をどこに当てるか、波かっこの中をどう見せるかです。この2つだけの単純な作りになっています。

分けることで何が得られるのか

見せ方をHTMLの中に直接書いてしまうと、ページの数だけ同じ指定が散らばります。色を変えたくなったとき、全部のページを開いて直すことになります。

CSSを別のファイルにしておけば、どのページもそれを読み込むだけです。1か所直せば、読み込んでいるページすべてが変わります。

得られるものは3つです。

直す場所が1つで済む … 直し忘れも、食い違いも起きない
中身と見た目を別々に扱える … 文章を書く人と、見た目を整える人の作業が分かれる
同じ中身を、相手に合わせて見せ分けられる … 画面の幅や、印刷用に別の見せ方を当てられる

「段階」とは何か

CSSの「C」は Cascading、段階的に重なるという意味です。

1つの部分に対して、指定が複数当たることがあります。すべてのページ共通のCSS、そのページだけのCSS、タグに直接書いた指定。これらがどれも有効なまま重なります。

食い違ったときは、決まった順で優先度が決まります。おおまかには、当てる範囲が狭い指定ほど強いと考えてください。すべての段落への指定より、ある1つの段落への指定のほうが勝ちます。

この仕組みのおかげで、全体の決まりを作っておいて、例外だけを書き足すという使い方ができます。

どこに書くか

書き場所は3通りあります。

書き方	書く場所	向いている場面
外部スタイルシート	別のファイルにして読み込む	複数ページで共通の見せ方。ふつうはこれ
内部スタイルシート	そのHTMLの先頭にまとめて書く	1ページだけで完結する見せ方
インラインスタイル	タグに直接書く	その1か所だけの例外

下へ行くほど、分けた意味が薄れます。 タグに直接書くと、結局HTMLの中に見せ方が散らばってしまいます。

XMLの場合

XMLにも見せ方を決める言語があります。XSL（拡張可能なスタイルシート言語）です。

CSSが「この部分をこう見せる」と指定するのに対し、XSLは別の形へ作り変えることまでできます。XMLで持っているデータを、表示用のHTMLに変換する、といった使い方です。

試験では、CSSはHTML向き、XSLはXML向きという対応で出てきます。

試験ではこう出る

科目A（旧・午前）で出ます。いちばん多いのは、CSSを使う利点を選ばせる問題です。「複数ページの見た目を一括で変更できる」という表現が答えになります。

次に多いのが、HTML・CSS・XML・XSLの役割を区別させる問題です。

言語	受け持つこと
HTML	中身が何であるかを示す
CSS	HTMLの見せ方を指定する
XML	タグを自分で決めて、データの構造を表す
XSL	XMLの見せ方を指定する／別の形へ作り変える

中身と見た目を分離するという言い回しが、そのまま答えになる形も多く出ます。分離して何が嬉しいのかまで答えられるようにしておくと、言い換えられても対応できます。

ミニクイズ

CSSを使う利点として、最も適切なものはどれか。

正解は 1番：見せ方の指定を1か所にまとめられるので、多数のページの見た目を一度に変更できる

CSSは見せ方の指定だけを別のファイルに切り出せます。多数のページが同じCSSを読み込んでいれば、そのCSSを1か所直すだけで全ページの見た目がそろって変わります。内容を書き換えずに済むので、修正の手間と間違いが大きく減ります。サーバ（要求を受け取って応えを返す側の機械）と通信してページの一部だけを書き換えるのはAjax（ページ全体を読み込み直さず、必要な部分だけを書き換える作り方）の手法、タグを自由に定義できるのはXMLの特徴です。CSSはデータを圧縮する仕組みではなく、むしろ読み込むファイルが1つ増えます。

間違えた用語の復習リストを見る →

この分野をまとめて解く → アルゴリズムとプログラミングのミニテスト（全44問）

最終更新：2026-10-09