このページの構成

  1. 「ブラウザの設定とユーザースタイルシート」について
  2. 見づらいウエブページとは
  3. ウエブページを見易くする方法
  4. 参考資料:豆文字について
  5. ブラウザによる見栄の調節法
  6. 結局、、
  7. ユーザースタイルシートの適用法
  8. スタイルシートの優先順位
  9. 用意する際と使う際の問題点
  10. まとめと感想
  11. 詳しいもくじ

「ブラウザの設定とユーザースタイルシート」について

この記事は、2003年11月10ー17日まで、道具としてのパソコンに書いた記事に加筆、修正を加えたものです。なお、筆者が使っている、Macintosh OSX用のソフトに限定して紹介しています。

パソコンの液晶画面をジッと見つめることは、かなり目の負担になります。年齢によるものかもしれませんが、最近、特に目の疲労を感じ、作業の効率にも大きく影響しています。

WWWでは、閲覧者の身体的特徴になるべく影響されずに情報を受け渡しするために標準化の規格が定められています。ページの見え方が、ウエブページと作成者の個性や主張の一部であることは認めますが、情報の本質は、フォントの色や大きさ、背景の柄とは何ら関係ないのです。ところが、色々な制約や好みを反映して、一部の人にきわめて見づらいウエブページが存在します。閲覧者の様々な身体的特徴に配慮が不足しているウエブページデザインは、結果的に、読み取るのが困難なために情報が正しく伝わらなかったり、ひいては、閲覧者の健康を害する可能性さえ孕んでいます。

閲覧者の好みや、身体的な制約を解消する手段として、ブラウザの設定で、ユーザーが自らの望むようにウエブページの表示を調節する術についてまとめました。

見づらいウエブページとは

機嫌良くウエブページを閲覧し、リンクを辿っているうちに、妙に見づらいページに出くわすことがあると思います。

実際に眺めているのは、ブラウザ画面の表示で、ページ作成者が何らかの意図を持ってレイアウト・デザインしています。閲覧者は眺めながらその意図がくみ取れない場合、見づらく感じるのです。また、大きな画面や、特定のフォントなど、限られた環境で見易いページも多々あります。わざと見づらくしているようなページもありますが。

見づらい表示になる原因

  1. 見栄えに基づくもの
    レイアウト
    並んでいる文字の、見出しやメニュー、本文などの区別が付きにくい。
    改行の幅、位置、横スクロール、ウインドウサイズ
    フォントの指定(文字が判別しがたい)
    文字のサイズが適切でない
    色使い。
    好みの問題
    暗い色が好き、小さな文字が好き。慣れの問題
    身体的特徴
    作成者と閲覧者の視力が著しく違う
    作成者の知識の問題
    適切なマークアップが施されたHTMLは、それなりに見易いページとなる。マークアップがでたらめだと、閲覧者が調整するほどに理解不能となる可能性が高い。この点は、ユーザースタイルシートを用いる上で、きわめて重要な点。
  2. 内容に基づくもの
    誤字、脱字
    意味不明の間違いが多い。漢字の使用が適切でない。
    意味不明
    意味が分からない
    文字化け
    ブラウザが適切に表示できない
    リンク切れ
    画像やフレームが表示されない
    構成力の問題
    読んで(見て)理解させるためには、内容を吟味し、筋道を立てる構成力と、それを表現するための文章力が必要。(閲覧者の理解力に問題がある場合もある)
  3. 閲覧環境に基づくもの
    ハードウエア
    閲覧者のパソコンの能力
    ソフトウエア
    初期設定が違っている
    プラグインやスタイルシートなどに対応していない
    通信速度
    閲覧者環境の通信環境に較べて、ページに含まれるコンテンツのデータ量が大きすぎる
    閲覧者の知識
    閲覧環境に関する理解不足。
    ソフトウエア、ハードウエアのせっていを間違っている。

これらの中で、見栄に基づく部分は、いくらかの知識があれば克服できるかもしれません。

ウエブページを見易くする方法

主に、作成者のページデザインやレイアウトが原因で見づらいページを、ちょっとした工夫で見易くすることが出来ます。

