全称セレクタ

TOPページに戻る > CSS

スポンサード リンク

全称セレクタ

全ての要素にスタイルを設定することができます
スタイルの初期設定、または、初期化に役立ちます

htmlの要素は、cssでスタイルを指定していない場合はブラウザの設定値でスタイルが設定されます
ブラウザがデザインする要素にはスペースが空いたり、文字が太字、斜体になったりします
これを防止するために、全称セレクタはブラウザのデザインに上書きして初期化するのに使えます
対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

ブラウザがデザインする要素

例.
ブラウザが設定するスタイル cssで設定されてない場合にブラウザがスタイルを決定する要素
margin、padding body, dl, dt, dd, ul, ol, li, h1, h2, h2, h3, h5, h6, pre, form, input, textarea, p, blockquote
文字が太字、斜体 address, caption, cite, code, dfn, em, strong, th, var
下線が表示 a, ins
文字が大きい h1, h2, h3, big
等幅フォント tt, var, code, pre


使い方(書式)

* { プロパティ : 値; }
/* 要素名なしでが一致した要素にスタイルを適用 */


おすすめの初期化3種類

* {
 margin: 0;  /* 外側の余白を0に初期化 */
 padding: 0; /* 内側の余白を0に初期化 */
}
/* 上が一般的な初期化 */



* {
 margin: 0;  /* 外側の余白を0に初期化 */
 padding: 0; /* 内側の余白を0に初期化 */
 font-style: normal;  /* 文字のスタイルを初期化 */
 font-weight: normal; /* 文字が太字になる要素をnormalに初期化 */
 font-size: 100%;     /* 文字の大きさ初期化 */
}
/* font-style、font-weight、font-sizeの初期化は状況に合わせて行ってください */


* {
 margin: 0;  /* 外側の余白を0に初期化 */
 padding: 0; /* 内側の余白を0に初期化 */
 line-height:140%;              /* 行の高さを指定 */
 color:#333;                    /* 文字の色を少し薄めに変更 */
 font-family:Arial, sans-serif; /* 文字の書体を変更 */
 font-size:0.9em;        /* 文字の大きさ変更 */
}
/* もう一つおすすめの初期化、文字の大きさや行間は好みで変えてください */

img {
 border:0;/* 画像の枠線を消す */
}
/* 番外編 全称セレクタではないですがimg要素の枠線も初期化しておきたい場合があります */

最初に要素の指定、その要素の属性を[ ]で囲んでスタイルを適用する要素を指定

優先順位

※全称セレクタは、0ポイントです
cssファイルの上のほうに全称セレクタで初期化しておいて、後から要素のスタイルを上書きできます
* {
 margin: 0;  /* 外側の余白を0に初期化 */
 padding: 0; /* 内側の余白を0に初期化 */
}
/* 最初に初期化して後からスタイルを変更、優先順位のポイントは0ポイント */

p {
 margin: 5px;  /* 外側の余白を5pxに変更 */
 padding: 5px; /* 内側の余白を5pxに変更 */
}
/* 全てのセレクタで上書きできます 要素だけでも1ポイントでこちらが優先されます */



※ポイント一覧表

idセレクタ 100ポイント
class、擬似クラス、属性セレクタ、id以外のセレクタ 10ポイント
要素のみ(要素2個だと2ポイント)、擬似要素 1ポイント
全称セレクタ 0ポイント




(C)2012 ホームページ作成無料