スタイルシート　リファレンス

  @media print {
   BODY { font-size: 10pt }
  }
  

  @media screen {
      BODY { font-size: 12pt }
  }
   
  
  @media screen, print {
      BODY { line-height: 1.2 }
  }

2つ目が、上記の外部ファイルに記述したときの＜link＞タグの中に指定する方法。

3つ目が、上記の@importでスタイルを読込ませるときに指定する方法。

認識されるメディア･タイプ。　CSSでは閲覧する機器（デバイス）の種類ごとにメディア名が割り当てられています。　これはCSSの重要な未来ということで仕様書は公開されていますが、メディア･タイプについては目安となっています。　詳しくはこちらを参照http://www.w3.org/TR/REC-CSS2/media.htmlしてください。

メディア・タイプ名には下記のものがあります。: all: 全てのデバイス、aural: 音声ブラウザなど、braille: 点字出力、embossed: 点字用プリンタ、handheld: 白黒などの小さいモニタのデバイス（携帯電話など）、print: ページを印刷する場合 projection: プロジェクターなどの映写機 screen: カラーPC 、 tty: tv:

一部のメディア・タイプの指定方法は、Netscape4x、Win IE6、Mac IE等の一部のブラウザではサポートされません。詳しくはこちらの外部CSSパスの書方によるブラウザの対応を参照ください。

コメントアウト

「/* 」「　*/」で括る　/* 括られた、この部分は無視　*/

優先順位

!important　
【例】H1 { color:red ! important }

ユーザースタイルシートは使ったことがないので、そこまでする気はないです。ユーザースタイルシートを使いたい人はどうぞご自由にって事でしょうか。

▲ページ・トップ

優先順位

一つの要素に、複数の異なる属性値を指定した場合の優先順位。

