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