スタイルシートの設計法:余談

気をつけること

スタイルシートには一括設定が出来る、簡略化プロパティがあります(fontとかbackgroundとかborderとか)これを利用する事はまったく問題ないのですが。これを利用するときに気をつけることは

関連のプロパティは総て初期値にリセットされ、それから指定された値を割り当てなおされます。

つまり

border:solid 2px;

みたいに色の設定を抜かして書くと、実際には

border:solid 2px #(デフォルトのボーダー色);

と書いた事と同じ事になって、ボーダーの色がデフォルトの色(黒色が多い)が呼び出されます

標準ではそうなっているのですが、(何故か)実際の処理は、ブラウザごとに違っていたりするので最初は気づかない場合も多いのですが、多くのブラウザで意図した通りに表示させるためには

border-style:solid; /* 縁の種類だけ上書き */

border-width:2px; /* 縁の太さだけ上書き */

と書いて設定を正しく上書きする必要があります。(面倒臭いという方もおられると思われますが)

CSSは最初のCSS level1から始まって、CSS2、まだ策定されたばかりで、ほとんど実装されていませんがCSS3と各種類が存在します。

各CSSは下のレベルとほぼ完全な下位互換をもっているので、css2対応ブラウザは、CSS1で書かれたスタイルシートを完全に処理しますが、逆はそうはいきません

しかし、悲しいかな、スタイルシートにはバージョンを明らかにする方法がなかったりします。

だからといって、完全分離が出来ないわけではありません。スタイルシートは完全な形で実装するように決められていますから、CSS1完全対応ブラウザ用、CSS2完全対応ブラウザ用にデフォルトのシートを作って

と書いて読み込ませれば、@import "default_css2.css";という書き方は、CSS2の規格なので、CSS1しか扱えないブラウザはコレを読み込まないので、CSS1での表示のページに、CSS2対応ブラウザはCSS1の設定を完全に上書きして表示します…。理想論では…。

一応、メディア規則を書き足して

@import url("css1設定のシート") all; /* IE6でも処理できないで無視されます */

とすれば、現在のIEは読み込みませんし、ブラウザのバグ等を有効利用すれば、底々「読ませる」、「読ませない」の差別化は出来ますが…。

世の中のブラウザが、スタイルシートを中途半端に実装するのなんて当たり前なので、結局は諦めて、対応ブラウザを決めたら、それに合わせてスタイルシートを書いていくしかないと思っています。

Personnelの実装レベル判別手段の欠如で同じ様なことが書いてあったりします。

さて、みなさんページをリニューアルするときって、スタイルシートの何処を弄りまわしますか？

自分なりの経験論なのですが、リニューアルの時には、スタイルシートを良く書き換える所があります

上から順に挙げると

結局は、色か画像に関する設定なんですよね…

これを利用して、楽が出来ないかと思って、自分なりに工夫したのが、色や、画像の設定を一カ所に集める事でした

これが、試してみて結構面白いくらいに上手くいきました、結構簡単に出来る割に効果のあるお勧めの方法ですので、できるだけ実行してみてください

と今まで設計の方法を長々と解説してまいりましたが、先ほども説明した通り、IEには３階層以上のスタイルシートを読み込まないと言う仕様がありまして、あまり階層を高く積むわけには行きません

実際に階層を高くすると、上の階層のスタイルシートほど、基本設定なのに、読み込みが最後の方になると言う弊害もあります(よって完全表示までに時間がかかる)

これを圧縮する方法は２つあるのですが、一つ目は、設定の共通部分を上手くまとめて@import文を並べること

２つ目は、表記法です

@import url("/css/document.css");

の様に、URLの最初に/を入れると、絶対パスとなって、rootのディレクトリを参照しますので、ファイルの読み込みをしやすくなります

同時に、絶対パスになっている分、いくらファイルを移動しても、同じ所を参照してくれますので２重にお得です

ただ、最大の欠点として、ローカルで使用すると、rootのパスがドライブの一番下の階層になってしまいますから、当然読み込みは行ってくれません

つまりはサーバーにupするまで表示確認できないんですよね‥

OSにApacheなり、なんらかのサーバー環境があるなら話は別なんですけどね