CSS の編集 その２。
06/04/12の話しの続き。
前回の設定だといろ×２マズイ部分もちらほら見つかったので（ι）、その辺を書き直しました。
@charset "euc-jp";
* {
margin:0px;
padding:0px;
overflow:auto;
border:0px none #ffffff;
font-style:normal;
font-weight:normal;
letter-spacing:0.1ex;
text-decoration:none;
}
body {
font:normal normal normal 1em/1.5em "MS PGothic","Hiragino Kaku Gothic Pro","Osaka",sans-serif;
}
…＜略＞…
.mainEntryBody p ,
.mainEntryMore p {
overflow:visible;
text-indent:1em;
}変更した部分だけ書き出すとこんな感じ。
現在のコードは .mainEntryBody p でもfontの設定を行なっていますが、でも親要素の div.mainEntryBody の方で変更（対象は主にfont-sizeとline-height）しているので実は必要無いです。フォントサイズを固定しない設定の場合、fontは出来るだけ最下位の要素で指定した方が良いんですが（この辺の理由は改めて後日書きましょ…）、当初の段階では記事領域部（div.mainEntryBody）以下に入る要素が特定できなかったんで親要素で指定しました。後は継承任せ。
それから、borderを消してあります。これで画像にborder="0"を指定しなくても、リンク設定時に外枠が付くのを防げます。
さて、その変更周りについてのお話し。前回の話しは、要約すると「*を利用してブラウザのCSSのデフォルトを上書きする」ってことでした。じゃ、前回の設定はどの辺がマズかったのか…つまり、ブラウザにとってCSSで「*」（全称セレクタ）はどんな意味を持つのか？を説明することになります。
ってコトで、折角なのでスクリーンショットを用意してみました。
これは Mozilla Firefox の拡張(Extension)の一つ、 FireBug を使って特定の要素の設定を検出(Inspect)したところです（クリックして拡大して見てください）。表示されているのは、（上ペインで）青枠の<strong>要素。下ペインがその適用（つまりCSSとして記述）されているスタイルと値ですね。
下ペインに表示されているスタイルで、font-weightやcolorはstrongに設定されたid「joinsite」をセレクタとして設定されたスタイルです。idはセレクタの中で１番強力に作用する（その代りページの中で常に単独でなくてはならず、一つのidはそのページの中で１回しか使ってはいけない）ので、その設定は他のセレクタよりも優先されます。
（余談ですが、上記セレクタは設定に困って急ごしらえしてしまったidでした ^^;）
それ以外の、paddingやtextに関する設定は「*」を参照していることがわかります。つまり「*」（全称セレクタ）で行なわれた記述は、idやclass（とその他カスケード）で設定の無いスタイルルール以外、全ての要素に適用されます。
ちなみに、全称セレクタ(Universal selector)は以下のようにセレクタ中で利用することも可能です。念のため。
div.honya p * {
text-decoration:underline;
}
div.honya p span {
text-decoration:none;
}これだと、「class="honya"のクラス属性をもつ<div>以下の<p>タグの、その内になる子要素には全てテキストに下線を入れる」コトになります。<p>の内側に入れられる要素は通常はインライン要素ですから、記述した<em>とか<q>とかにはことごとく下線が入ります。ただし、<span>については後の記述でtext-decorationを別に設定してるので、そちらが優先されます。
…と、“こんな使い方ができますよ”ってハナシでした。
閑話休題。
と、ここまで解説した上で前回の反省点。先のスクリーンショットで示した通り、全称セレクタを使うことと<body>など親要素に設定して継承を利用することの大きな違いは、全称セレクタ「*」は設定の無い子要素に対して強制的にそのスタイルルールを適用します。つまり、継承を無視しちゃうこともあるんですね。
ですから、「*」を利用してブラウザのデフォルトを上書きする場合、そのスタイルルールは（その時点のデザイン…及びテンプレートで）全ての要素に対して影響の少ない、言うなればあたり障りの無いものでないといけません（…当然のハナシですがι）。または、他に頻出するルールを宣言しておく事で、後の記述をまとめる…そう云った使い方がスマートである訳ですね。
そうして見返してみると、通常必要なセレクタには絶対記述のあるmargin・paddingは構わなく、またfont-style・font-variant・font-weightなども良いんですが、line-heightやfont-familyは…ι font-sizeについては“1em”って逃げ方はあるんですが、ウチは行間を少し大きめに取っているのでline-heightなんかは全ての要素に適用されるとちょっとおかしな事になっちゃうんですね。
ちなみに、overflowも一般的にautoが便利なのですが（特に<div>に対しては）、でも<p>に対してはvisibleの方が便利だったりする（領域サイズや文字サイズを完全に固定したレイアウトなら、hiddenの方が崩れにくいです。）ので、その辺も設定を追加。
（ついでに、IEだとトラックバックのアドレスを記した<input>にスクロールバーが付いて読めなくなる事も解ったのでその辺も上書き。IEはoverflowが独自仕様なので、visibleにしてやらないとマズい事が多々あり…ι）
とまぁ、そんなカンジで書き込んでますが…かなーりイイ加減ですねι それに、色々と不具合も確認してるんでまだ×２直さないと…(TДT)
セレクタに関しては、以下のサイトが詳しいです。
後日談。
もっとも、よく×２考えればfont-variantがデフォルトであることなんて凡そ無いので、これは別に「*」全称セレクタで指定する必要は無いよな…ってコトで修正。