その前に、閲覧者の環境とウエブページの見え方についてまとめておきます。

見易さに関係する閲覧環境

より高性能のハードウエア
高速のプロセッサ、モニタの表示範囲、表示色数などがある水準以上の閲覧環境を満たすことが必要な場合がある。
速い通信速度
画像など、情報量が多いコンテンツを含む場合、内容を表示する時間は見易さに関係する。
より正確に表示するブラウザソフト
標準の規格に準拠した、より互換性の高いブラウザソフト。作者の意図を出来るだけ正確に反映することは、ウエブページの理解を助ける(場合がある)
OS
必要なフォントがインストールされていること。アンチエイリアスなど、OSは、表示の質に関わる。また、最新のブラウザソフトが、古いOSに対応していないことがある。

閲覧者の環境に十分配慮されたページでは、これらの閲覧環境に要求される条件が緩い。しかし、作成者はしばしば、自分の環境を標準と考え、それ以上の閲覧環境を要求するページを作ることがある。作成者側は、可能な限り、閲覧者の環境に左右されにくいページ構成となるように注意を払うべきである。

閲覧者にとって、これらの閲覧環境を整えることはコスト面の問題もあるし、ハード、ソフト共に日進月歩という状況であるから、何処で折り合いを付けるかは、閲覧者が自分の責任で決めることである。

私なりの基準は、

これらの閲覧環境を整えた上で、閲覧者が設定可能な部分は以下の三点となる。

  1. メニューからの設定
  2. 初期設定の変更
  3. ユーザースタイルシートの利用

ブラウザ表示を環境設定で調節する方法とユーザースタイルシートの利用法についてまとめます。

参考資料:豆文字について

いつも参考にさせてもらっているいくつかのサイトから、ウエブページのフォントサイズに関する資料。

文書の構造とフォントの選択

フォントサイズをどうするか。これは文書の構成と密接に関わります。新聞記事には、見出し、要約、小見出し、本文と並んでいます。筆者の署名や脚注が添えられることもあります。読者が理解しやすい様に、各々の構成要素を並べて、なおかつ、文書の各部分を明確に区別出来るように、フォントを変えることは有効です。例えば、見出しは目立つ場所に、大きなゴシックフォントで。本文と思って読んでいたら、実は要約だった、などと云うことがないように、要約部分はそれと分かるように囲むとか。しかし、結局は、本文を読ませるためにそれ以外の構成成分は添えられるわけなので、あくまで基準は本文になるべきです。

従って、文書のフォントサイズは、本文を100%、1emとして、それ以外の部分を相対指定(本文のフォントサイズに対して%、あるいはemで)し、文書全体のバランスを取るのが筋だと思います。

本文のフォントサイズを指定する(しない)心理

この話題は、以下のサイトに取り上げられていたもの。元々は、hatena::agendaの10月25日以降の記事。(hatena::agendaの過去ログ)特に、ねこめしにっきには、これに関する関連文書の一覧もあり、参考になります。

実際には、ウエブサイトの作成者が、本文中のテキストを小さめに指定するケースが、往々にしてあるようです。単純に思いこみや無知が原因で、そうする場合が多いと思います。一年前には、私も<font size="2">とか、やっていました。どうしてそうしていたか、思い出してみると、とりあえず、自分のホームページを自分の思ったようにレイアウトしたい、と云う発想があって、画像を埋め込んで、テーブルを使ってレイアウトしようとした場合、フォントが小さい方が融通が利くのです。その際に、作成者(一年前の私)は、閲覧者が私のデザイン上の意図を無条件に受け入れてくれていると、勝手に思いこんでいました。そして、小さめの文字の方がなんだか格好良いとか、ちょっと薄目の色を使うとクールに見える、というか、自分の印象に残っているクールなページがそうなっていたと云うこと。この二つが絡み合って、ページのデザインの重要な部分として、文字サイズを小さめにしていたのです。多くの場合、閲覧者がどうやってウエブページを見ているかまで、思い及んでいません。

