RYU's HOME P@GE

福島中年探検隊

ユーザースタイルシートについて CSS を使はう

(2020-11-12) この文書は 2001 年 11 月に書いたものです。 現在では事情が異なる點もあります。 尚、附屬のスライド式プルダウンリストは 2002 年當時のサンプルですのでリンク先の殆どは 404 です。

スタイルシートと言ふと、いかに格好良く見せるかが基本のやうです。 こゝでは「格好良く見せてゐるページを、いかに晉通に見るか」といふ閱覽者の立場CSS を使ってみませう。究極のアクセシビリティです。

スタイルシートの入門篇は Web ページ制作者主體の說明が大半ですが、しかし Web は雙方向ですから閱覽者側でも制御できます。 JavaScript だとブラウザで OFF にすれば動作しませんし、CSS も OFF にすれば……。 ところが Internet Explorer 5.01 では簡單ではありません。 レジストリを書き替へないといけないので晉通の人には敷居が高い。

ユーザー補助

IE のインターネットのプロパティに、こんな名前の設定があります。 ネーミングが良くないので、あまり使ってゐる人はゐないと思ひますが大變役に立ちます。 閱覽者が見易いやうに變へることができるので、先づ手始めに文字サイズを固定してゐるサイトをサイズ變更できるやうにしてみませう。 これで本人が格好良いと思ってゐるページも臺無しです、とほほ。

ブラウザの設定 IE 5.01 )

忌々しい文字サイズ固定の極惡サイトが表示されてゐる狀態で(そこまで言ふことはないだらう)、[ツール(T)]→[インターネット オプション(O)] の順でクリックして、インターネットのプロパティを開きます。 もちろんコントロールパネルから開いても OK です。

全般タブの中に「ユーザー補助」といふボタンがあります。 押すとダイアログが表示されますので、「 Web ページで指定されたフォントサイズを使用しない」にチェックを入れて OK します。 IE のバージョンによって表示が違ふかも知れませんが、同じ意味のところにチェックです。

卽座に畫面に反映されて、ブラウザのデフォルトの大きさになります。 あとは文字の大きさをブラウザで自由に變更して下さい。 これは便利で私もよく使ってゐます。 ブラウザ自身もスタイルシートを使って表示してゐるので、斯う云ふ事ができるといふ訣です。 「ユーザー補助」に全部チェックを入れて、いろいろなサイトを見てみると面白いです。 制作者の考へ方といふか制作レベルなども分かります。

文字サイズを固定しない?

font-size プロパティに絶對單位(こゝでは px )を指定すると IE でサイズ變更できません。だから文字サイズを固定しないやうに、とよく書かれてゐます。 實は制作者が幾ら固定しようと閱覽者側で自由に變更できます。 しかも操作も簡單。 ゆゑに固定(ピクセル指定)する意味がありませんよ、と書くのが正しい。 ピクセル指定すると變更できませんと書くのは違ふんぢゃないかな。

(2020-11-12) 當時でも文字サイズの變更はできたのですが、その後、ブラウザなど UA 側の改良が進んで「ピクセル指定すると文字サイズを変更できない」なるアクセシビリティ論者の主張は意味を爲さなくなりました。

position や float プロパティの弊害

CSS でする配置などは安全かといふと決してさうではありません。 特に position は値が absolute のときは固定的です。 固定配置は環境が少し變はるだけで重大な問題が生じます。 CSS をまったく適用されない環境なら話は簡單ですが、IE の「ユーザー補助」のやうに一部のプロパティを無效にしたときに潰滅的な結果になる場合があります。

意外に「文字サイズを小さく固定しない」と言ってゐるサイトで、これらの絶對配置をしてゐるケースがあります。 文字も配置も同じこと。 畫面上に見えてゐる事しか解っていない初步的なウェブデザイナーの最大の缺點は、自分が見てゐるやうに閱覽者も見てゐると思って仕舞ふことです。(私も)

ユーザースタイルシート

IE などのブラウザには「ユーザスタイルシート」といふ機能があります。 これを使へば閱覽者側で任意のデザインに變更することが可能です。 制作者が 「どうだ、カッコイイだろう」 と言ふページでも晉通のページにして見ることができます。 それが良いかどうかは措いて、スタイルシートで格好良く見せてゐるページを「晉通」に戾してみましょう。

ブラウザの設定箇所

Internet Explorer(以下 IE )に限定します。 Netscape など他の利用者には申し訣ありません。 ただし CSS の中味はたいていのブラウザで通用します。

