Jintrick.netagenda2001年04月アーカイブ → 2001年04月29日

自作ユーザースタイルシート

自作ユーザースタイルシート

超大作(笑)。なるほど自分で完全なスタイルシートを作ろうとしてみると、スタイルシートなど何も分かっていなかったことが判明します。意識が大幅に変わりました・・。

結構意外だったのが、<font> タグなどの物理マークアップも、完全に上書きする形でスタイルシートを適用できたことです。従って、字が小さくて見づらいという現象は、このスタイルシートを使っている限りもうあり得ません。万歳。

ユーザースタイルシート最大の利点

なんと言っても、リンクはリンク。引用は引用。頭文字は頭文字。等など、意味が良くわかることです。文書のデザインなんて、自分が最も見やすいようにするのが一番良いのは当たり前で、ウェブはそれが可能なメディアなんだということを実感できます。

色々なサイトに行くたびに、そこのデザインに慣れなければならず、そのストレスは結構胃に来ます。特に自分でサイトデザインをするようになってからは、内容を吟味する前に、デザインの各所に突っ込みを入れたなって、なかなか集中できませんでした。

無駄無駄無駄無駄ぁ!

暗い背景

真っ先に対策したのがこれです(個人的に大嫌い)。結果は大勝利。全てのサイトの背景色を、淡い藤色にすることができました。文字色は黒。見やすくて大満足。ちなみに背景画像は、ローカルディスクから読み込んでいます。無駄なダウンロード時間がなくなりました。

テーブルレイアウト

テーブルレイアウトでの小さい文字詰め込みも、ユーザースタイルシートの前には無意味です。テーブル擬似インデントも無効。広々とした雰囲気になります。ただ、テーブルで画像を整形してしかもそれに依存したレイアウトには、負けることがあります(返って見づらくなる)。画像恐るべし。

フォントタグ

制御は成功しています。色指定されようが、サイズ指定されようが、すべて黒、サイズはブラウザのデフォルト(変更可能)に。強調の代わりに使っている場合の対策として、薄い下線をつけました。従ってをかしなサイトでは、文がすべて下線付きになることも(笑)。

問題は、このタグを使って見出しを表現しているサイトです。弱冠見づらくなることがあります。

BGM 系

大敗北・・。要素を非表示にすれば、音楽も消えるだろうと思ったのが大間違い。思惑とは裏腹に、音楽は流れ、ただ単に制御不能になっただけでした(大笑い)。

嫌な BGM は、proxomitron で消しましょう。結構好きな MIDI もあるので、返ってこの方が良いかも知れません。切り替え簡単ですからね。

フレーム

どうしろっていうんですか(謎)。

点滅

そもそも、ユーザースタイルシートは基本的に InternetExplorer でしか使えません。そしてこのブラウザは点滅(笑)をサポートしてませんから、初めから問題外です。

尚、Javascript を使って点滅させている所は、高い確率でボクは二度と閲覧しません(内容的にも)。というわけで問題ありません。

流れる文字

これも、今のところ負け。マイクロソフトは、スクロールバーの色なんかのプロパティを定義するくらいなら、流れる文字の方を先に考えてくれたまえ(何様)。というわけで、proxomitron で、<small> タグに差し替えています。わざわざ見づらくしているという、作者の意図を尊重してみました・・・。

尚、Javascript を使って文字を流している所は、高い確率で(以下略)。

その他

他のタグ(というか要素)のスタイルは全て完全に制御できました。引用を表すタグを、インデントに使っているサイトは、引用ばかりになってしまいますが、コンテキストで分かることが多いので気にしていません。

Yahoo! Japan

まあ、このサイトがまともに読めないようでは、使い物にならない気がします。というわけで、恐る恐る覗いてみたところ、それなりに見やすくなりました(当社比)。スクリーンショット(36kb)

・・と思ったら、<p> で改行というお約束の為、変な位置でインデントが生じていたり、セルが重なってしまったり不具合が発生。後者はこちらの設定の仕方(width:100%)も問題ありました。

Yahoo!対策

ほとんどのポータルサイトは、Yahoo!とほぼ同様の物理マークアップを行っています。従って、Yahoo!対策としてのスタイル設定を追加することは、色々応用が効くと考えました。

  1. まず、テーブルの中の p 要素は左右マージンをゼロにしました。テーブルの中に p 要素を入れるのは、不正なインデントを狙ったとき以外にはあまりありませんから、別段問題にはならないでしょう。というわけで、テーブルの中のほとんどのブロック要素の左右マージンもゼロにしてみました。お尻Pも、テーブルの中でならば許可したわけです(笑)。

  2. 一部、アンカー要素の中に他のインライン要素を使用しているため、リンクの色が変わってしまうことがあります。これは他の物理マークアップサイトにも多く見られたため、これの対策をしました。

  3. ブロック要素の幅指定は、% でなく auto にしてブラウザに任せました。自分で設定すると重なってしまったりするので。

改善後のスクリーンショット


webmaster@jintrick.net
公開: 2001年04月29日
カテゴリ: CSS ,ブラウジング