特に、私の場合は、マックを使ってでウエブページを作り、マック用ブラウザで表示確認、閲覧していましたので、他の大多数(ウインドウズユーザー)の閲覧環境といくらか異なっていたわけす。また、ブラウザはフォントサイズを指定できるので、あるフォントサイズが、ちょうど良いか、許容しがたいほど大きいか、小さすぎて読めないか、と云う判断は、各自によって異なるのです。幸い、私は当初、Internet ExplorerのMacバージョンを使っていて、ブラウザにフォントサイズを調節するボタンを付ける方法を知っていたので、ブラウザ表示のフォントサイズが好みに合わなければ、フォントサイズを段階的に調節していました。だから、他の閲覧者も、見て変だと思ったらフォントサイズを調節してくれるだろう、と思っていました。しかし、問題はそれほど簡単ではなく、以下の理由で、自分の意図したレイアウトは決してその通りは伝わらないと思います。

この問題、つまり、閲覧環境の違いによってウエブページの見え方が違う、と云うことに気が付いたとき、問題は、深刻に思えました。そういうときに、ウエブ標準、HTML+CSSに出会ったのです。とりあえず、正しく記載して、あとは、閲覧者に任せる。自分の意図通りでないとすれば、それは閲覧者の責任なわけで、閲覧者が満足すればそれで良い、と云う発想で。気分はかなり楽になりました。

ユーザーに任せるメリット

その方法として、普遍的なルールに忠実なHTMLを作り、見栄を調節したい場合は、外部スタイルシートを使うという方法です。もちろん、テーブルレイアウトなどは使いません。そうすることによって、作成者側にもたらされるメリットは、

悩みが減るということです。

ブラウザによる見栄の調節法

マックOSX用の主要なブラウザソフトで、ウエブページの見え方を調節する方法をまとめます。ウインドウズユーザーで、マックのことはまるで分からない、と云う方には、いくらか参考にしていただけるのではないかと思います。

  1. ブラウザの初期設定
  2. メニューからの調節法
  3. ユーザースタイルシートの導入法

についてまとめています。

因みに、スタイルシートを使うと、

「フォントサイズが px 値で指定されてると WinIE で文字サイズメニューから大きさを変えられない」と云うことになるそうです。要するに、ウインドウズのエクスプローラでは完全にフォントサイズ固定ができる(!)と云うことらしいです。知りませんでした。

サファリ(v.1.2)

このごろのマック用デフォルトブラウザ。きれいで素早い表示がウリ。タブブラウザです。リファラーの自称名はMozillaです。

  1. ブラウザの「表示」メニュー
    文字の拡大、文字の縮小
    それぞれCmd(+)、Cmd(-)が割り当てられている。
  2. 環境設定
    「表示」
    標準フォントと等幅フォントの種類とサイズを設定できる。
    フォント選択ボタンでフォント選択画面となる。この画面はフォントファミリーとサイズの設定以外の意味が分からない。
    デフォルトの設定は不明。
    デフォルトに戻す、と云うコマンドが見あたらない。
    私の設定は
    • 標準フォント:ヒラギノ角ゴPro 14
    • 等幅フォント:courier 14
    ページを開くときに画像を表示する(チェックボックス)
    チェックを外すと、画像を表示しない(通信速度が遅いときに有利)
    但し、以下の場合、Altが全く表示されない
    • 画像サイズ(hight width属性)が指定されていないとき。
    • Altの内容が画像サイズの指定からはみ出すとき
    • 従って、表示フォントを大きくするとAltが表示されなくなることがある
    「表示されなかった画像を表示させる」ボタンは無い(環境設定で画像を表示するチェックを入れる必要がある)
  3. ユーザースタイルシートを使うための設定

大変シンプルな環境設定。十分かと言われると、少々足りない気もする。画像非表示でAltが表示されないのは大変拙いのではないか?アップルを信用して下さい、と云うことだろうか。

