私が現在使っているユーザースタイルシートです。順を追って解説していきます。
BODY{line-height: 1.4;font-size: 12pt;}
TABLE{line-height: 1.2;font-size: 10pt;}
まず基本となるBODYとTABLEへの指定です。BODYには私が普段エディタなどで利用しているのが12ptフォントを、レイアウトに利用されていたり、そうでなくても横幅を多くとる可能性の高いTABLEには10ptフォントを指定してあります。行間も無いと見づらいので取ってありますがTABLEの行間はやや狭くしました。
H1,H2,H3,H4,H5,H6{line-height: 1.1;font-weight: normal;}
H1{font-size: 400%;}
H2{font-size: 285%;}
H3{font-size: 220%;}
H4{font-size: 170%;}
H5{font-size: 130%;}
H6{font-size: 100%;}
見出しは本来、本文より目立たなければならないはずの部分です。ところがIE、NN共にH5やH6が本文よりも小さくなるという間抜けな仕様になっています。それに対処するため各見出しレベルごとにフォントサイズを指定してあるのです。
SMALL,BIG{font-size: 100%;}
FONT,BASEFONT{font-size: 100% !important;}
TT,CODE,SAMP,KBD,PRE{
font-size: 100%;
font-family: "ＭＳ ゴシック",monotype;
}
U{text-decoration: none;}
B{font-weight: normal;}
I{font-style: normal;}
まあ一部に論理マークアップ要素も含まれていたり、またSMALLやBIG、BやIはHTML4で禁止されているわけではないのですが、気にしないでいいです。
見ての通りほとんどフォントのサイズが変わらなくなっています。FONTやBASEFONTは!important指定をしないと有効にならなかったのですが、何故だか分かりません。等幅フォント系がいつも文字が一回り小さくなって見づらかったのでこれにもフォントサイズ指定をしています。U,B,Iに関してはもはやいう事は無いですね。全部普通の文字になります。
ここまで来てSとSTRIKEへの指定が無い事に気づいた人もいるかもしれません。まあ、確かにS,STRIKEも物理マークアップなのですが、さすがにこれを封じてしまうとどこが削除部分なのかが分からなくなるのが明らかなので見逃してあります。
SMALL,BIG{font-size: 100%;}
FONT,BASEFONT{font-size: 100% !important;}
TT,CODE,SAMP,KBD,PRE{
font-size: 100%;
font-family: "ＭＳ ゴシック",monotype;
}
FONT{
color:inherit !important;
}
Seamonkeyではinherit値が有効のためFONT要素による色変更も無視するように指定してあります。これで物理マークアップ要素はほぼ完璧に封じ込める事ができます。
H1 H1,H1 H2,H1 H3,H1 H4,H1 H5,H1 H6,
H2 H1,H2 H2,H2 H3,H2 H4,H2 H5,H2 H6,
H3 H1,H3 H2,H3 H3,H3 H4,H3 H5,H3 H6,
H4 H1,H4 H2,H4 H3,H4 H4,H4 H5,H4 H6,
H5 H1,H5 H2,H5 H3,H5 H4,H5 H5,H5 H6,
H6 H1,H5 H2,H6 H3,H6 H4,H6 H5,H6 H6,
H1 FONT,H2 FONT,H3 FONT,H4 FONT,H5 FONT,H6 FONT,
H1 BASEFONT,H2 BASEFONT,H3 BASEFONT,H4 BASEFONT,H5 BASEFONT,H6 BASEFONT
{font-size: 12pt !important;}
なんだかえらい事になっていますが。要は『Hn要素を閉じずに別のHn要素が始まった場合』と『Hn要素内でFONT,BASEFONTが使われた場合』にフォントを通常サイズに戻しています。世の中には見出しであるはずのHn要素をフォントサイズ変更や単に文字を太くするのに用いている場合があり、そういったリソースを見てしまうと非常に読みにくいため、こうした対策をとっています。特にHnを閉じてない時は最悪で、下に行くほど文字が大きくなるという恐ろしい事になっていました。
実のところこれでも完全な対策とは言いがたく、Hnを中途半端に閉じるとフォントサイズがおかしくなったりするのですが、それはまあ仕方が無いのかも知れません。そもそもHnが入れ子になっていると解釈してしまうIEが悪いとも言えなくはないです。
H1 FONT,H2 FONT,H3 FONT,H4 FONT,H5 FONT,H6 FONT,
H1 BASEFONT,H2 BASEFONT,H3 BASEFONT,H4 BASEFONT,H5 BASEFONT,H6 BASEFONT
{font-size: 12pt !important;}
IEと異なりHnを閉じずに書いても入れ子とは認識しないためずいぶんすっきりとした形になっています。実のところみんながHnを「見出し」として正しくマークアップしてくれていればこれすらもいらないのですが…
a:hover
{
text-decoration: underline !important;
color: #00ff00 !important;
background-color: #000000 !important;
}
a:hover font
{
color: #00ff00 !important;
}
a:hover img
{
border-color: #00ff00;
}
a:active
{
text-decoration: underline !important;
color: #ff0000 !important;
background-color: #ffffff !important;
}
a:active font
{
color: #ff0000 !important;
}
a:active img
{
border-color: #ff0000;
}
ここもちょっと苦労がありまして、Aの中にFONTで色指定が入っているとそっちが有効になってしまっていたのです。結局、子孫セレクタを利用して対策をとる事に成功しました。
実際にはCSS2のinherit値を使ってFONT{color: inherit;}とやれば本文中のFONT color指定と共に封じる事ができるのですが…残念ながらIEはまだinherit値が有効にならないようです。
A:hover{
text-decoration: underline !important;
color: #00ff00 !important;
background-color: #000000 !important;
}
A:hover img
{
border-color: #00ff00;
}
A:active,A:focus{
text-decoration: underline !important;
color: #ff0000 !important;
background-color: #ffffff !important;
}
A:active img,A:focus img
{
border-color: #ff0000;
}
inherit値が有効で、すでにFONTによる色指定を無視できているのでここはずいぶんすっきりできています。SeamonkeyはCSS2なのでfocusダイナミック擬似クラスでスタイルを指定しておかないとキーボードフォーカスで色が変わってくれません。はじめのうち、これをすっかり忘れていて、「Seamonkeyだとキーボードフォーカスが見にくくて嫌」などとわめいていました。情けない事です。
こんな偏屈なシートでも使いたいという方がいるかどうか分かりませんが一応ファイル本体を置いておきます。よかったら使ってみてください。
IE5.5用のシート。IE5でも多分使えると思いますが未確認です。
Netscape6/Mozilla Seamonkey用。ユーザースタイルシートの反映のさせ方はoutsider refrexのNetscape6をカスタマイズする方法を参照の事。
mystyle.cssを試すためにわざわざ作ったリソース。HTMLとしても（一応）valid。
文法エラー、独自タグなどを含んだ非validなリソース。（DOCTYPE宣言も無し）今のユーザースタイルシートでは未対応。