CSS (スタイル) - 通信用語の基礎知識

しかし古いInternet Exploror(具体的にはIE 5.5以前)などではパディングとボーダーを加算した分に対して影響を及ぼすという、おかしな実装になっている。このため、IE 5.5以前と、正規の仕様準拠の実装とで表示を合わせる場合、パディングとボーダーを0にする必要があるなど理不尽な制限が発生した。

記述方法

基本的な記述方法は、次の通り。

p { color: red; }

pはセレクター(選択子)と呼ばれ、スタイルを適用する範囲を示す。例ではp要素についてかかれているが、実際にはかなり複雑な指定も可能である。
{ }で囲まれた範囲を宣言ブロックといい、実際の宣言はここに書く。
セレクター(選択子)と宣言ブロックを合わせて、規則(rule)または規則集合(rule set)というが、規格内で呼称が一定していない。
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 … 訪問済みのリンク
:active … 訪問済みのリンク(CSS2)
:hover … ポイントされているが、アクティブではない要素(CSS2)
:focus … フォーカスを持っている要素(CSS2)

:linkと:visitedは a[href]要素にのみ利用できる。CSS2で追加された:activeは、任意の要素に適用できる。

また:linkと:visitedは、:hoverや:activeなどに対して排他的である。したがって、:hoverの後に:linkなどを書いてしまうとスタイルの設定が上書きされてしまい効果が出ない。注意が必要である。

:first-child 疑似クラス

ある要素中に、複数の同じ子供要素が存在する場合、その最初の子供要素にのみマッチさせる疑似クラスである。

例えば、div要素中に複数のp要素がある場合で、最初のp要素にだけマッチさせることができる。

div > p:first-child { color:red }

こうして、次の(X)HTMLを表示させれば、1行目のみに影響する。

<div>
    <p>最初の文章</p>
    <p>次の文章</p>
</div>

:lang() 疑似クラス

lang属性を疑似クラスとして用いるもの。

属性セレクターを用いるものと等価の働きをするが、より読みやすいと見込まれる。

以下は等価である。

p:lang(en) { font-style: italic }
p[lang="en"] { font-style: italic }

疑似要素

文書構造中の、特定箇所に影響を及ぼす方法を提供する機構である。

CSS2までは疑似クラスと同様にコロン一つで区切るが、CSS3では疑似クラスと区別するため、例えば:beforeではなく::beforeとコロンを2つ付けることになった。IE以外の主要ブラウザーの全てで対応するが、IEのみIE8でも未対応。以下はコロン一つで説明する。

:first-letter、:first-line 疑似要素

CSS1から存在するのが、この二つの疑似要素である。

:first-line … ブロック要素の一行目
:first-letter … ブロック要素の一文字目

全ての要素に使えるわけではなく、ある程度の制限を受ける。また、指定可能なプロパティも制限がある。

:before、:after 疑似要素

CSS2から追加された。IEではIE8以降でないと対応していない。

要素の直前・直後に挿入するための機能である。挿入内容はcontentプロパティなどに記述するが、この疑似要素を使った場合はいくつかのプロパティに制限がかかる。

abbr:after { content: "(" attr(title) ")"; }

このスタイルで次の(X)HTMLを表示すると、

<abbr title="ワールド・ワイド・ウェブ">WWW</abbr>

次のようにレンダリングされる。

WWW(ワールド・ワイド・ウェブ)

補足

関連する技術

CSSに関連する技術に、次のようなものがある。

リンク