デンマンの書きたい放題:HTML CSS

カテゴリ：HTML CSS

• アクセスアップのためのブログで使えるCSS（スタイルシート）研究　【その４】
  [ 2006-03-18 12:01 ]

アクセスアップのためのブログで使えるCSS（スタイルシート）研究 【その４】

アクセスアップのための

ブログで使える

CSS（スタイルシート）

研究　【その４】　

ユーザースタイルシートを

なぜ使うのか？

どのように使うのか？



古い話ですが、去年（２００５）１２月１日に僕がGOOの『デンマンのブログ』に書いた記事（『アクセスアップのためのブログで使えるCSS（スタイルシート）研究　【その２】』）に次のようなコメントをもらいました。
yama君のコメントなんですよね。懐かしいですね。
一度使いましたが、再度使わせてもらいます。うへへへへ。。。。
（マジで貴重なコメントでした！）

CSSはHTMLの補助として視覚効果をサポートする物だと認識してますが (yama.R)

2005-12-01 22:53:48

Webを閲覧する環境というのは普通のWindowsのIEのように、Webサイト側のCSSを完全に解釈しているとは限りません。
CSSをほぼ無効状態にして読んでいる人も多いです。
例えば弱視の人の場合、小さくて背景色と近い色をCSSで指定しているサイトはとても読みにくいはずです。
そういう人の中には当然手元でWebサイト側のCSSを無効にして、強制的にユーザーCSSで背景色を白、文字色を黒、文字を大きくしている人も出てくるはずです。

その場合、Divに背景色と枠線を指定しただけだと、引用部分と他の部分との区別がつかなくなってしまうはずですが、引用部分に使うと定義されている（はずの）Blockquoteを使っていれば、その人のユーザーCSSがしっかりしていれば引用部分であるとわかるように表示されます。
そういうところでBlockquoteなどの定義通りのHTMLを使う意味が出てきます。

実際、CSSを使えば、デンマンさんのされているDiv要素に背景色と枠線をつけるやり方とまったく同じデザインをBlockquoteにも定義できますし、わざわざDivでこだわる必要は無いと思います。
それと、「引用」と表示するというのもいいんですが、Blockquoteで囲われているほうが「視覚的に」わかりやすいと思いますよ。

Web制作者側の自由だけでなく、閲覧する側の自由も考えて頂きたいものです。
わかりにくい文章ですみません。

ありがとう。よく分かりますよ。 (デンマン)

2005-12-02 11:00:32

＞Web制作者側の自由だけでなく、
＞閲覧する側の自由も考えて頂きたいものです。

もちろん閲覧者側の自由を妨害するつもりはありませんよ。

よく分かりました。

コメントありがとう。

強制は出来ませんが (大館)

2005-12-02 16:42:59

background を指定するのであれば、color も指定していただけないでしょうか？
黒地に白文字となるようユーザスタイルシートを当てているので読むのに苦労します。
ご一考ください。

あなたのような人も居るものですね (デンマン)

2005-12-03 06:53:48

なるほどォ～
あなたのような人も居るものなんですねええ～～
言われてみないと全く分かりませんねえぇ～～

もう１０年以上も前の話ですが、僕は遅いCPUを使っていたので画像をロードするのに時間がかかり、画像をすべてシャッタアウトしてウェブページを読んでいたことがありますよ。

しかし、あなたのように黒地に白文字に指定しているというのはこれまでに聞いた事がありませんね。

いろいろな人が居るものですね。

でも、２０年前には黒地に白文字がスタンダードでしたからね。あなたもその頃からやっているのですか？

黒地に白文字なんて。。。懐かしいですねぇ～～

東名高速を走っていてT-フォードを見るようなものですよ。へへへへ。。。



これは失礼。。。。
馬鹿にするつもりではありませんよ。。。
DOSを使っていた２０年前の黒地に白文字の頃が懐かしいですよ。

それから思うと、現在は夢のようですね。
ネットの世界で２０年前は大昔も大昔という感じがしますよね。
江戸時代より前のような感じがしますよ。へへへ。。。