エクスプローラ(5.2.3)

  1. ブラウザの「表示」メニュー
    「文字の拡大」で以下の二通り選べる
    %表示で拡大、縮小を選ぶ(300-50%の間。デフォルトは100%)
    拡大(Cmd+)、縮小(Cmd-)で一段階ずつ変化
    文字サイズの拡大、縮小ボタン
    メニューバーのカスタマイズで、メニューバーにボタンを表示させることが出来る。
  2. 環境設定=Webコンテンツ
    ページとリンク
    テキスト、背景、表示済み(リンク)、非表示(リンク)の色を各々指定できる。
    リンクの下線をチェックボックスで指定できる
    ページのコンテンツ:以下の項目をチェック
    画像の表示
    アニメーションGIFおよび、ループの有無
    サウンドの再生
    フレームの表示
    ColorSyncの使用
    スタイルシートの表示(ページのコンテンツの中)
    チェックを外すと、作成者スタイルシート、ユーザースタイルシートともに適応されない。
    独自のスタイルシートを使用をチェックすると、ローカルディスク上のCSSファイルを一つだけ選択できる。
    ページ指定のフォントを使用、ページ指定の色を使用(重要!)
    スタイルシート・HTMLタグによる、作成者スタイルと、ブラウザの初期設定「ページのコンテンツ」の優先順位を入れ替える。
    これらのチェックを外すと、「スタイルシートの表示」のチェックにもかかわらず、Webコンテンツの「ページとリンク」で指定した色、言語/フォントの「フォントとサイズ」で指定したフォントで表示される。
    チェックした状態では、作成者のスタイルシート、もしくはHTMLタグの属性による表示が優先される。
  3. 環境設定=Webブラウザ
    言語/フォントで設定
    フォントの種類は6種類指定する
    • 既定のフォント{Osaka}
    • サンセリフ系:{Helvetica}
    • セリフ系:{Osaka}
    • 固定ピッチフォント:{Osakaー等幅}
    • 手書きフォント:{Brush Script MT}
    • 装飾フォント:{Comic Sans MS}
  4. フォントサイズは一括指定。デフォルトは16
  5. 解像度を選べる。デフォルトは96dpi。他に72dpi、その他を選べる。

ネットスケープ(7.1)/ Mozilla1.7

基本的には同じ筈。Mozillaは私のメインブラウザ。

  1. ブラウザのメニュー
    「表示」->「テキストの拡大/縮小」
    小(Cmd-)、大(Cmd+)
    50%から200%まで。100%:元のサイズ(Cmd0)
    そのほか..で数値入力(%)でフォントサイズ指定
    表示=スタイルを使用==基本ページスタイル
    意味不明。ヘルプにも説明なし)
  2. 環境設定
    表示=フォント
    フォントの種類は6種類指定する{括弧内は私の設定}
    • 可変ピッチ{サンセリフ}
    • セリフ:{ヒラギノ明朝Pro W3}
    • サンセリフ:{ヒラギノ角ゴPro W3}
    • 筆記体:{Osaka}
    • ファンタジー:{Osaka}
    • モノスペース:{Osaka-等幅}
    フォントサイズはモノスペース以外を一括指定。デフォルトは不明。私の設定ではどちらも12。
    • フォントの最小サイズ指定可能(なし=9-24まで)。豆文字対策?
    • ドキュメントで他のフォントを使用できるようにする、と云うチェックボックスがある。
      • ドキュメントで他のフォントを使用できるようにする:このチェックボックスをオンにすると、ユーザの設定ではなく、Web ページのフォントとサイズ設定が使用されます。
      • おそらく、フォントに関して、制作者スタイルシートを適用するかどうかの選択。
    解像度を選べる。デフォルトは96dpi。他に72dpi、その他を選べる。
    環境設定=表示=配色
    (以下の三つについて設定する)
    1. 文字と背景
      • テキスト色、背景色をそれぞれ指定できる
      • 「システムの配色を使用」というチェックボックスがあり、チェックを外すと、そのページに背景色、フォント色を設定していない場合(CSS、あるいはfontタグで)上記の設定が有効になる。
    2. リンクの色
      • 未アクセス、既アクセス各々の色とアンダーラインの有無を選べる
      • 色を指定しない、と云う選択は無い
      • ウエブページの制作者の設定が優先される。
    3. Webページに独自の色と背景が指定されている場合
      • Webページが指定する色と背景を常に使用:スタイルシート、あるいはHTMLのタグに従って表示する
      • 自分が設定した色を使用し、指定されている色と背景画像は無視する:スタイルシート、あるいはHTMLタグによる色と背景(色、および画像)の指定を無視する。
      • ただし、マージン、ボーダーなどの設定はそのまま残る
  3. ユーザースタイルシートに関する設定
    • メニュー、環境設定に、スタイルシートという言葉は出てこない。ヘルプで検索しても見つからない。
    • メニュー、環境設定でユーザースタイルシートの設定を出来ない。その代わりに、初期設定の「配色」で、ページのレイアウトを保ったまま、背景と色を変更(独自のもの、あるいはシステムデフォルトに指定)する。
    • Mozillaも基本的には同一、と云うか、初期設定をネットスケープと共有している。Mozilla Firebird 0.6.1も概ねネットスケープと同様であるが、初期設定のFonts & Colorsで、Always use my fonts and colorsと云う項目があり、フォント、色、それぞれについて、閲覧者の環境設定を使うかどうかを指定できる。
    • ユーザースタイルシートを使用するためには、Profileフォルダ内のスタイルシートファイルを入れ替える。
    • スタイルシートファイルの場所は、ユーザー>ホーム>ライブラリ>Mozilla>Profiles>____.slt>chrome
    • 参考ページ:Mozillaブラウザに対するユーザースタイルシートの適用方法(QUIA 平野敬さんのコンテンツ、文書表示のカスタマイズ)

