YEAR OF THE CAT
Useful Cascading Style Sheets (CSS) samples
- このページについて
スタイルシートを使ってサイトをレイアウトする際に、文法が正しいかということ同様、或いはそれ以上に大事なのことは、ブラウザが、そのスタイルシートをサポートしているかどうかということです。
ここではブラウザのサポート状況と、複数のポピュラーなブラウザでも崩れないスタイルシートのサンプルを紹介しています。
主に検証したブラウザは次の通りです。WIN IE6, Firefox1, Netscape7, Opera7, MAC IE5、（リファレンスセクションのみ）Netscape4。 尚、文字コードは全てShift_JISです。文字コードをUTF-8などにしますと、ブラウザによっては1部、対応が異なることがあります。
- リストタグ SAMPLE
- リストタグを使ったナビゲーションのサンプルがあります。
ボーダーと背景色による装飾、背景に画像使用して装飾、テキストを 画像に置換、リストアイテムを横に並べる等をロールオーバーで変化させたサンプル があります。scriptを使用しない画像のロールオーバーもあります。
- 定義タグ SAMPLE
- 定義タグを使った、並列表記等のサンプルがあります。
- 段組レイアウト SAMPLE
- 段組レイアウトのサンプルとTIPSがあります。
2段組、3段組をfloatとpositionを使ってレイアウトするとき崩れないようにする為の注意事項、floatとpositionでレイアウトする時のメリット・デメリットとそれぞれのバリエーション・サンプルがあります。
スタイルシートのレイアウトは崩れるブラウザによって表示のされ方が違う等と思っている方は是非ご覧ください。
- 疑似フレーム SAMPLE
- 実際にはフレームを切らずに、CSSを使ってページを丸ごとをフレームを使っているかのように 偽装してみたいと思います。WinIE7リリースに合わせて追記あり 2005.10.05
- ルール REFERENCE
- 基本の書式と、記述方法、スタイルシートのインポートやメディアタイプについて等の基本事項。
CSSおける記述方法と、HTMLにおける要素位置による優先順位。CSSにおけるセレクタの指定による優先順位の計算方法 要素とセレクタによる優先順位、組み合わせサンプルがあります。記述方法によるブラウザの対応状況などもあります。
- プロパティ REFERENCE
- 視覚メディア・プロパティとその値の記述方法、初期値、対象になる要素について端折って纏めてあります。
- プロパティ サンプル有 REFERENCE
- 上記プロパティのサンプル有バージョンです。重いです。NN4では閲覧できません。
- セレクタ REFERENCE
- W3CのCSS2の仕様書にあるセレクタの書式について、ブラウザの対応状況を知る為に個人的目的で作ったページです。 仕様書に何が書いてあろうが、（将来どうなるかは置いて置いて）今現在ブラウザが対応していなければ、現状では意味が無いですから。 ということで、ここにはセレクタの簡単な説明とサンプルがあります
- モード REFERENCE
- 「標準モード」と「互換モード」では何が違うのかと、DOCTYPE宣言とブラウザ別の表示モードのサンプルがあります。
