最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

:root

　:rootはルート要素にスタイルシートを適用するためのセレクタだ。ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしているがルート要素となる。

テキスト

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

※ と に注目

　これに対して、:rootで次のようにスタイルシートを指定すると、コンテンツ全体が黄色い罫線で囲んで表示される。さらにここでは、でマークアップしたbody要素を黄緑色の罫線で囲むように指定しており、body要素はルート要素の内側に表示されることがわかる。

図1（画像をクリックすると拡大します）

:root{
background-color: yellow;
}

body{
background-color: limegreen;
}

※ブラウザで表示を確認する

　なお、ルート要素とbody要素に背景関連のスタイルシートを指定した場合、条件によって背景の表示範囲が変わるため注意が必要だ。たとえば、次のサンプルではルート要素の背景色を黄色に、body要素の背景を黄緑色に指定している。この場合、ルート要素に指定した背景がブラウザ画面いっぱいに表示される。

図2（画像をクリックすると拡大します）

:root{
background-color: yellow;
}

body{
background-color: limegreen;
}

※ブラウザで表示を確認する

　一方、ルート要素に背景を指定せず、body要素にだけ背景を指定した場合は、次のようにbody要素の背景だけではなく、ブラウザ画面いっぱいに表示される。

図3（画像をクリックすると拡大します）

body{
background-color: limegreen;
}

※ブラウザで表示を確認する

:not(〜)