Opera日本語版6.0.3

一応、正規ユーザーであります。機能てんこ盛り。マックバージョンを使っている人は滅多に居ないみたいです。リファラーの自称名は、デフォルトでOpera。しかし、初期設定でMozillaやIEとして認識させることが出来ます。特徴は、作成者モードとユーザーモードの切り替え機能。デフォルトの設定では、「ウエブ作成者の提供する設定を無視するモード」と、「ユーザーの設定を無視するモード」、と云う感じで、メニューの日本語は妙です。以下、テキストの表示について、まとめます。

  1. ブラウザのメニュー
    表示文字サイズを調節するメニューはありません。
    ズーム欄、もしくは、ズームスライダー(メニューバーの中に置くことが出来る)
    ただし、このズームは文字サイズとともに、画像とテーブルのサイズも変化させる、他のブラウザには無いタイプです。
    作成者モードとユーザーモードの切り替えボタン(メニューバーの中)
    作成者モードでは、作成者スタイルシートおよび、HTML タグによるフォント、背景などの指定を無視
  2. 初期設定で、テキスト表示に関わる部分
    • ブラウザのレイアウト=ツールバー
      • アドレスバーとズーム欄を表示する
      • ズームスライダーを表示
    • フォントと配色
      • ユーザーフォントと配色 :以下の各々について、フォントの種類、サイズ、スタイルを指定できる。
        • 通常のドキュメント
        • 見出し(h1 ̄h6)
        • フォーマット済みテキスト
        • フォームの入力欄
        • ボタンの文字
      • CSSフォントファミリー(セリフ・サンセリフ・カーシブ・ファンタジー・モノスペース:フォントの種類のみ指定可能)
      • 最小フォントサイズをピクセル単位で指定
      • 背景色の指定
      • ユーザーリンクスタイル
        • 未表示、表示済みについて、色、下線の有無を指定できる。
        • リンク枠の有無を画像、テキスト別に指定出来る
    • ページスタイル
      フレーム
      フレーム、インラインフレームのそれぞれを無効にすることが出来る。
      アクティブなフレームに枠の表示を設定できる。
      Presentation Modes
      作成者モード・ユーザーモード、それぞれについて以下の項目を有効にするかどうか、チェックボックスで指定可能
      • 作成者CSS:云うまでもない
      • 作成者フォントと配色:HTMLのフォントタグ属性
      • ユーザーCSS:下記ユーザーCSSで指定したファイル
      • ユーザーフォントと配色:環境設定=フォントと配色で指定したもの
      • ユーザーリンクスタイル:環境設定=フォントと配色で指定したもの
      • 表:テーブルレイアウトを無視するかどうか
      「作成者モードを標準で使用する」か、どうかをチェックボックスで選べる。
      ユーザーCSS
      ローカルディスク上のファイルを一つだけ指定できる
      一旦指定すると、解除できないのは、バグかもしれない

