基本情報技術者 2012年 秋期 午前（科目A） 問24

Webページのスタイルを定義する仕組みはどれか。【午前2 解説】

要点まとめ

• 結論：CSSが正解。Webページの見た目（レイアウト、色、フォント、余白、アニメーションなど）を定義し、外部・内部・インラインで適用できる仕様です。
• 根拠：HTMLは文書の構造を記述するのに対し、CSSは表示（スタイル）を指定するための言語であり役割が明確に分かれています。
• 差がつくポイント：外部CSSの活用、セレクタと優先順位（specificity）、メディアクエリやBEMなどの設計手法を理解して運用できるかが違いを生みます。

正解の理由

よくある誤解

• PNGやSVGを「スタイル」と混同する誤解：PNGはラスター画像、SVGはベクター画像であり、いずれも画像フォーマットであってページ全体のスタイルを定義する仕組みではありません。
• CMSを「見た目を作るもの」と考える誤解：CMSはコンテンツ管理システムでテーマやテンプレートを通じて見た目に影響しますが、直接の「スタイル定義言語」ではありません。
• SVGにCSSが使えるため「SVG＝CSS」と誤認する誤解：SVG内でCSSを使うことはできますが、SVG自体は画像フォーマットであり、Web全体のスタイル定義そのものではありません。

解法ステップ

1. 問題文のキーワード「スタイル」を確認し、「表示・見た目」を指す語かを判断する。
2. 選択肢の役割を思い出す（CMS＝管理、CSS＝スタイル、PNG＝画像、SVG＝ベクター画像）。
3. Web標準の用語（Cascading Style Sheets）と対応させ、最も直接的に「スタイルを定義」するものを選ぶ。

選択肢別の誤答解説

• ア: CMS — コンテンツ管理システム。Webサイトのコンテンツの作成・管理を行う仕組みで、直接「スタイルを定義する言語」ではありません。
• イ: CSS — 正解。Cascading Style Sheetsで、Webページの見た目（レイアウトや色、フォント等）を指定します。
• ウ: PNG — 画像ファイル形式（ラスター）。表示する画像データの形式であり、ページ全体のスタイル定義には該当しません。
• エ: SVG — ベクター画像形式。スケーラブルな図形を表すXMLベースのフォーマットで、CSSを内部に持つことはできますが、SVG自体は「スタイル定義言語」ではなく画像フォーマットです。

補足コラム

• CSSの適用方法には「外部スタイルシート（link）」「内部スタイル（styleタグ）」「インラインスタイル」があり、外部を使うことで保守性が向上します。
• CSSの重要な概念に「カスケード」「継承」「特異性（specificity）」があり、これらを理解すると意図したスタイル制御ができます。
• 簡単な例（CSSの基本）：

/* 外部CSSの例 */
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
}
h1 {
  font-size: 24px;
  color: #0055aa;
}
@media (max-width: 600px) {
  h1 { font-size: 20px; }
}

FAQ