CSSの記述場所による優先順位: 外部スタイルシートより、HTMLに直接記述した方が優先順位が高い。
HTMLに直接記述した場合、ヘッダーへの記述より、インラインで直接要素に記述した方が優先順位が高い。
要素に記述 > ヘッダーに記述 > 外部スタイルシート　
CSSにおける記述順番による優先順位: 外部スタイルシートやヘッダーに記述の場合で、一つの要素に、複数の異なる属性値を指定した場合は、後に記述（読込まれる）されたものが優先されます。; h2 { color : red }
h2 { color : black }; とスタイルが指定されていたら、h2要素の文字色は黒になります。
HTMLにおける要素の入れ子関係による優先順位: 文字色等のプロパティは、子要素または子孫要素は親要素を継承しますが、子要素または子孫要素の指定があれば、親要素の指定より優先されます。　親よりは子、子よりは、孫要素の指定が優先されます。; em { color : #c7f ; font-weight : bold; }
span { color: #f79; }
h1 { color : #fc0 ; }
p { color : #884 ; }
div { color : #000 ; }; とスタイルが指定されていたら、; <a href="base_sub1.html">インラインフレーム対応のブラウザですと、ここにHTMLにおける要素の入れ子関係のサンプルを表示しています。インラインフレーム未対応の方はここをクリックするとサンプルが見れます。戻るときはブラウザのバックボタンでお戻りください。</a>; より枝末な指定のemが最優先され、さらにspan、h1、p、と続きます。　これは、CSSにおける記述の順番における優先順位より優先します。; プロパティの継承の有無はこちらをご覧下さい。
セレクタでの指定における優先順位の計算方法: 全称セレクタ 0ポイント; 要素（要素をセレクタにしたもの） 1ポイント; クラス属性 10ポイント; ID属性 100ポイント; 合計したポイント数の高いセレクタの方が、優先順位も高くなります。; body p { color : orange ; }
p { color : green ; }; とスタイルが指定されていたら、; <a href="base_sub_body.html">インラインフレーム対応のブラウザですと、ここにセレクタでの指定における優先順位の計算方法のサンプルを表示しています。インラインフレーム未対応の方はここをクリックするとサンプルが見れます。戻るときはブラウザのバックボタンでお戻りください。</a>; body p の場合、要素が2つで、合計2ポイント
p の場合、要素が1つで、合計1ポイント; となり2ポイントの指定であるbody pが優先され文字色はオレンジとなります。このルールもCSSにおける記述の順番における優先順位より優先します。
要素とセレクタによる優先順位、組み合わせサンプル1: 一般的な指定より、限定的な指定が優先されます。; body { color : black } /* 1ポイント */
p { color : green } /* 1ポイント */
p.mystyle-1 { color : red } /* 11ポイント */
p#mystyle-2 { color : blue } /* 101ポイント */; とスタイルが指定されていたら、; <a href="base_sub.html">インラインフレーム対応のブラウザですと、ここに要素と属性　（セレクタ）　のサンプルを表示しています。インラインフレーム未対応の方はここをクリックするとサンプルが見れます。戻るときはブラウザのバックボタンでお戻りください。</a>
要素とセレクタによる優先順位、組み合わせサンプル2 …子孫（文脈）セレクタ…: 単独で記述された、タイプ要素に優先する。　下記の例は、h1要素の中のem要素に当てはまる。; h1 { color: #aa7; }
em { color: #black; }
h1 em { color: #f73; }; とスタイルが指定されていたら、; <a href="base_sub0.html">インラインフレーム対応のブラウザですと、ここに子孫（文脈）セレクタのサンプルを表示しています。インラインフレーム未対応の方はここをクリックするとサンプルが見れます。戻るときはブラウザのバックボタンでお戻りください。</a>; とh1 emの指定が優先され、文字色はオレンジで表示されますが、 h1とemがそれぞれ1ポイントなのに対し、h1 emは2ポイントと計算が成り立つ事もわかります。
要素とセレクタによる優先順位、組み合わせサンプル3: em { color : #c7f ; font-weight : bold; }
span { color: #f79; }
h1 { color : #fc0 ; }
p { color : #884 ; }
div { color : #000 ; }; 上のスタイルに; h1 span em { color : #cc0; }; とスタイルが追加した場合、; <a href="base_sub3.html">インラインフレーム対応のブラウザですと、ここに子孫（文脈）セレクタ　応用1のサンプルを表示しています。インラインフレーム未対応の方はここをクリックするとサンプルが見れます。戻るときはブラウザのバックボタンでお戻りください。</a>; とh1 span emにおける指定が優先されて表示されます。
要素とセレクタによる優先順位、組み合わせサンプル4: em { color : #c7f ; font-weight : bold; }
span { color: #f79; }
h1 { color : #fc0 ; }
p { color : #884 ; }
div { color : #000 ; }; 上のスタイルに; h1#cat em { color : #bcf ; }; とスタイルが追加した場合、; <a href="base_sub2.html">インラインフレーム対応のブラウザですと、ここに文脈セレクタ　応用2のサンプルを表示しています。インラインフレーム未対応の方はここをクリックするとサンプルが見れます。戻るときはブラウザのバックボタンでお戻りください。</a>; とh1#cat em における指定が優先されて表示されます。; また、上のスタイルに; h1#cat span em { color : blue ; }
h1#cat em { color : #bcf ; }; とスタイルが指定した場合、; h1#cat span em の場合、IDが1つに、要素が3つで、合計103ポイント
h1#cat em の場合、IDが1つに、要素が2つで、合計102ポイント; となり、103ポイントの h1#cat span em の指定が優先されます。
要素とセレクタによる優先順位、組み合わせサンプル5: em { color : #c7f ; font-weight : bold; }
span { color: #f79; }
h1 { color : #fc0 ; }
p { color : #884 ; }
div { color : #000 ; }; 上のスタイルに; .cat { color : red ; }; とスタイルが追加した場合、; <a href="base_sub4.html">インラインフレーム対応のブラウザですと、ここに文脈セレクタ　応用3のサンプルを表示しています。インラインフレーム未対応の方はここをクリックするとサンプルが見れます。戻るときはブラウザのバックボタンでお戻りください。</a>; .catのクラス属性を指定した要素h1とemのみ指定が反映され、h1の子要素であるspan要素に対しては、.catの指定は反映されません。; これはspan要素に対しても独自にスタイルが指定されているため、セレクタ詳細ポイントが高くても継承はされないためです。spanに対する指定がない場合は継承されます。

▲ページ・トップ

外部CSSパスの書方によるブラウザの対応

外部CSSパスの書方によって、ブラウザの対応状況が変わります。　逆に言えば、特定のブラウザにCSSを読み込ませない為に使うことも可能です。

下記の対応表の左の数字をクリックすると、該当の記述方法のサンプルファイルが別窓で開きます。　文字色が茶色になっていれば、お使いのCSSファイルが読み込まれていることになります。

	DOCTYPE	IE6	M	O7	N4	MI5	SFR
0	LINKタグにて外部CSSを読み込む。 <link rel="stylesheet" type="text/css" href="style.css">	○	○	○	○	○	○
1	LINKタグで、メディアタイプ"screen"を指定。 <link rel="stylesheet" type="text/css" media="screen" href="style.css">	○	○	○	×	○	○
2	外部CSSをimportさせる。HEAD部分に記述　その1 <style type="text/css"> @import "style.css" </style>	○	○	○	×	○	○
3	外部CSSをimportさせる。HEAD部分に記述　その2 <style type="text/css"> @import url("style.css"); </style>	○	○	○	×	○	○
4	外部CSSをimportさせる。メディアタイプ"screen"を指定 <style type="text/css"> @import "style.css" screen; </style>	×	○	○	×	×	○
5	外部CSSをimportさせる記述を、LINKされた外部スタイルシートに記述 <link rel="stylesheet" type="text/css" href="style.css"> @import url(foo.css);	○	○	○	×	×	○
6	Mac IEのみCSSを読ませる。 <style type="text/css">/\///@import "msiemac.css";/*/</style>	×	×	×	×	○	×

O7:opera7 M:firefox1, Netscape8, Mozilla1.7.8 MI5:MacIE5 SFR:Safari

携帯の対応について、全ての携帯での対応を調べるというのは、ほぼ不可能ですが、上記の表の1についていえば、2005年7月現在多くの携帯が対応していると思われます。2はPC用メディアをしているので携帯では当然反映されません（されないはずです）。　3以降の@importに対応している携帯は現在のところないと思われます。

携帯に外部スタイルシートを反映させたい場合は、1のLINKタグで、反映させたくない場合はメディアを指定する 2のやり方で記述するのが良いでしょう。

Mac IEのみCSSを読ませる。の説明

なぜ下記の記述をMac IEが読み込むのか？

CSS のコメントは「/*」で始まり、「*/」で終わる .
緑色の部分がコメント用の開始・終了タグになる。

正しく解釈すると次の様になる
<style type="text/css">/*\*/ /*/@import "msiemac.css";/**/</style>
最初のコメント/*\*/
2つ目のコメント/*/@import "msiemac.css";/**/
つまり、通常のブラウザは何も読み込まない。

MacIE は、コメント中のバックスラッシュ付記号をエスケープするので
<style type="text/css">/*\*//*/@import "msiemac.css";/**/</style>
最初のコメント/*\*//*/
コメントとならない部分@import "msiemac.css";
2つ目のコメント/**/

の様に解釈する。よって、MacIE のみが msiemac.css を読み込む。

WinIE6のみCSSを読ませる方法　その壱　Validな方法

WinIE6に読ませたいスタイルを通常通り指定。

WinIE6以外のブラウザに読ませたいスタイルは、
WinIE6が対応していないセレクタ (ブラウザ別対応表参照) 、例えば　「子供セレクタ　( E > F )、隣接セレクタ　( E + F )、ファーストチャイルド疑似クラス　 ( E:first-child )、言語疑似クラス　E:lang( c ) 」等を使い指定する。この時ポイントWIN IEが対応していないスタイルの指定のポイントの方が高くなるように注意してください。　

下記のようにbodyにランゲージ属性を指定する方法もあります。　この場合、WinIEではフォントサイズはx-small;で表示されますが、それ以外のブラウザではsmallで表示されます。文書型宣言でWinIE互換、モジラ系が標準となり、WinIEより文字サイズが一回り小さくなる時などにも使えます。

＜body lang="ja"＞
:lang(ja) p {font-size:x-small;}
p {font-size:small;}

また、bodyにIDを指定するやり方も出来ます。下記のように記述すれば、文字色はWinIe6では赤になり、その他のブラウザでは黒になります。

＜body id="ycat"＞
p { color : #f00 ; }
body[id=ycat] p { color : #000 ; }

WinIE7では、child, adjacent, attribute, first-child etc.等のセレクタも対応予定だそうです。　

WIN IEのみCSSを読ませる方法　その弐　アンダースコア・ハック(Underscore Hack)

上記の「その壱」に比べると正しくない記述方法ですが、次期WinIE7が、どのバグをどう修正するのか不明ですが、WinIE6までは、取りあえず便利で簡単なので紹介しておきます。（と言いますか、このページでも使っているので。。。）

プロパティの頭に「_」を付ける。
WIN IE以外のブラウザは正しく解釈して認識しませんが、WinIEのみ認識します。　例えば、下記のように記述するとWinIEでは幅がx-smallと解釈され、それ以外ではsmallと解釈されます。

例えば、

.style1{
    font-size:small;
    _font-size:x-small;
    }

記述の順番ですが、通常の指定、「_」を使った指定の順番で記述してください。　上記でも触れましたが、cssでは後に書かれた指定が優先します。通常の記述を「_」を使った記述の後に書くと指定はWinIEに置いても無視されます。

▲ページ・トップ