いやいや、なかなか大変な作業。しかし、自分が如何にブラウザの設定について無知であったか思い知らされる。というか、サファリの環境設定が単純すぎる、と云う気がしないでもなく。もう少し続きます。

最近になって、ver7.50が登場しました。まだ使いこなせていませんが、そのうちに追記しようと思います。

Camino (0.7)

OSX専用のMozillaブラウザ。リファラーの自称名はMozillaです。

  1. メニューバー(Viewメニュー)
    • Bigger Text : Cmd(=)
    • Smaller Text : Cmd (-)
  2. Preferences=Appearance
    • Color & Link
      Page color
      TextとBackgroundそれぞれについて、色を設定出来る
      Links
      Visted LinksとUnvistied Linksそれぞれについて色を設定
      Underline linksをチェックボックスで指定
      Always use my page and link colors
      チェックボックスで指定すると、作成者スタイルシート、HTMLタグ指定に被せてユーザーがColor & Linksで指定した設定が有効になる
    • Fonts
      Choose fonts for:
      フォント設定する言語を選ぶ
      Proportional (Serif)とMonospace:
      それぞれについてフォントファミリー、タイプ、サイズを設定
      Advanced
      Choose fonts for:で選んだ言語について、
      • Serif
      • Sans-serif:
      • Cirsove:
      • Fantasy:
      それぞれについてフォントの種類を設定できる。
      Minimum font size:を選べる
      Default font:Serif か、Sans-serifをチェックボックスで選べる

スタイルシートの適用を切ることは出来ない。ユーザースタイルシートを選択することも出来ない。

Caminoを終了し、cssファイルをホーム/Library/Application Support/Camino/chromeに「userContent.css」という名前で入れる事で有効になります。

