CSS 【Cascading Style Sheets】カスケーディングスタイルシート

概要

CSS（Cascading Style Sheets）とは、Webページの要素の配置や見栄えなどを記述するための言語。HTML文書に追加して見た目をコントロールすることができ、文書の外部から読み込んで適用することもHTML文書中に埋め込んで記述することもできる。

Web規格では、文書内の文字情報と論理的な構造（見出しや本文、箇条書きなど）、画像など文字以外の要素の組み込みなどはHTMLで記述し、それらの画面上での位置関係や見た目の指定、装飾などはCSSで記述した「スタイルシート」により指定することとされている。

CSSによるスタイル指定はHTML文書中に直接記述することもできるが、外部のファイルにまとめて記述してHTMLから呼び出す形が望ましいとされる。CSSをファイルに格納する際の標準の拡張子は「.css」である。

基本的な書式

基本的な書式は「要素の一致条件 {プロパティ名1:値1;プロパティ名2:値2;…}」というもので、文書内で条件に一致する要素に対し、各プロパティに値が適用される。例えば「p{font-size:16px}」という指定は文書中に登場するHTMLのp要素のfont-sizeプロパティ（文字サイズ）を16ピクセルに指定することを表す。この文を必要なだけ列挙して文書の書式を設定する。

指定できるプロパティは要素の大きさや配置、要素間の位置関係や空白、要素の境界線や余白、要素間の間の空白や周囲の余白、文字の大きさや文字や行の間隔、書体（フォント）の種類や変形（太字や斜体、上付き、下付きなど）、箇条書き（リスト）の表示書式、背景色や背景画像など多岐にわたる。

HTMLタグが親子関係（包含関係）にある場合、多くの設定値は親要素に指定されたものが子要素、孫要素に引き継がれ、子要素で指定されたものが追加されていく。このように設定値が上から下へ伝播していく様子を階段状の滝を意味する “cascade” （カスケード）になぞらえてこのような名称となった。

見栄えにCSSを用いることでHTML文書に直接見栄えを記述することを避け、文書の論理的な構造をHTMLに、見栄えに関連する情報をCSSに分離することができる。構造のみ、あるいは見栄えのみを修正することが容易になり、対象機器などに応じてCSSを切り替え、それぞれに適した表示や印刷を行えるようになる。

セレクタ

CSSで要素の指定に用いられる一致条件を「セレクタ」（selector）という。要素型（タグ名）やクラス、ID、属性値、先頭からの順番など、様々な指定方法が用意されている。

「div」「a」などアルファベットから始まるものはHTMLの要素型（タグ名）を指定する「要素型セレクタ」（type selector）、「.myclass」のようにドット（ピリオド）から始まるものはclass属性の値を指定する「クラスセレクタ」（class selector）、「#myid」のようにシャープ（ナンバーサイン）から始まるものはid属性（またはname属性）の値を指定する「IDセレクタ」（ID selector）で、この3つの組み合わせが基本となる。

他にも、「要素:nth-child（n）」で子要素の特定の順番を指定したり、「要素[属性名="値"]」で特定の属性値を持つ要素のみを取り出したり、「要素:hover」（マウスオーバー時の挙動を指定）など要素が特定の状態にある場合を指し示す書式などが用意されている。

文書内の要素の階層構造（親子関係）に基づいて特定の位置にあるものだけを指定することもできる。例えば、「p>a」のような大なり記号は「子セレクタ」と呼ばれ、親要素直下の子要素（この例ではp要素直下のa要素）を指す。「p a」のように空白で繋ぐ指定方式は「子孫セレクタ」と呼ばれ、孫要素などすべての子孫要素（この例ではp要素内のすべてのa要素）を指す。

歴史

最初の規格（CSS Level 1）は1996年にW3Cによって標準化され、1998年に拡張された「CSS Level 2」標準が勧告された。長年の間これがCSS標準として定着していたが、2011年に大改訂された「CSS Level 3」（CSS3）が策定された。

CSS3からは仕様がモジュール（部品）化されたため、CSS3準拠のモジュール規格はその後何年にも渡り新たに登場し続けている。メディアクエリやセレクタなどで「Level 4」仕様の検討が始まっているが、今後は「CSS4」（あるいは5、6など）のような単一の統合されたバージョン番号は用いられない可能性がある。

(2023.12.7更新)