ウェブランサー

ユニバーサルセレクタ(全称セレクタ)

全てのHTML要素に対して、共通のスタイルを一括で指定する場合には、「ユニバーサルセレクタ(全称セレクタ)」というものを使用します。ブラウザに実装されているCSSのデフォルト設定は、それぞれ若干異なっている事があり、思わぬ所で不具合が生じる可能性があります。それを回避するためには、全称セレクタを使って一度全ての要素のデフォルト値を統一してから、必要に応じて各要素に改めてスタイルを指定していく必要があります。そのような場合に重宝するセレクタです。

ユニバーサルセレクタの指定方法

「ユニバーサルセレクタ(全称セレクタ)」は、ワイルドカード的な役割を果たす便利な記号です。記述は非常に簡単で記号一文字で表します。

*

このコメ印のような記号を「アスタリスク」と呼びます。このセレクタを使うと、同じ指定を全ての要素に一括で指定することができます。これでわざわざ要素ごとに同じ指定をしなくても済むというわけです。

画面全体にスタイルを指定する[body]と[*]は何処が違うの?という質問を見かけますが、[body]の場合は、子要素に対して継承することになっている値しか反映されません。そのため、無条件に全ての要素に対して同じスタイルを指定をしたい場合には[*]を使用します。

ユニバーサルセレクタの記述例

ここで全称セレクタでブラウザのデフォルト値をリセットするために、よく使われるプロパティのサンプルを記述してみましょう。コピーして自分のサイトに最適になるように、色々試してみて下さい。

CSS
* {
 font-size: 100%;
 font-weight: normal;
 font-style: normal;
 text-decoration: none;
 background: transparent;
 padding: 0px;
 margin: 0px;
}

CSSリファレンス

CSSって何? 初めての方はこちらからお読み下さい
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます