スタイルシートの謎

HTMLにもだいぶ慣れてきたので、スタイルシートというものを齧り始めた。

特に恐れることもない。基本的にはHTMLと同じなのだ。HTMLよりも細かい設定が可能なので、使いこなすとかなり便利だ。

ちよっと前までは、レイアウトはテーブルでもいいか、と思っていた。古いブラウザではスタイルシートがうまく反映されないことがあると聞いていたからだ。

けれど、スタイルシートを使えば、同じレイアウトをたくさんのファイルに一度に適応できると知って、ぴぴっと反応してしまった。

例えば、左と右に適度な隙間を取って文章を表示させたい、という時。

テーブルでも、できなくはない。テーブルの横幅の表し方には大きく分けてふたつあって、ピクセルで直接大きさを指定するか、ブラウザの横幅のパーセントを指定するかのどちらかで、大きさを決められる。

つまり、全体の８０％の幅のテーブルにすれば、ブラウザの幅にかかわらず、八割の大きさのテーブルができるのだ。すなわち、必ず一割ずつ両横に隙間ができるわけだ。その中に文章を書いていき、テーブルの周りの線を消せばいい。

ただし、そうレイアウトしたいファイルに、すべてテーブルのタグを打ち込んでいかなければならない。それが、結構難しい。ちゃんとコピーしたつもりでも、どこか抜けていたりずれていたりして、一回で成功することは、まずない。その点、スタイルシートなら、<HEAD>と<／HEAD>で挟まれたところに、スタイルシートを参照するように書き込めばいい。記述は、至って簡単。

これをコピーするほうが、テーブルタグを入れ込んでいくよりはるかに間違いにくい。さらには、レイアウトを一度に変更することも可能だ。参照先のスタイルシートを変更すればいい。

例えば、最初のスタイルシートでは文字の色を茶色にしていた、としよう。P{color:chocolate}というやつだ。背景の色は灰色だった。{background:gray}である。それを、文字の色は白、背景を濃い緑にしたくなった。

テーブルだったなら、テーブルの中の色、文字の色を一枚一枚ひとつひとつ変えていかなければならない。それがまた、面倒だし、間違いのもとである。けれどスタイルシートなら、変えたいところ、つまり色を変えるだけ。chocolateをwhite、grayをgreenに。変更は一斉に参照され、ページの印象をがらりと変えることができる。

それに、スタイルシートはファイルに直に書き込むこともできる。同じく<HEAD>と<／HEAD>の中に書き込めばいいのだ。書き方はちょっと違う。<STYLE TYPE="text/css">と</STYLE>の中に、入れていけばいいのである。

・・とかなんとか、まるでスタイルシートマスターにでもなったみたいに言っているが、実はこんな失敗をした。

スタイルシートを、で囲むのは、スタイルシート未対応、あるいはスタイルシートを参照しない状態のブラウザで見た場合、中身が丸見えになってしまうからだった。

ちなみに、この記号は他にも使う。覚え書き用として使えるのだ。

一般的な使い方としては、作成した日付を入れておくこと。写真の裏に書く日付や名前、何年何月何日、どこそこにて、祖父と、とかいうやつである。画像の下にとか、とか、なんとか。何を書いても、ブラウザでは表示されない。

他には、タグだけでは、ぱっと見たときにどんな設定だったか分かりにくいことがある。marginとかcollpaddingに対して、とか、とか入れておくと、分かりやすくていい。

書いたときの率直な気持ち、なんていうのを入れるのも面白いかもしれない。例えば、ビジネス文で商品のＰＲ文を作成する。

「当社の製品は各方面でも高い評価を得ており、その信頼性は他の追随を許さないものがあります。当社の製品を利用させることで、御社のシステムの機能向上はもちろん、生産性の向上に伴って大きなコスト削減が計れることが期待されます。」

・・とか入力した後に、

なんていうのを入力しても、タグのおかげで見えない。ただし、ソースを見る、ということを誰かが知っていたら結局全部丸見えだから、そういうことは自分のハードの中だけのことにしておいた方がいいかもしれない。

私はそういうあれこれ余計なことは書かずに、素直にスタイルシートだけ入れた。

そして、NC（ネットスケープ）の4.7で動作確認。うまくいったうまくいった。

でも、Winで見たことは一度もなかった。イッターネット体験コーナー、というものを、生まれて初めて覗いてみた。そういうところにあるのは、やっぱりWin。で、見てみる。

・・あれ、いってない。反映されてないじゃないか。

Winだからかな。

おかしいなあ、と首を傾げながら帰ってきて、MacのIEで見てみる。

ありゃ。これもおかしいや。

ソースを開けて、まじまじと見る。

あっ。こんなところにこんなものが。

<!--ではなく、<!__になっていた。小さな間違い、けれど大きな間違い。直して、もう一度IEで。今度はうまくいった。Winでも確認。OK。

IEの方が、条件が厳しいらしい。それで、まずIEで確認してからNCで見ることにした。

IEで確認。できたできた。NC。・・・あれ?

さっきは大丈夫だったのに、どうして。しげしげ。あ、ここだ。TABLEのタグを閉じ忘れていた。ほんとに初歩的。

ちゃんと閉める。直った。

・・・でも、なんでIEではちゃんと表示できたのかな。閉じ忘れなのに。

まあいいや、ちゃんと閉めておくにこしたことはないから。

それにしても、分からない。IEは、NCより賢いのか、適当なのか、厳しいのか、どっちなのか。

しかも、NCでは反映されないスタイルシートが山ほどあるのにも気づいた。もう、どっちを基準にするかは、決められない。

便利だけれど、まだまだ謎が多い。それがスタイルシートである。