ユーザースタイルシートのススメ

ユーザースタイルシートとは

最終更新
2003-03-17T19:20:14+09:00

ユーザースタイルシートとは、ウェブページに被せるフィルターのようなものです。文字の色、サイズ、背景色など、細かな装飾を自分の好みに合わせることができます。InternetExplorer、Mozilla、Operaその他、最新のブラウザなら大抵使用できるようです。

どんな時に使うか

最終更新
更新はありません

WWWで調べ物をするときや、読み物系のページを閲覧する時に使います。完璧なユーザースタイルシートを用意しておけば、ほぼ全てのページを問題なく同じような配色で表示できます。

適切なユーザースタイルシートを使えば、次のような、ウェブページ閲覧に際してのストレスから解放されます。

  • 文字が小さくて読みづらい
  • 文字の色と、背景の色が似通っていて読みづらい
  • 文字の色と、背景の色とのコントラストが強すぎて目がチカチカする
  • 背景に画像を敷き詰めていて、文字が読めない
  • 隠しページが見つからない(リンクアンカーを色制御で隠している場合)
  • ページ左右のインデントをとっていないので、見づらい
  • 文章は面白いのだが、デザインが気に食わない(笑)
  • なぜかスクロールバーの色が変わってしまって、気になる
  • Internet Explorerで使用した場合、マイクロソフトHTMLヘルプが見やすくなる

その他

所謂フォント弄り系サイトの文章を読むのに適しています。それは何故か。彼らはfontタグによる物理マークアップしかしません(多分)。ユーザースタイルシートでfontタグの装飾を否定してやれば、著者の押し付けようとする「笑いのポイント」を隠すことができます。

ダウンロード

最終更新
2003-04-28T01:37:03+09:00

Internet Explorer6用

2003-03-19現在私が愛用している、Windows版Internet Explorer6用のユーザースタイルシートです。

情報ハンティングCSS(6kb) 2002-03-19完成

Opera6.0用

Style Sheet for Opera (10kb) 2001-12-10完成
2001-12-12
ブラケットの閉じ忘れを修正
2001-12-31
dtを入れ子にしている不正マークアップ(yahoo board)対策を施した
  • 新規windowを勝手に開かされるリンクは、(別窓)と表記させたりします。その他色々処理が介在しますので、コピーはソースから行うようにしてください。どちらにしろOperaは日本語のコピーに問題があるのでそうせざるを得ませんが。
  • 基本のfont-familyはsans-serifにしてありますので、Operaの設定でsans-serifのフォントを適当に選んでください。【File】→【Preference】→【Font and colors】

Internet Explorer5.5上用

Style Sheet for Readings (12kb)
2001-06-21更新、2001-12-10修正
Style Sheet for Netsurfing (13kb)
表示確認:IE5.5SP1、2003-04-28更新、参考画像
Style Sheet for W3C(13kb)
表示確認:IE5.5SP1、2003-04-28修正。W3C (英語)の仕様書を読むためにこしらえたものです。日本語を表示する際には不具合があるそうです。参考画像
MozillaやNetscape6でも使えるかもしれません。その際、overflowの指定を全て消去してください()。

これらは私が見易いように作ってありますので、このページが見辛いと感じる方には不向きです。誰にでも作れるので、自分で作ってみるのもいいかも知れませんが、適当に作ってしまうと閲覧するサイトのスタイルシートと競合してしまって、逆に読みにくくなることがあります。デザインのバランスも崩れて不快です。それで、結局使わない方が面倒がなくてよいというオチになることがあります。自作なさるなら徹底的に変えるか、ワンポイントを修正するものが良いかと思われます。

ブラウザ別使用方法

最終更新
2003-03-19T15:32:43+09:00
Opera6.0
【File】→【Preference】→【Page style】→【User mode】欄の【My style sheet】にチェックを入れ、【My style sheet】欄の【Choose】ボタンをクリック、適用したいスタイルシートを選択する(日本語パッチを当てている場合の各名称は異なるかも知れません)
Operaの場合、ユーザースタイルシートを使用することを強く推奨します。
InternetExplorer5/6 for Windows
【ツール】→【インターネットオプション】→【ユーザー補助】→【自分のスタイルシートでドキュメントの書式を設定する】にチェックを入れる→【参照】で適用したいスタイルシートを指定する→【OK】をクリックして完了
InternetExplorer4 for Windows
【表示】→【インターネットオプション】→【ユーザー補助】→【自分のスタイルシートでドキュメントの書式を設定する】にチェックを入れる→【参照】で適用したいスタイルシートを指定する→【OK】をクリックして完了
非推奨。
InternetExplorer5 for Macintosh
【編集】→【初期設定】→【Webコンテンツ】
無保証。
Netscap6
Mozilla における文書表示のカスタマイズに詳細が説明されています。

欠点

