RYU's HOME P@GE

福島中年探検隊

スタイルシートについて

御斷り (2020-11-12): この文書は 2003 年 7 月に書いたものです。現在では事情が異なる點がある事をご承知ください。

CSS(Cascading Style Sheets)

ホームページビルダーなどの作成ソフトで作ると、主なブラウザでだいたい同じに見えます。それ、變ぢゃありません？見た目に關して動作の異なる（ CSS の實裝が異なる）ブラウザで、なぜ同じに見えるのでせうか。

と云ふ事で、ブラウザによって全く意圖通りに見えない繪の描き方を『閲覧者SSの思うこと・』で紹介されてゐましたので、それに基づき CSS を適當に書き直したものです。ちなみに許可を得てお借りしました。

閲覧者SSの思うこと・

CSS によるドット繪

さっそく出來上り（完成）圖からどうぞ。ただし CSS Level 2 のテーブル關聯のプロパティを實裝してゐない、または仕樣書通りに實裝してゐないブラウザでは表示されないか意圖したやうには描かれません。あらかじめご諒承下さい。NN 4.7、IE 5 やテキストブラウザ、音聲リーダーなどでは次のドット繪のためのリストは冗長ですのでスキップして下さい。

せーの、スキーッッップ！ ←（註）CSS2 を正しく實裝してゐる通稱モダンブラウザではナンノコッチャになります。

CSS の虎

この繪は位置情報を CSS のテーブル關聯のプロパティで制御することで、持ってゐる色情報を意味のあるように（つまり繪として）配置してゐます。飽くまでも 2003 年現在での状況です。2017 年の今なら SVG か何かでやった方が良い。

たぶん最大シェアの IE で上手く見えないと思ひますので、参考までに主なブラウザでのスクリーンショットを載せて措きます。 2003 年現在で比較的シェアの大きいブラウザです。實際には IE の寡占状態なのですが、さて措き、意圖通りに表現して呉れてゐるのは Mozilla 1.4 と Opera 7.11 ですね。

スクリーンショット: Mozilla 1.4 （19KB）; Opera 7.11 （21KB）; ^× IE 5.01 （11KB）; ^× NN 4.78 （10KB）

^※ 2017 年現在の MSIE 11 では意圖通りに再現されます。

外部 CSS ファイルはこちら

CSS2 を實裝しないブラウザでは「ちゃんと見えないからダメ」といふことではありません。それを言ふと畫像を再現しないブラウザでは、畫像だってちゃんと見えません。つまり「見えること」（見た目）はブラウザの都合に過ぎないのです。或は、閱覽者ごとに異なる環境の都合に過ぎません。これら都合に合はせ續ける爲には「たゆまぬ努力」（？）が必要です。ウェブ屋はそれが仕事なんですが、私のやうなグータラには無理、といふこと。ナンダソレ

傳へたい情報の本質は文章そのものであってマーク附けではない。ましてや CSS でも JavaScript でもない。

情報内容が同じだとしたら、ブラウザの實裝に合はせる爲にウェブページを作り直すなんて馬鹿馬鹿しい。そんな馬鹿馬鹿しいことを商賣にしてゐるウェブ屋は SEO だのユーザ體驗だのと、さも意義があるやうにやってゐるのです。

繪を表現すること

ブラウザ畫面上であらうと、ハード的なモニター上であらうと、繪の表現はすべて畫素（ピクセル）單位で行はれます。位置や色情報がピクセルに含まれてゐることにより、目視での繪になります。となると本來リストの要素（ LI、OL など）で表現しようとする繪は <li> が一つのドットに対応する訣ですから、データとして色情報などを書くべきでしょう。さうでないと、CSS が適用されない環境では、ダミー文字の羅列になってしまひます。

とはいへ色情報などのデータを羅列されても生身の人間にはナンノコッチャ解かりません。解かりませんがダミー文字を書くより遙かに汎用的です。 BMP 形式など畫像ファイルに置き換へることも可能だからです。畫像ファイルもバイナリエディタなどを使へば、データをテキスト出力できます。テキストが最も汎用的と言はれる所以です。

現實には

テキストの「ピクセル情報」が、スタイルシートを切り替へるだけで「繪」になって再現される。これは大變有意義なことですが、手間が掛り過ぎる上に今のところニーズが少ないのが最大の缺點かもしれません。それ以上に、現狀のブラウザのレンダリングエンジンは、さういふ用途を想定してゐないやうに思ひます。もちろん「現状のブラウザが實裝してゐないから」といふ理由は、理由になりませんけど。