HTMLなどの文書の表現方法(表示の見栄えや音声読み上げの方法)を定義するスタイルシートの書式の一つ。HTML 4.0以降のデフォルトのスタイルシート。
開始タグと終了タグに挟まれた範囲を要素という。各要素は、ボックスモデルと呼ばれる構造を持っている。
外側から内側に順に、次のように呼ぶ。
それぞれ、上下左右の方向を持っており、個別に指定できる。
基本的には、要素に対して幅(width)や高さ(height)など大きさに関する指定をした場合、W3Cの正規の仕様では、内容に対してのみ影響を及ぼす。
しかし古いInternet Exploror(具体的にはIE 5.5以前)などではパディングとボーダーを加算した分に対して影響を及ぼすという、おかしな実装になっている。このため、IE 5.5以前と、正規の仕様準拠の実装とで表示を合わせる場合、パディングとボーダーを0にする必要があるなど理不尽な制限が発生した。
基本的な記述方法は、次の通り。
p { color: red; }
;で区切ることで複数の宣言が可能。改行は任意で、あってもなくてもよい。また、プロパティ、:、特性値の前後に空白文字(スペース、タブ、改行)を挿入しても良い。空白文字は無視される。
つまり、次のようになる(宣言が二つの場合)。
セレクター { プロパティ: 値; プロパティ: 値 }
全称セレクターの他、CSS1ではタイプ・セレクター、文脈セレクター、クラス・セレクター、一意セレクターがある。
これだけでも十分な指定が可能だが、CSS2からさらに拡張され、属性セレクターの追加と、文脈セレクターの拡張が施されている。
全ての要素に適用される。ワイルドカード "*" である。
* { margin: 0; padding: 0 }
(X)HTMLの要素タイプ名(pなど)はセレクターになる。
p { font-weight: bold }
文書の要素間の木構造による指定方法である。
例えば、p要素中のem要素に対しては、次のようになる。
p em { color: red }
なお、この記述方法はCCS2で大幅に拡張された(後述)。
(X)HTMLの要素に指定したclass属性をキーとする指定方法である。
<p class="hoge">ほげほげ</p>
次のようになる。
p.hoge { color: red }
また、要素名を略せば、全てのclass="hoge"にマッチする。
.hoge { color: red }
(X)HTML側で、複数の規則を適用したい場合、class属性内に空白区切りで複数を書くことができる。
<p class="hoge fuga">ほげほげ ふがふが</p>
さらに、class属性値にhogeとfugaの両方を持つ要素のみにマッチさせるには、次のようにする。
.hoge.fuga { color: red }
(X)HTMLの要素に指定したid属性をキーとする指定方法である。
<p id="hoge">ほげほげ</p>
次のようになる。
p#id { color: red }
idは一意にせねばならない。したがって重複は無いはずなので、要素名は省略しても同様である。
#id { color: red }
CSS2では、要素が持つ属性に応じた動作をするためのセレクターが用意された。
属性値に関わらず、href属性を持った任意のa要素
a[href] { text-decoration: underline }
target属性が_blankになっている全てのa要素
a[target="_blank"] { font-weight: bold }
上は属性名と属性を "=" 演算子で結び、等価であることを示した。
複数の属性値が半角空白で区切られ列挙されているとして、そのうちの一つに一致するものを指し示す場合は、"~=" 演算子を使う。
例えば、rel="hoge fuga nullpo" となっているa要素があるとすると、次の指定は、この要素にマッチする。
a[rel~="fuga"] { font-weight: bold }
また、ハイフンで区切られた属性値のうち、先頭が一致するものを指し示す場合は、"|=" 演算子を使う。
これはlang属性などに見られるが、例えば次の指定は、lang="en"、lang="en-US"、lang="en-GB" などにマッチする。
*[lang|="en"] { color : red }
CSS1では、文脈セレクターは木構造に対して先祖、子孫の関係しか区別できなかったが、CCS2からは、様々な構造を分析するためのセレクターが追加された。
ワイルドカードを挟むことで、孫要素以降すべての子孫にマッチさせることが可能になった。
div * p { font-size: xx-large }
これは、div要素の、任意の子孫要素(*)の、さらに子孫のp要素、にマッチする。
子要素のみを指定したい場合は、> を使う。
body > p { text-indent: 1em }
body要素の直下にある全てのp要素にマッチする。しかし、それ以外のp要素にはマッチしない。
隣接セレクターは兄弟セレクターともいい、ある要素の共通の子要素であり、お互いが前後して隣接する要素にマッチするセレクターである。
例えば、body要素の直下にh1とh2があるとして、h1の直後にあるh2にのみマッチさせたい場合は、次のようにする。
h1 + h2 { color: green }
仮にh1とh2が隣接していたとしても、祖先要素が違っている場合にはマッチしない。
CSSでは、要素タイプ名あるいは属性による固定的なセレクター以外に、疑似クラス(pseudo-classes)、疑似要素(pseudo-elements)と呼ばれる疑似セレクターが用意されている。
CSS1の時点で、a要素にアンカー疑似クラスが存在した。CSS2では、さらにいくつかが追加されている。
疑似クラスは、セレクターにマッチする対象をさらに分類する機能で、主として閲覧者の操作に応じてスタイルを変化させるためのものである。
:linkと:visitedは a[href]要素にのみ利用できる。CSS2で追加された:activeは、任意の要素に適用できる。
また:linkと:visitedは、:hoverや:activeなどに対して排他的である。したがって、:hoverの後に:linkなどを書いてしまうとスタイルの設定が上書きされてしまい効果が出ない。注意が必要である。
ある要素中に、複数の同じ子供要素が存在する場合、その最初の子供要素にのみマッチさせる疑似クラスである。
例えば、div要素中に複数のp要素がある場合で、最初のp要素にだけマッチさせることができる。
div > p:first-child { color:red }
こうして、次の(X)HTMLを表示させれば、1行目のみに影響する。
<div>
<p>最初の文章</p>
<p>次の文章</p>
</div>
lang属性を疑似クラスとして用いるもの。
属性セレクターを用いるものと等価の働きをするが、より読みやすいと見込まれる。
以下は等価である。
p:lang(en) { font-style: italic }
p[lang="en"] { font-style: italic }
文書構造中の、特定箇所に影響を及ぼす方法を提供する機構である。
CSS2までは疑似クラスと同様にコロン一つで区切るが、CSS3では疑似クラスと区別するため、例えば:beforeではなく::beforeとコロンを2つ付けることになった。IE以外の主要ブラウザーの全てで対応するが、IEのみIE8でも未対応。以下はコロン一つで説明する。
CSS1から存在するのが、この二つの疑似要素である。
全ての要素に使えるわけではなく、ある程度の制限を受ける。また、指定可能なプロパティも制限がある。
CSS2から追加された。IEではIE8以降でないと対応していない。
要素の直前・直後に挿入するための機能である。挿入内容はcontentプロパティなどに記述するが、この疑似要素を使った場合はいくつかのプロパティに制限がかかる。
abbr:after { content: "(" attr(title) ")"; }
このスタイルで次の(X)HTMLを表示すると、
<abbr title="ワールド・ワイド・ウェブ">WWW</abbr>
次のようにレンダリングされる。
WWW(ワールド・ワイド・ウェブ)
CSSに関連する技術に、次のようなものがある。
コメントなどを投稿するフォームは、日本語対応時のみ表示されます
通信用語の基礎知識検索システム WDIC Explorer Version 7.04a (27-May-2022)
スタイルシート
カスケード