とのことです。ネットスケープと同じやり方です。(Caminoを使おう:ユーザーCSS

これも、ver 0.8が登場しています。

OmniWeb (4.5 v496)

これも、マックOSX専用ブラウザ。タブを使えないことを除くと、なかなか良いです。サファリのお気に入りを読み込める、唯一のブラウザです。リファラーの自称名はデフォルトでOmniWebですが、色々選べる。ウインドウズの振りをすることも出来るようです。

iCab (2.9.5 for OSX)

マック専用、ドイツ製ブラウザ。スタイルシートに対応し切れていない。タブ機能が付いた。リファラーの自称名はデフォルトではNetscape 4となる模様。他のブラウザになりすますことが出来る。もちろん、iCabを名乗ることも出来る。スタイルシートの表示が全然ダメ。

  1. 表示メニュー
    フォントサイズ
    ポイント値で選択
    • 8-36の間で段階的
    • 標準 (Cmd =)
    • 大きく (Cmd /)
    • 小さく (Cmd *)
    • その他 (ダイアログから数値入力)
    標準を選ぶと、フォントサイズが36pointになるのは、バグかもしれない
    スタイルシート
    初期値という値が出るのみ
    ナビゲーションバー(ツールバー)
    カスタマイズでフォントサイズ、「大きく」「小さく」ボタンを追加出来る
  2. 環境設定:全般
    その他:
    Quatzテキストレンダリング、と云うチェックボックスあり
  3. 環境設定:ページ表示(全般)
    色:
    リンク、訪問済、アクティブ、背景色、テキストそれぞれについて色を指定
    「ページ指定の色を指定」チェックボックスあり
    許可:
    サウンド、ページフォントをセット、ページフォントサイズをセット、スクロールテキスト、テキストの点滅、について、チェックボックスで指定できる。
    リンクに下線を付加:
    なし、常に、Webページにより決定、より選択
    フレーム
    フレームを表示、常にサイズ変更か、常にスクロールバーを表示、各々にチェックボックスあり
    サイズ:(意味不明)
    数値入力でピクセル値を選べる
    ページサイズ変更可(チェックボックス)
    ページ表示(互換性)
    netscapeとexplorerは、HTML,HTTPの標準を常に守っているわけではありません。iCabが、これらのブラウザのように振る舞うか、それとも標準を守るかを選択できます。標準を守らせたければ、全てチェックしてください。(ダイアログ内の注意書きの要約)
    5つのオプションが並んでいる(省略)
  4. 環境設定:フォント・優先言語
    優先言語
    文字コードを選択出来る
    フォント選択
    明朝、ゴシック、等幅、筆記体、装飾、について、それぞれフォントの種類を選択
    見出し、本文に明朝、ゴシックのどちらを使うか、チェックボックスで選択できる
    フォントサイズの選択(初期値14)
    最小サイズ:(初期値12)
  5. 環境設定:スタイルシート (注意:CSS1はまだ完全には実装されていません、と赤字で警告文あり)
    スタイルシート有効
    チェックボックス、初期値は有効
    画面解像度
    72dpi、96dpi、その他、に加えて、測定ボタンあり
    カスタムスタイルシート
    複数指定可能
  6. 環境設定のダイアログに、元に戻す、初期値に戻す、ボタンがそれぞれある。

結局、、

自分でも、ユーザースタイルシートを使ってみようか、と思い、まとめを作ったのですが、それぞれのブラウザソフトで、ずいぶんと扱いが違います。単純に、ユーザースタイルシートを指定しただけでは、どうにもならないように思う。そもそも、私がユーザースタイルシートに対して持っていたイメージと、なんだか違います。

とりあえず、ユーザースタイルシートとはどういうものなのかを、改めて勉強(と云うと、少々大げさだが)しなくては。少なくとも、具体的なイメージ、ユーザースタイルシートで何が出来るか、を、出来るだけ正確に把握しておく必要がありそう。

と云うわけで、頼りになるサイト、Personnelの、「ユーザースタイルシートのススメ」を、じっくり読み返してみることにします。ついでに、google検索(ユーザースタイルシート)

それにしても、次々と新バージョンが出る。なかなか最新の情報を集めるのが楽ではありません。

ユーザースタイルシートの適用法

ユーザースタイルシートを使ってみようと、色々調べてみたわけです。スタイルシート適用法はそれほど難しいことはありません。早速やってみました。繰り返しっぽくなりますが一応まとめておきます。

とりあえず、自前のスタイルシートを使って、試してみたのですが、全く思い通りにはなりません。なかなか手強そうです。

スタイルシートの優先順位

うまくいかないのは何故か。ユーザースタイルシートを設定すると、元の表示がほとんどそのまま残り、ユーザースタイルシートの設定が部分的に被ったように表示されます。ちょっと資料を当たってみますと、スタイルシートの優先順位について。

  1. 制作者指定のスタイルシート
  2. ユーザー指定スタイルシート
  3. ブラウザデフォルトスタイルシート
  4. ただし、CSSプロパティの後に、!importantと付けると、それが最優先となる。

とあります。資料は、Web Designing 2002年2月号、大藤幹さんの記事です。

さらに、スタイルが競合する場合の優先順は高い順に

  1. ユーザー指定のスタイル(!implrtant)
  2. 制作者指定スタイル(!implrtant)
  3. 制作者指定スタイル
  4. ユーザー指定スタイル
  5. ブラウザデフォルトスタイル
  6. より固有性の高いスタイル
  7. より後に指定されているスタイル

となる、とのこと。つまり、単純に、ユーザースタイルシートを指定した場合、

  1. ブラウザデフォルトスタイルシート
  2. 制作者指定スタイルシート
  3. ユーザースタイルシート

の三つによってスタイルが指定されることになり、指定が重なる部分は上記の優先順で、重ならない部分はそれらの折衷で表示されると云うわけです。

これで分かったことは、つまり、ユーザースタイルシートのみに依存して、思い通りに表示させるには、制作者指定スタイルシートと、ブラウザデフォルトスタイルシートの指定の全てに優先するような、完全なスタイルシート(HTMLの全ての要素をセレクタにして、宣言に!importantを付ける)を用意しなくてはならない、ということです。

用意する際と使う際の問題点

まず、ユーザースタイルシートを用意する際の問題点と感じるところ。

  1. 完全に表示をコントロールしうるスタイルシートを自分で作るのは、かなりの知識、経験、熟練が必要と思う。むしろ、リンクアンカー部分や、見出し、引用部分など一部の適用とした方が実際的と思うし、そういった部分的な適応は意味がある。
  2. あるいは、良くできた既製のスタイルシートを使う。(例えば、Personnelの、「ユーザースタイルシートのススメ」に、いくつかダウンロード出来るようになっている。)
  3. Operaでは、制作者スタイルシートの適応を切る設定を選ぶことが出来るので、不完全なスタイルシートでも十分に使える。

上記、「ユーザースタイルシートのススメ」の中で、そふぃあさんが、同様の点を指摘しています。

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

(強調は引用者による)

そして、実際に、使ってみて感じる問題点に、触れておきます。

まとめと感想

自分でも、ユーザースタイルシートを使ってみようか、と思い、まとめを作ったのですが、それぞれのブラウザソフトで、ずいぶんと扱いが違います。単純に、ユーザースタイルシートを指定しただけでは、どうにもならないことは明白。

初めは、どうしてうまくいかないのか、逆に、そふぃあさんの作ったたスタイルシートがどうしてうまくいくのか分からず、CSSファイルのソースを見てみると、ほとんどの行に、!important と、書き込んであった。そうか、そういえば優先順位があったなぁ、と、調べなおした次第。

いつまで経っても素人領域にいる私ですが、素朴に思うのは、

制作者スタイルシートを部分的に置き換えたいと思うケースは、
その部分のスタイルシートを作って、!importantを付けてやる、これは実用的で、私にも出来ると思う。
レイアウトが大抵はそのまま残る。レイアウトに依存したページ構成になっている場合は、この方が良い。
また、制作者の設定の拙さによる読みにくさを解消するのが目的であれば、
  • Mozillaの環境設定、すなわち、フォントを自分で選び、「制作者の色や背景を無視して常に自分が選んだ色を使う」設定が有効。
  • IEの場合、ページ指定の色・フォントを使用をオフにしても、背景画像をキャンセル出来ないので、宜しくない。
  • Safariの初期設定は表示フォントの種類と大小のみで、色を選ぶことが出来ないので、ユーザースタイルシートを使うべき。
  • Operaは様々な要素について、フォントの種類とサイズ、およびリンク色と背景色をユーザー指定できるが、フォントの色は選べない(?)。また、スタイルシートのオン・オフも個別に設定出来る。ユーザースタイルシート・環境設定、どちらでも使えそう。
しかし、作成者指定の全てが邪魔と思った場合、
ユーザースタイルシートの隅々に!importantと書き込んでいくのは、なんだか馬鹿げている。
ブラウザデフォルトのスタイルシートを自分で書き直す様なもので、素人には荷が重いと思う。
Operaの様に、制作者スタイルシートを選択的にオフにする設定があれば、部分的なスタイルシートで事足りるはず。

と、云うような感想。

こんな便利な仕組みがあるんだから、環境設定の隅っこに埋もれさせるのはもったいない。と、思う反面、ユーザースタイルシートの使用が一般的に普及して、様々な既製スタイルシートを使うのが流行り出すと、ケータイの着メロみたいなことになるかも。シャレとしか思えない様な、とても実用的でないような、ただ、単に笑えるだけ、のスタイルシートが流行ったりしたら、それはそれで嫌と思う。

まぁ、別に、どう見られようと構いやしないけれど。

「ブラウザの設定とユーザースタイルシート」詳細なもくじ

  1. 「ブラウザの設定とユーザースタイルシート」について
  2. 見づらいウエブページとは
  3. ウエブページを見易くする方法
  4. 参考資料:豆文字について
  5. ブラウザによる見栄の調節法
  6. 結局、、
  7. ユーザースタイルシートの適用法
  8. スタイルシートの優先順位
  9. 用意する際と使う際の問題点
  10. まとめと感想

更新履歴


oyanews/homep/usrstylsheet