ブラウザ対応順に並べたスタイルシート(css)学習辞典。ブラウザ対応で苦しんでいる人のために作られた辞典。
辞典の索引＞優先度１＞１の例外＞優先度２＞優先度３＞優先度４＞優先度５
ブラウザ対応順に並べたスタイルシート(css)学習辞典。ブラウザ対応で苦しんでいる人のために作られた辞典。
スタイルシートが分からなくて、初めての方は「スタイルシートの基礎知識」
一括でダウンロードしたい方は、次の圧縮版をどうぞ。LZH形式で圧縮しています。＞＞css42.lzh。LZH形式だと困る方は、代わりの形式（zip形式とtar.gz形式）を用意しています。（css42.zipあるいはcss42.tgz）
アドレス（URL）が変更しました。旧アドレスは来年の2004年1月末に削除される予定ですので、大変お手数ですが、リンクをされている方は修正をお願いします。
2003年9月1日から辞典のアドレスが変わります。「http://dhr.tipod.co.jp/....」が、新しく「http://dhr.at.infoseek.co.jp/....」に変更します。なお、旧アドレスにアクセスしますと、自動的に新アドレスになります。
バージョン4.3となりました。詳しくは更新履歴をご覧下さい。
バグなどを調べたいときには、次のページへ＞＞「スタイルシート（ＣＳＳ）のトラブル、バグ集」
ABC順で調べたいときには、次のページへ＞＞「ABC順索引（スタイルシートcss学習辞典）」
目的別に調べたいときには、次のページへ＞＞「イメージ探索（スタイルシートcss学習辞典）」（画像付きなので、表示が遅くなります）
上から順に学ぶのが無難です。
ブラウザ対応順に並べていますが、要素によっては設定が無視されることがあります。特に、フォーム、リストに関する要素(form要素、ol要素、ul要素など）にはなかなか適用されにくいようです。そのほか、blockquote要素や、table要素も適用されにくいです。
ここの登場するブラウザの名前の尾につく数字は、そのブラウザのバージョン（本で言うところの第何版）です。
スタイルシートを使えば、誰でも、自由に、ホームページのデザインができます。HTMLの知識は必要ですが、意外と難しくありません。
HTMLの学習には、私が編集したHTML言語学習辞典が役に立つかも知れません。
ネットスケープ4.ｘをお使いの方へ：ブラウザの古いネットスケープ（ネットスケープ4.ｘ）をお使いの方だけは、javascript（ジャバスクリプト）を使えるようにしてください。やり方は、「編集>設定詳細>JavaScriptを有効にする」をチェックしてください。使えないように設定すると、スタイルシートが無視されます。
スタイルシートを使って、文字を赤くしてみよう
「例1」 <html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body>（省略）</body> </html>
.medatu{ color : red}<html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <div class="medatu">赤色で目立つ</div> </body> </html>
「例3」
CSS（sample.css)では
.medatu{color : white; background-color : red}
HTMLでは
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p class="medatu">1番目の赤</p>
<p class="medatu">&2番目の赤lt;/p>
<p class="medatu">3番目の赤</p>
</body>
</html>
「例4」
CSS（sample.css)では
p{color : white; background-color : red}
HTMLでは
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p>1番目の赤</p>
<p>2番目の赤</p>
<p>3番目の赤</p>
</body>
</html>
「p.medatu」というようにすると、p要素のclass属性に「medatu」と書いてあるものだけ、スタイルシートを適用できます。
body要素に適用させると（body{color : white; background-color : red}）、一面全体の背景に色が付けられます。文書全体にスタイルシートを適用させたいときなどは、body要素に適用させると良いでしょう。
また、全ての要素にスタイルシートを用いたいときには、「*」をセレクタに書きます。ですから、「.medatu」は「*.medatu」と同じだと言えます。
「例5」
CSS（sample.css)では
#medatu{color : white; background-color : red}
HTMLでは
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p id="medatu">赤色で目立つ</p>
</body>
</html>
id属性とclass属性の決定的な違いは、一つの文書内で、class属性は何度でも同じ値を使えるのに対し、id属性は同じ値を使えないと言う制限の問題です。
例えば、 <p id="medatu"> <p id="medatu"> は同じ「aka」を使っているので、ダメです。 以下は許されています。 <p class="medatu"> <p class="medatu">
学校にたとえると、class属性はクラス（1年1組）、id属性は名前（山田太郎）と言ったところでしょうか。class属性は便利で、よく使われます。id属性には他にも用途がありまして、name属性の代わりをしたりします。
ところで、「medatu」とありますが、アルファベットならば「aaa」でも何でも構いせん。あなたの好きな言葉を書いてください。ただし、気を付けなければならないのは数字やハイフン（-)で書き始めることです。「f1」はいいのですが、「1f」ではダメです。仕様で禁じられています。
さて、作り方を見てみると、書き方は次のような決まりがあることが分かります。
.medatu { color : red}
セレクタ { プロパティ : 値 }または、セレクタ{ プロパティ : 値 ; プロパティ ： 値}
作り方に書かれてある「.medatu」や「#medatu」など、「.class属性の内容」や「#id属性の内容」はセレクタ、「background-color」や「color」はプロパティ、「red」などは値に当たります。この辞書ではセレクタとプロパティと値について説明しています。さっそく、優先度1からお読み下さい。
スタイルシートが初耳だという方は
＞＞第九話の６章「スタイルシートって何？」をお読みください。
HTMLについて、初耳だという方は第９話「HTMLとは何か」をお読み下さい。
優先度はどれだけ学んで欲しいかを指します。ただし、ブラウザ対応については、保証しませんのであしからず。
優先度の基準により、重複して登場するプロパティが登場します。ご了承下さい。
優先度１＞優先度２＞優先度３＞優先度４＞優先度５
| 優先度１ | 優先度２ | 優先度３ | 優先度４ | 優先度５ | |
|---|---|---|---|---|---|
| インターネットエクスプローラー対応 | 3.0か4.0以降 | インターネットエクスプローラー4.0以降かあるいはネットスケープ4.0以降か、どちらか一方 | 5.5（対応していない場合もあり） | なし | ？ |
| ネットスケープ対応 | 4.0 | 6.0 | なし | ？ | |
| オペラ対応 | 6.0以降 | 6.0以降（バグについては未確認） | 同右 | なし | ? |
| CSS2 | ○ | ○ | ○ | ○ | × |
スタイルシートはできるだけW3Cと言う機関の「CSS2(http://www.w3.org/TR/REC-CSS2)」の規格に従っていますが、全てを網羅しているわけではありません。というのは、まだまだ、ブラウザ（音声とかはまだ先のことと思われる）が対応していないためで、この学習辞典では除いた方がいいと思われるからです。
CSS2(http://www.w3.org/TR/REC-CSS2)に関しては、英語版であるが、日本語訳があったのでそれを参考にした。以下のサイトにある。
＞＞「Empty Index（日本）」(http://www.fan.gr.jp/~kaz/index.html)
ブラウザ対応は、INDX DOT(http://www.blooberry.com/indexdot/css/supportkey)、または、ZSPC対応状況ガイド(http://www.zspc.com/documents/css2/index.html)、Web Reviewの「Style Sheet Refernce Guide Master Grid(http://www.webreview.com/style/css1/charts/mastergrid.shtml)」、とほほのスタイルシート入門における「CSSサポート状況一覧(http://tohoho.wakusei.ne.jp/wwwcss3.htm)」を参考にした。また、他にも、エラー報告の参考に「三日坊主++の部屋（http://east.portland.ne.jp/~sigekazu/index-j.htm）」と「『CSSバグ辞典スレッド』の要約（http://members.tripod.co.jp/cssbug/）」を資料に使った。ただ、確認できるところは自分で確認した。
さて、次のページから本編が始まります。
(辞典の索引＞優先度１＞１の例外＞優先度２＞優先度３＞優先度４＞優先度５)
私が作った他の学習辞典も、よろしければお使い下さい。「HTML学習辞典」、「SVG学習辞典」。
simple by dhr（Eメールでdhrname@mail.goo.ne.jp）
