スタイルシート貧弱薀蓄前途多難(１)(1999/08/14)
News TopPage Index BBS Meil Me

スタイルシートの、と言うかHTML全般に詳しいページ見っけ！　その名もとほほのWWW入門と言うHP。リファレンスあり、ウンチクあり、掲示板ありFAQありの素晴らしいところ。何より目玉は、ホームページを丸ごと書庫にしてあって、ダウンロードすればローカルディスクから閲覧できる事。

IE5のタグまである程度フォローしてある上、JavaScriptやCGIについても初歩的な事は完全に身につくんではないでせうか？　スタイルシート2段JavaScript初段の俺むけとも言えます(笑)

まぁJavaに関してはまだまだ未稿が多くありますが……関数名なんかは見れば何となく解りますからねェ。もっともJavaScriptに関してはこちらの、一撃必殺JavaScript日本語リファレンス と言うホームページのほうが内容がありまする。

以前はHTML All Tagと言うところでリファレンスしてたんですが、いつの間にやらサーバー自体がなくなってるらしいので……かなり困ってました。


で最近はスタイルシートを外部ファイルにおいて、全HTMLで共有するようになったのがトレンド。以前は各ファイルで<STYLE>タグを用いていたので、設定が固まるまでは同期が大変だったのです

弊害も出てきて、フォントの色や体裁を片っ端からスタイルシート化したものだから、ソースコードが見にくい見にくい(汗)　そこら中<SPAN>だらけだしクラス指定は一見してわかりにくいし……。そう言う意味では、やっぱり<FONT>をなくすのは惜しいと思ったりします。

でもAnother HTML-lint gatewayでは<FONT>とか<B>とか<DIV>までも「やめれ〜」とか言うの……しくしくしくしく。

とにかく、外部に置くと管理が楽です……が、無駄な部分が多くなれば読み込みに時間が掛かるようになる……？　キャッシュに入ってれば問題はないだろうけど。やり方は前述のとほほのWWW入門でスタイルシートのところを読んでください。

ちなみに、外部スタイルシート(普通は拡張子を.cssとするようだ)と内部で定める<STYLE>タグとでは、頭から解釈して後になるほうが優先するようです。確認済み。ただし、IE固有の動作かもしれませんが。