IE のプロパティを開いて下さい。 ブラウザメニューの [ツール(T)]→[インターネット オプション(O)] で開きます。 また コントロールパネルなどから操作しても同じです。 圖のやうなダイヤログが表示されれば OK です。(圖はクリックで大きくなります)

スタイルシートのチェックボックスにチェックを入れると、ファイルを置く場所の欄がアクティブになりますから、次のやうに記入して下さい。 文字は必ず 半角英數文字 です。 自分の PC で Windows がインストールされてゐるドライブに Temp(一時)フォルダがない場合は、適當な場所を指定して下さい。(どこを指定したか忘れないやうに)特に問題がなければ次のディレクトリとファイル名を使って下さい。

外部スタイルシートファイル

ブラウザで使へるやうに設定しても、これがないと何も起こりません。 Windows の人は標準で附いてゐるメモ帳を一度は使ったことがあるでせう。 通稱テキストエディタと呼びますが、これを使ひます。 Mac の人はシンプルテキストで結構です。 テキストエディタなら何でも良いのですが、間違っても WORD のやうなワープロソフトは使はないで下さい。 メモ帳なんてダサいと思ってゐる人もゐるかも知れませんが、これはプログラミングでも活躍する萬能選手です。

論より證據。 ものは試しで次のやうに書いて下さい。 いちいちキーボードから入力するのは面倒ですので、以下の文章をコピーしてメモ帳などへ貼り附け(コピー&ペースト)した方が間違ひありません。 また、メモ帳や たいていのテキストエディタのデフォルトは Shift_JIS ですが、EUC の場合は charset を書き替へて下さい。 EUC で書いてゐる人は、こんな說明は不要だと思ひますが……。

これは何をするスタイルシートかと言ふとリンク部分の表示を設定してゐます。 ページのテキストリンクの部分は色が違ったり下線が附いたりしますよね。 それを設定してゐます。 で、肝心なのは色や下線ではなく、カーソルの形狀です。 これを勝手に變へてゐるページが結構あります。 リンクの部分で こ~んなふうに してゐるページを見たことはありませんか。 もし遭遇したことがなければラッキーです。 これは迷惑なので標準カーソルまたは自分が使ひ易いカーソルに強制的に戾さうといふものです。

スタイルシートファイル保存

このやうに書き込めたら OK です。 これを保存しますが、だいたい見當が附きますね。 さうです、始めにブラウザの設定でファイルを置く場所を指定しましたが、そこへ「名前をつけて保存」します。 こゝで氣を附けなければいけないのは、擴張子は必ず .css でないといけません。 いや、實際には .css でなければならない訣でもないのですが取り敢へず。 で、メモ帳なら 次のやうに指定して保存して下さい。

最後にパソコンを再起動して完了です。 制作者が どうだ、かっこいいだろ~ などと自慢しても、あなたの使ってゐるブラウザでは何の變化もありません。 制作者渾身のデザイン(笑)が何も無いやうに見えます。むしろ自分の見易いやうに變へることができます。 これは大事なことで、閱覽者が障礙を持ってゐる場合の大變有效なアクセシビリティになります。

同じブラウザで同じに見えるとは限らない

これはスタイルシートを使ふときの基本的な考へ方です。 人によって見え方が違ふといふのは大切なことでもあります。 でないと盲目の人はウェブページを鑑賞できません。 制作者が見た目に凝るのは惡い訣ではないけれど「餘計なお世話」になると健常者にも嫌がられますし、もとより内容が貧弱では本末轉倒です。

CSSHTML 文書から見た目を切り離すことができるので大變便利です。 今囘はテキストリンクの設定だけでしたが、たいていの事ができます。 CSS ファイルに書く内容について續篇も考へてゐますので、ご期待下さい。

Opera/Mozilla 用のユーザスタイルシートを作りました。 自分で使ふ爲に作ったものですので、使はれる人で適當に修正して使って下さい。 見え方に言いたい放題 の下段にあります。( 2003/05/26 )

實用編 チャレンジ CSS

偉さうな事を言ふオマエはどーなんだ、と思はれる人もゐるでしょう。 無禮のお詫びのシルシに Tips を載せました。 CSS と JavaScript を HTML に組み込んでゐます。 斯う言ふと DHTML のグルグル動くヤツだと思はれさうですが、そんな子供騙しを作る氣はありません。

(2020-11-12) スポットライトやスライド式プルダウンメニューを作ってゐた頃は個人サイト向けの「ホームページの作り方」全盛でした。 内容は百花繚亂といふかピンからキリだったけれど可なり增しなサイトもありました。

