HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座
|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > スタイルシート(CSS)講座インデックス > 適用優先順位
様々なブックマークサービスがご利用頂けます。

マーク青適用優先順位

【 ユーザースタイルシートに関する適用優先順位 】　【 ホームページ製作者スタイルシートに関する適用優先順位 】
■ ユーザースタイルシートに関する適用優先順位
ホームページを閲覧する方(以降、ユーザー)は、下記 3種類のスタイルシートを選択して閲覧するWebページに適用させる事ができます。
  1. ホームページ製作者が設置するスタイルシート
  2. ユーザースタイルシート
  3. ブラウザスタイルシート
閲覧するホームページに適用されるスタイルシートの 優先順位 は、上記の番号順になります。( 1 が最も優先。)
ユーザースタイルシートに関しては、特に指定しなければ、ブラウザのスタイルシートが適用されており、製作者がスタイルを指定していなければ、ブラウザのスタイルシートが適用され表示されています。
■ !important
ユーザースタイルシートの指定に、!important を記述することにより、ユーザースタイルシートの優先順位を強制的に最上位へ位置する事ができます。
また、後述の製作者スタイルシートの適用優先順位を強制的に上げる役割も担いますが、フォントサイズや、フォントスタイル、カラー関連、行間など、ユーザーがホームページを閲覧する上で、ユーザーが自由にならないと不便なスタイルに関しては、 製作者は !important 指定をしない事をお勧めします。
ソース  ユーザースタイルシートの指定方法
*{ line-height: 1.8 !important; font-size: 16px !important; }
各プロパティの値の後ろに 半角スペース を設け、!important を記述します。
指定したい CSS を Windows ならメモ帳で記述し、style.css など、名前と拡張子をつけ、デスクトップ等に保存します。
Internet Explorer の場合、『 ツール 』 ⇒ 『 インターネットオプション 』 ⇒ 『 ユーザー補助 』で 『 自分のスタイルシートでドキュメントの書式を設定する(D) 』 にチェックを入れ、先に保存したスタイルシートファイルを参照して指定し、『 OK 』 ⇒ 『 OK 』で、設定完了です。
チェックボックスを外し、OK ボタンを押せば、また元の表示 ( ブラウザのデフォルトスタイルシートの表示 ) に戻ります。

■ ホームページ製作者スタイルシートに関する適用優先順位
前述の適用優先順位は、ユーザ ( 閲覧者 ) 側から、スタイルシートの 適用優先順位 を説明しました。以降、製作者スタイルシート内でのスタイル適用の優先順位を説明しますので、混同しないようにご注意下さい。
■ スタイルシートの記述方法による適用優先順位
スタイルシートの記述方法は
  • 外部スタイルシート
  • hade要素内に記述するスタイルシート
  • style属性で、要素に記述するスタイルシート
上記、3通りの記述方法があります。
スタイルシートの記述方法による適用優先順位は、外部スタイルシートは、head要素内に記述されるスタイルシートに上書きされ、head要素内に記述されるスタイルシートは、要素に記述するスタイルシートに上書きされ適用されます。
優先度　低い >> 高い

外部スタイルシート >> head要素内に記述するスタイルシート >> style属性で要素に記述するスタイルシート

ソース  ソース( 外部スタイルシート )
div { color : red ; }
ソース  ソース( hade要素内に記述するスタイルシート )
<style type="text/css">
<!--
div { color : blue ; }
-->
</style>
ソース  ソース( body要素内 )
<div>テキスト</div>
表示  表　示
さらに、同じ文書で、body要素内の div要素に直接スタイルを記述しますと
ソース  ソース( 要素に記述するスタイルシート )
<div style="color : green ; ">テキスト</div>
表示  表　示
■ 記述の順序における優先順位
外部スタイルシートや、had要素内に記述するスタイルシートでは、後述された指定が優先されます。
ソース  ソース
<style type="text/css">
<!--
div {
color : blue ;
color : red ;
}
-->
</style>
表示  表　示
■ セレクタの具体性による優先順位
要素のみのセレクタ指定よりも、特定要素の子要素として記述した場合や、id属性やclass属性で区分けをして記述した場合の指定の方が優先され適用されます。
ソース  ソース
<style type="text/css">
<!--
body div { color : red ; }
div { color : blue ; }
-->
</style>
表示  表　示
また、id属性、class属性で区分けのある指定が優先されます。
ソース  ソース
<style type="text/css">
<!--
body div { color : red ; }
body div#colorblue { color : blue ; }
-->
</style>
表示  表　示
特定要素の子要素と記述した場合と id属性や、class属性で区分けのある指定の場合は、id属性、class属性で区分けのある指定が優先されます。

(C) いまさらHTML CSS講座 2002-2008 All right reserved