今のところ、こういう感じ。この文書自身のソースを見れば書いてある、default.cssと言うファイルの中身がこれ。 
.clAqua           {color:#0088FF}
.clBlack          {color:#000000}
.clBlue           {color:#0000FF}
.clDarkBlue       {color:#0000CC}
.clDarkGreen      {color:#009900}
.clDarkRed        {color:#CC0000}
.clGray           {color:#888888}
.clGreen          {color:#00CC00}
.clOrange         {color:#FF8800}
.clPink           {color:#FF88CC}
.clPurple         {color:#FF00FF}
.clRed            {color:#FF0000}
.clWhite          {color:#FFFFFF}
.clYellow         {color:#CCCC00}
.clAquaBold       {color:#0088FF; font-weight:bold}
.clBlackBold      {color:#000000; font-weight:bold}
.clBlueBold       {color:#0000FF; font-weight:bold}
.clDarkBlueBold   {color:#0000CC; font-weight:bold}
.clDarkGreenBold  {color:#009900; font-weight:bold}
.clDarkRedBold    {color:#CC0000; font-weight:bold}
.clGrayBold       {color:#888888; font-weight:bold}
.clGreenBold      {color:#00CC00; font-weight:bold}
.clOrangeBold     {color:#FF8800; font-weight:bold}
.clPinkBold       {color:#FF88CC; font-weight:bold}
.clPurpleBold     {color:#FF00FF; font-weight:bold}
.clRedBold        {color:#FF0000; font-weight:bold}
.clWhiteBold      {color:#FFFFFF; font-weight:bold}
.clYellowBold     {color:#CCCC00; font-weight:bold}

.fsFileName       {color:blue;    font-weight:bold}
.fsMenuItem       {               font-weight:bold; font-family:MS UI Gothic}
.fsMincho         {                                 font-family:ＭＳ 明朝}
.fsQuote          {color:gray;                      font-family:MS UI Gothic}
.fsQuoteSilver    {color:silver;                    font-family:MS UI Gothic}
.fsSongWord       {color:#8844CC;                                                                 font-style:italic}
.fsStringSmallEx  {                                                           font-size:x-small}
.fsStrong         {               font-weight:bold;                           font-size:large}
.fsStrongEx       {color:#CC0000; font-weight:bold; font-family:ＤＦＰ勘亭流; font-size:large}
.fsStrongLine     {               font-weight:bold;                                               text-decoration:underline}
.fsStrongLineUI   {               font-weight:bold; font-family:MS UI Gothic; font-size:large;    text-decoration:underline}
.fsSubTitle       {               font-weight:bold;                           font-size:medium;   text-decoration:underline}
.fsWhisperSub     {               font-weight:bold;                           font-size:xx-small; vertical-align:baseline}
.fsWhisperSuper   {               font-weight:bold;                           font-size:xx-small; vertical-align:super}
.fsX-LargeGo      {font-family:ＤＦＰまるもじ体W9,ＤＦＰまるもじ体W7,ＤＦＰまるもじ体W5,ＤＦＰまるもじ体W3; font-size:200%; font-style:qblique}

.taCenter      {text-align    :center}
.taLeft        {text-align    :left}
.taRight       {text-align    :right}
.taTop         {vertical-align:top}
.taMiddle      {vertical-align:middle}
.taBottom      {vertical-align:bottom}
.taCenterTop   {text-align    :center; vertical-align:top}
.taCenterMiddle{text-align    :center; vertical-align:middle}
.taCenterBottom{text-align    :center; vertical-align:bottom}
.taLeftTop     {text-align    :left;   vertical-align:top}
.taLeftMiddle  {text-align    :left;   vertical-align:middle}
.taLeftBottom  {text-align    :left;   vertical-align:bottom}
.taRightTop    {text-align    :right;  vertical-align:top}
.taRightMiddle {text-align    :right;  vertical-align:middle}
.taRightBottom {text-align    :right;  vertical-align:bottom}

BLOCKQUOTE   {color:#AAAAAA; font-weight:300}

HR.hrPage    {color:#FF9900}
HR.hrDivider {color:#66CC99; width:85%; height:1}
IMG.JumpIcon {border-style:none; width:80; height:20}
IMG.MenuIconL{border-style:none; width:32; height:32; vertical-align:middle; text-align:left}
IMG.MenuIconR{border-style:none; width:32; height:32; vertical-align:middle; text-align:right}
TABLE.Inner  {border-width:2; border-color:red; border-style:solid; font size:x-small; width:100%; height:100%}
こんな風になってて、Sorcererのユーザー定義ボタンに<SPAN CLASS="clDarkRedBold">とかなんとか登録してあるわけ。


これでもって、文法チェック に挑戦……うげっ！　マイナス以下でやんの……なんで？　あ、<IMG>タグのWIDTH属性とかHEIGHT属性とかをスタイルシートで設定したせいで減点が出るわけか……。まぁ確かにスタイルシート未対応のブラウザのためにも、と言う事であれば納得。でもそれ以外の部分がズタボロのような気がしますが？

それに匹敵する減点対象に、ID属性の重複指定のと言うのかありました。CLASS属性の代わりにID属性を使って、それらの組み合わせで体裁が指定できるようにと、着色関連をID属性で行うようにしたんですけど、ID属性用の識別子は一つの文書で一回しか使わないのが礼儀のようです。使ってもちゃんと表示できましたが……

<A>タグの間に、不要なスペースがあると減点ではないまでもワーニングが出ます……ほっとけ！(笑)　ちなみに解説によれば、いわゆる「宗教的」チェックだそうで。あ・そ。

他にも細かいチェックも修正して、実に下らないツッコミ以外は消滅！　現状で97点。残りの3点はカウンタCGIが行儀が悪いせい……何がと思った人はウチのトップページを調べさせれば良いでしょ。

<TH>タグのABBR属性って何だろう？　リファレンスでは見つからないのでABBR=""とだけして置いてワーニングを回避しましたけど気になりますゥ。

あとあれだね。<SPAN>タグのスタイルでtext-align属性が有効にならないのもむかつく。……まぁ文中用のタグだから、なのかも知れませんが、<DIV>タグと統一合しても良いような……

まぁいいか。

News TopPage Index BBS Meil Me