いづれにしても DHTML だの DOM だのと能書きを垂れたところで、全ては利用者のブラウザに依存します。 つまり CSS/JavaScript が OFF の環境では何も起きませんし何も變はりません。 HTML のタグ(要素型)で括った中身(要素、たいていは文章)だけが當該ブラウザのデフォルトスタイルで表示されるだけ。 身も蓋もないw

迷惑な動作を OFF にする

カーソルの形狀を勝手に變へられるぐらゐは未だ輕症で、JavaScript や FLASH で訣の分からない物がグルグル動いたり、會社の PC でいきなり音樂が鳴り出すなどの重度の迷惑行爲も泛濫してゐます。 これを迷惑と言ふか何うかは人によって違ふのですが、さう思ふ人もゐると思ひます。 これは簡單に OFF にできます。 IE では、プロパティの セキュリティタブ 内で設定可能です。 もちろん、そんなサイトに二度と行かないのが賢明だけど初見では何うにもならない。

ブラウザの設定箇所

JavaScript を OFF にする爲には、「アクティブスクリプト」の項目の 無效にする にチェックを入れます。 FLASH や 音樂・映像を再生するソフトを立ち上げない爲には、「 ActiveX コントロールとプラグイン」の項目 すべて無效 にしておきます。 これらはリセットボタンで元の設定に戾せます。 詳しくは圖をクリックしてみて下さい。

なぜ これらの設定が「セキュリティ」なのかと言ふと、JavaScript や ActiveX、各種のプラグインはコンピュータウィルスなどに利用され易い爲で、むしろ、これを理由に OFF にしてゐる人もゐるぐらゐです。 他人が作ったソフトなどは晉通、自分で解析できないのが當り前(できる人は職業的プログラマぐらゐ)ですし、たいていは閱覽者や利用者の事前の承諾なしに自動實行されてしまひます。 斯う云ふプログラムが勝手に動作するのは甚だ氣持ち惡い、といふ考へ方もあります。

訣の分からないものがグルグル動いたり、音樂が鳴るのは未だ輕症かもしれません。 本當に怖いのは表面に現れない物です。 ActiveX や WHS などは、PC 内のファイルを讀み書きできます。 また Web で頻繁に使はれる代表の Cookie (クッキーファイル)ですが、これもセキュリテイタブ内で無效にできます。(圖はクリックで大) クッキーは無效にしておいても、閱覽で特に困ることはありません。 クッキー無效で閱覽に困るやうなサイトへは行かない事。

アニメーションなどを停止する

IE のインターネットのプロパティには、詳細設定といふタブがあります。 ウエブページを閱覽する際、特に影響があるのが「マルチメディア」の設定です。 私の場合は 畫像を表示する にチェックが入ってゐるだけで、他はすべて外してゐます。(圖はクリックで大) 晉通にページを見るだけなら、これで困ることはありません。 掲示板など文字情報主體のページでは、畫像表示のチェックも外します。 驚くほど表示が速くなったりします。

「アニメーションを再生する」のチェックをはずすと、カウンター畫像が見えないことがあります。 これはカウンター CGI の多くが利用する汎用ライブラリの所爲で起ります。 たいていフリーで配布される CGI プログラムです。

ホームページ

誰もが同じに見えてゐるとは限らない。 ウェブに於いて見た目は不定。 誰もが同じやうに見えてゐると考へるのは、それこそ「幻想」でしかありません。

全ての閱覽者が例外なしに現行の主要モダンブラウザをデフォルトで使ってゐると假定しても、ハードウェア(ディスプレイなど)の違ひで同じには見えません。 假に全ての閱覽者のハードウェア品質が同じでも、時代が進むに從って新しいブラウザの登場に合せて制作されれば古いブラウザとで同じに見えなくなります。 また視覺障碍者用デバイスなどには見た目が存在しません。 そもそも全ての閱覽者の身體的、精神的狀況およびウェブスキルが同じではありません。 ウェブを利用する全ての閱覽者に「同じに見せる事」はできないゆゑに構造と表現は分離されてゐるのです。

ユーザースタイルシートはアクセシビリティの第一步。

ご意見ご感想など
メール(ユーザースタイルシートについて)メールのヘルプ

スライドメニュー

CSS/JavaScript ON の状態で動作するスライド式プルダウンメニューです。CSS/JavaScript OFF でも使へます。

中年から始めるウェブページ

2020/11/12 (©2020 MIYAKE_ryutaro)