outsider reflex Cascading Style Sheets/List
汚いシートですが、何かの参考になれば幸いです。
ちなみに、シートは構造化エディタで編集しています。構造化エディタで開くとツリー表示になりますので、若干見やすくなるかもしれませんし、ならないかもしれません（どっちや）。
構造化エディタを CSS 編集に使うと便利！というのは僕だけの見解ではないようです。ちょと嬉しい。
表示は WinIE 5 と Mozilla(Netscape 6) を規準にしてます。 IE 4 と Opera は時々チェックしてますがあとは知りません。 CSS を正しく実装しているブラウザなら問題ないと思いたいのですが。
スタイル
Purple/Purple'
コンテンツごとにモジュール化しています。どれも「 common.css 」と組み合わせるのを前提にしていますので、単体では使えません。
「 Century Gothic 」「 Bimini 」フォントを使用しています。
Purple'(dash) は、背景の固定を無効にしてスクロールが軽くなるようにしたものです。
- common.css
- 全体で共通のスタイル
- top.css
- トップページ用スタイル
- main.css
- メインコンテンツ用スタイル
- sub.css
- サブコンテンツのスタイル
- purpleDash.css
- 「 Purple' 」用の部分修正
Purple Light
Purple の簡易版。 NN 4.x では強制的にこれが適用されます。
「 Century Gothic 」「 Bimini 」フォントを使用しています。
Orange
固定幅ブロックを使ったもの。ウィンドウや文字の大きさが変わるとアラが見えてきますねぇ。
工夫のポイントは address と h1 の利用方法。パネル上の背景の上端は<h1> の背景、下端は<address> の背景を繋げて表現してあります。
「 Lucida Console 」フォントを使用しています。
Flat
overflow を利用した疑似フレームというかなんというか。 Mozilla だとページ内のリンクが動作しませんのでご了承下さい。
height の指定に対応している必要があるので、 IE 5 以上必須。
Strict
Arial フォントを使用。 div, span, class, id 等に頼らないことを目標に書いています。基本的に body, hn, p などの要素だけで構成。 BoxView だと分からないので解説しておくと、画面右の紫色の余白は背景画像、左は body の 7em 幅 border というオチです。
アニメーション GIF を使い、アクティブなリンク文字列の背景が明滅するような効果を使っています。
Windows
MS-Windows の画面を真似てみました。完全にお遊びです。ベースは Win95 ？ 本文タイトルが異様に小さく表示されてしまうあたり、非常に間抜けですね（死）
System
- system.css
- 全スタイルで共通の部分をまとめたシート。
- print.css
- 印刷メディア用の部分修正。一部のナビゲーションと背景画像を非表示にします。
BoxView
- ShowElements-html4.css （ HTML 4 用）
- ShowElements-xhtml11.css （ XHTML 1.1 用）
ありみかさとみ氏の「エレメント構造表示ユーザースタイルシート」をベースに少し手を加えたものです。各スタイルのボックスモデルの使い方を見ることができます。
色の意味は以下の通り。インライン要素への border 指定や :before 疑似要素なども使っていますので、 IE 5.5/Netscape 6 以上でないとあまり役に立たないかもしれません。
要素の系統別に色分け表示されます。色と要素は以下のように対応。
- 赤の破線枠
- ブロックレベル要素
- 緑の破線枠
- インライン要素
- 緑のボックス
- br 要素
- 灰色の背景、灰色破線枠
- table のセル
- ピンクの背景
- 非推奨要素
- 赤の背景
- 仕様に存在しない要素（代表的なもの）
- 黄土色テキスト、黄土色破線枠
- :before, :after 疑似要素