最終更新
更新はありません
  1. 全てのウェブサイトをほとんど同じデザインで表示します。そのため稀に誰のサイトだか分からなくなってしまうことがあります。
  2. Dynamic HTML とは非常に相性が悪いです。しかし調べ物や読書には不要の技術ですから、Javascript を切っておくことで対処できます。しかしそもそもクラスやIDを定義しないユーザースタイルシートと競合してしまうDynamic HTMLの書き方に問題があることに言及しておきます。 いや、そんなことは無いという気がしてきました(2001/7/19)

応用 - ウェブページ別にユーザースタイルシートを使い分ける

最終更新
2003-02-19T20:10:15+09:00
  • 複数のユーザースタイルシートを、ウェブページごとに自動的に使い分けたい
  • あるサイトが酷く読み辛いので、その(それらの)サイトにだけ自動的にユーザースタイルシートを適用させたい

これらの欲求は、Proxomitronを使うことで満たすことができます。

1. Web pageフィルタを用意する

  1. Proxomitronを起動し
  2. Web pageボタンをクリックし
  3. Newボタンを押して

次のようなFilterを作成します。

Filter Name
Apply my style sheet
URL Match
$LST(ApplyCSS)
Matching Expression
</title>
Replacement Text
</title>\r<link rel="stylesheet" href="\dstyle/myStyle.css" />\r

作成してOKボタンを押したら、チェックボックスにチェックを入れて有効化します。

\dstyle/myStyle.cssには、実際にはユーザースタイルシートのパスを記述します。

2. Block fileを用意する

テキストファイルを新規作成し、ApplyCSS.txtという名前で保存します。保存先は、Proxomitron本体(Proxomitron.exe)と同じフォルダ内にある「Lists」というフォルダ内が良いかと思います。

3. Block fileを登録する

  1. Proxomitronを起動します
  2. Configボタンを押します
  3. Blockfileタブを選択します
  4. Addボタンを押して、保存したBlock Fileを選択します

4. ウェブページをBlock fileに追加する

Block fileにウェブページのURLを追加することで、そのウェブページにユーザースタイルシートが埋め込まれるという寸法です。

  1. タスクバーのProxomitronアイコンを右クリックします
  2. Add to Blockfileをポイントします
  3. ApplyCSSを選択します
  4. 追加したいウェブページのURLを入力します
  5. OKボタンを押します

URLにはあらゆるワイルドカードが使えます。もとい使えるそうです。例えばGoogle内(同じドメイン)の全ての文書をBlock fileに追加するには、www.google.com/* とします。http://は必要ありません。改行して列挙します。例:

www.webweavertech.com/ovidiu/*
www.benhammersley.com/*
tantek.com/*
www.zeldman.com/*

注意点、欠点など

  • ウェブページがHTML文書でない場合は利用できません。尚、たとえContent-Typeがtext/htmlで送られてくるデータであっても、title要素のないものはHTML文書ではありません(Googleの検索結果等でURLがタイトルになっているアレです)。
  • Proxomitronを利用して埋め込んだものは、厳密にはユーザースタイルシートではありません。実質的に、ブラウザは制作者が用意したスタイルシートとして扱います。そのため、場合によっては制作者のスタイル指定に負けることが多くなる筈です(制作者のスタイル指定に負けない為の対策)。
  • 複数のスタイルシートを使い分けるには、同様にしてWeb pageフィルタとBlock fileを作成する必要があります。ちょっと面倒です。

制作者のスタイル指定に負けない為の対策

最終更新
2004-05-17T18:36:00+09:00

前節:応用 - ウェブページ別にユーザースタイルシートを使い分けるにて作成したウェブページのリスト、ApplyCSS.txt を、スタイルシート無効化フィルターに再利用すると、制作者側のスタイルシートを消しつつ、こちらのスタイルシートを適用することが出来ます。

  1. Proxomitronを起動し
  2. Web pageボタンをクリックし
  3. Newボタンを押して

次のようなフィルターを作成します。

Filter Name
Disable Author StyleSheets
URL Match
$LST(ApplyCSS)
Matching Expression
<link rel="stylesheet" *>|<style*</style>
Replacement Text

作成してOKボタンを押したら、チェックボックスにチェックを入れて有効化します。

参考

最終更新
更新はありません

ご自分で完全なユーザースタイルシートをおつくりになる場合、宜しければ以下の点を参考にしてみて下さい。

  1. テーブル内のp要素は、marginpaddingをゼロに指定(table p{ margin:0 !important; padding:0 !important }
  2. blockquote要素のpaddingはゼロに指定(blockquote{ padding:0 !important }
  3. ブロック要素は、widthautoに指定

これらはスタイルの競合に対処する際、少々苦労して見つけた指定です。

謝辞

最終更新
2003-04-28T01:40:19+09:00

記述ミスのご指摘、不具合のご報告など頂いております。有難うございました。