現在地 HOME > 掲示板
> ＩＴ5 > 365.html
★阿修羅♪
|
現在地 HOME > 掲示板
> ＩＴ5 > 365.html
★阿修羅♪
|
|
| Tweet |
(回答先: WinIEでは制限付きゾーンでもステータスバーの偽装が可能 投稿者 クエスチョン 日時 2004 年 4 月 07 日 19:21:59)
ユーザースタイルシートのススメ
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html
（2003-03-17）ユーザースタイルシートとは
（0000-00-00）どんな時に使うか
（2003-04-28）ダウンロード
（2003-03-19）ブラウザ別使用方法
（0000-00-00）欠点
（2003-02-19）応用 - ウェブページ別にユーザースタイルシートを使い分ける
（0000-00-00）参考
（2003-04-28）謝辞
（2002-08-19）関連リソース
ユーザースタイルシートとは
最終更新 2003-03-17T19:20:14+09:00
ユーザースタイルシートとは、ウェブページに被せるフィルターのようなものです。文字の色、サイズ、背景色など、細かな装飾を自分の好みに合わせることができます。InternetExplorer、Mozilla、Operaその他、最新のブラウザなら大抵使用できるようです。
この記事のURI参照
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#what
どんな時に使うか
最終更新 更新はありません
WWWで調べ物をするときや、読み物系のページを閲覧する時に使います。完璧なユーザースタイルシートを用意しておけば、ほぼ全てのページを問題なく同じような配色で表示できます。
適切なユーザースタイルシートを使えば、次のような、ウェブページ閲覧に際してのストレスから解放されます。
文字が小さくて読みづらい
文字の色と、背景の色が似通っていて読みづらい
文字の色と、背景の色とのコントラストが強すぎて目がチカチカする
背景に画像を敷き詰めていて、文字が読めない
隠しページが見つからない（リンクアンカーを色制御で隠している場合）
ページ左右のインデントをとっていないので、見づらい
文章は面白いのだが、デザインが気に食わない（笑）
なぜかスクロールバーの色が変わってしまって、気になる
Internet Explorerで使用した場合、マイクロソフトHTMLヘルプが見やすくなる
その他
所謂フォント弄り系サイトの文章を読むのに適しています。それは何故か。彼らはfontタグによる物理マークアップしかしません（多分）。ユーザースタイルシートでfontタグの装飾を否定してやれば、著者の押し付けようとする「笑いのポイント」を隠すことができます。
この記事のURI参照
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#when
ダウンロード
最終更新 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の指定を全て消去してください（※）。
これらは私が見易いように作ってありますので、このページが見辛いと感じる方には不向きです。誰にでも作れるので、自分で作ってみるのもいいかも知れませんが、適当に作ってしまうと閲覧するサイトのスタイルシートと競合してしまって、逆に読みにくくなることがあります。デザインのバランスも崩れて不快です。それで、結局使わない方が面倒がなくてよいというオチになることがあります。自作なさるなら徹底的に変えるか、ワンポイントを修正するものが良いかと思われます。
この記事のURI参照
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#where
ブラウザ別使用方法
最終更新 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 における文書表示のカスタマイズに詳細が説明されています。
この記事のURI参照
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#howto
欠点
最終更新 更新はありません
全てのウェブサイトをほとんど同じデザインで表示します。そのため稀に誰のサイトだか分からなくなってしまうことがあります。
Dynamic HTML とは非常に相性が悪いです。しかし調べ物や読書には不要の技術ですから、Javascript を切っておくことで対処できます。しかしそもそもクラスやIDを定義しないユーザースタイルシートと競合してしまうDynamic HTMLの書き方に問題があることに言及しておきます。 いや、そんなことは無いという気がしてきました（2001/7/19)
この記事のURI参照
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#fault
応用 - ウェブページ別にユーザースタイルシートを使い分ける
最終更新 2003-02-19T20:10:15+09:00
複数のユーザースタイルシートを、ウェブページごとに自動的に使い分けたい
あるサイトが酷く読み辛いので、その（それらの）サイトにだけ自動的にユーザースタイルシートを適用させたい
これらの欲求は、Proxomitronを使うことで満たすことができます。
1. Web pageフィルタを用意する
Proxomitronを起動し
Web pageボタンをクリックし
Newボタンを押して
次のようなFilterを作成します。
Filter Name
Apply my style sheet
URL Match
$LST(ApplyCSS)
Matching Expression
Replacement Text
\r\r
\dstyle/myStyle.cssには、実際にはユーザースタイルシートのパスを記述します。
2. Block fileを用意する
テキストファイルを新規作成し、ApplyCSS.txtという名前で保存します。保存先は、Proxomitron本体（Proxomitron.exe）と同じフォルダ内にある「Lists」というフォルダ内が良いかと思います。
3. Block fileを登録する
Proxomitronを起動します
Configボタンを押します
Blockfileタブを選択します
Addボタンを押して、保存したBlock Fileを選択します
4. ウェブページをBlock fileに追加する
Block fileにウェブページのURLを追加することで、そのウェブページにユーザースタイルシートが埋め込まれるという寸法です。
タスクバーのProxomitronアイコンを右クリックします
Add to Blockfileをポイントします
ApplyCSSを選択します
追加したいウェブページのURLを入力します
OKボタンを押します
URLにはあらゆるワイルドカードが使えます。もとい使えるそうです。サイト内（同じドメイン）の全ての文書をBlock fileに追加するには、例えば http://foo.com/bar.html ではなく、http://foo.com/* とすれば良いのでしょう、おそらく。
注意点、欠点など
ウェブページがHTML文書でない場合は利用できません。尚、たとえContent-Typeがtext/htmlで送られてくるデータであっても、title要素のないものはHTML文書ではありません（Googleの検索結果等でURLがタイトルになっているアレです）。
Proxomitronを利用して埋め込んだものは、厳密にはユーザースタイルシートではありません。実質的に、ブラウザは制作者が用意したスタイルシートとして扱います。そのため、場合によっては制作者のスタイル指定に負けることが多くなる筈です。
複数のスタイルシートを使い分けるには、同様にしてWeb pageフィルタとBlock fileを作成する必要があります。ちょっと面倒です。
この記事のURI参照
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#app_individually
参考
最終更新 更新はありません
ご自分で完全なユーザースタイルシートをおつくりになる場合、宜しければ以下の点を参考にしてみて下さい。
テーブル内のp要素は、marginとpaddingをゼロに指定（table p{ margin:0 !important; padding:0 !important } ）
blockquote要素のpaddingはゼロに指定（blockquote{ padding:0 !important }）
ブロック要素は、widthをautoに指定
これらはスタイルの競合に対処する際、少々苦労して見つけた指定です。
この記事のURI参照
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#ref
謝辞
最終更新 2003-04-28T01:40:19+09:00
記述ミスのご指摘、不具合のご報告など頂いております。有難うございました。
ちゃいちゃんパパ様（overflow関係のご指摘、システムカラー名の間違いのご指摘）
つきねこ様（記述漏れのご指摘）
maru様（記述ミスのご指摘 fond-size → font-size）
あきやん様（w3c.cssの文字化けのご指摘）
この記事のURI参照
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#thanx
関連リソース
最終更新 2002-08-19T16:11:10+09:00
H-man AND NOW(ユーザースタイルシートから始めるCSS)
ユーザースタイルシートの作成は「意味と見栄えの分離」の理解への近道。
Mozilla における文書表示のカスタマイズ
IE/Win で外部CSSを無効にする方法
言い換えれば、「Internet Explorerが内蔵しているスタイルシートをユーザースタイルシートとして使う方法」です。
この記事のURI参照
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html#external_link
Personnel ユーザースタイルシートのススメ
Site searchより、任意のキーワードを含んだサイト内の文書をリストアップできます（Googleを利用）。
Site mapより、このサイトの全体的な構造を把握できます。
この文書の恒久的なURIは、http://purl.org/jintrick/Personal/usrstyle.htmlです。参照する際にご利用下さい。
題名には必ず「阿修羅さんへ」と記述してください。