colorを指定するぐらい、どうって事ないですから、これから指定するつもりですよ。

とにかく、コメントありがとうございました。
いろいろ考えさせられましたよ。

ユーザースタイルシートって何？

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

適切なユーザースタイルシートを使えば、次のような問題を解決することができます。

１）　文字が小さくて読みづらい

２）　文字の色と、背景の色が似通っていて読みづらい

３）　文字の色と、背景の色とのコントラストが強すぎて目がチカチカする

４）　背景に画像を敷き詰めていて、文字が読めない

５）　段落のインデント（段落１行目の引っ込み、字下り）をとっていないので、見づらい

６）　文章は面白いのだが、デザインが気に食わない

７）　なぜかスクロールバーの色が変わってしまって、気になる

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

１）　製作者スタイルシート
２）　ユーザスタイルシート
３）　デフォルトスタイルシート

この順にスタイルシートが優先されます。
つまり、製作者のスタイルシートが最も優先されます。

スタイルシートには上の３つがあります。

製作者スタイルシートと言うのはブログの記事を書いた人がその記事の中で使っているスタイルシートです。
ホームページなどではスタイルシートはまとめてひとつの別ファイルにして使うこともできます。

ブログの場合は記事の中に次のようにスタイルシートの属性と属性値を書き込んで使います。
（上の大舘さんのコメントはこのようにして表示されています。）

＜div style="color:navy;background-color:#F0FFF0;padding:20px;border:solid green 1px;"＞
強制は出来ませんが (大館)

2005-12-02 16:42:59

background を指定するのであれば、color も指定していただけないでしょうか？
黒地に白文字となるよう＜font color=red＞ユーザスタイルシート＜/font＞を当てているので読むのに苦労します。
ご一考ください。
＜/div＞

ユーザスタイルシートは、あなたがこのページを見るために使うことができるスタイルシートです。
次のようにスタイルシートのファイルを作って指定します。

IE(Internet Explorer)でのユーザスタイルシート適用方法は、

ツール(T) --> インターネットオプション(O) --> ユーザ補助(E)

でスタイルシートファイル(filename.css)を指定します。

ただし、ユーザスタイルシートを指定したとしても、製作者スタイルシートが優先されるので、負けてしまいます。
しかし、importantキーワードを指定することにより、逆転勝ちすることができます。
製作者スタイルシートでimportant指定しても、ユーザスタイルシートのimportant指定の方が優先されます。

デフォルトスタイルシートとは、ブラウザのデフォルトスタイルシートのことです。
スタイルシートが何も指定されてなければ、あなたのブラウザのスタイルシートが使われるわけです。

スタイルシートについてもっと詳しく知りたいなら次のリンクをクリックして読んでください。

『ブログでCSS　（スタイルシート）　をどのように使ったらよいのか教えてください』
　
では、今日も元気良く楽しくネットサーフィンしましょうね。





まだ読んでいないなら『ブログ入門・虎の巻』を下のリンクをクリックして読んでください。
ためになること請け合いです！

■　『たくさんの人に読んでもらえるブログの作り方』



新しいブログを探している人のために！
次のリンクをクリック！

■　『あなたが探していたブログはこれですよ！』

あなたが絶対、

見たいと思っていた

面白くて実にためになるリンク


■　『笑いが止まらない、お笑い掲示板』

■　『ちょっと変わった　新しい古代日本史』

■　『興味深い写真や絵がたくさん載っている世界の神話』

■　『現在に通じる古代オリエント史の散歩道』

■　『見て楽しい、読んで面白い　私版・対訳ことわざ辞典』

■　『笑って楽しめる　私版・対訳　慣用句・熟語辞典』

■　『辞書にのってない英語スラング』

■　『オンライン自動翻訳利用法』




またお会いしましたわね。

卑弥子ござ～♪～ます。

では、今日も一日楽しく愉快に

ネットサーフィンしましょうね。