So-net無料ブログ作成
検索選択
HTML & CSS ブログトップ

アクセスアップのためのブログで使えるCSS(スタイルシート)研究 【その4】 [HTML & CSS]

アクセスアップのための
ブログで使える
CSS(スタイルシート)
研究 【その4】 
ユーザースタイルシートを
なぜ使うのか?
どのように使うのか?

古い話ですが、去年(2005)12月1日に僕がGOOの『デンマンのブログ』に書いた記事(『アクセスアップのためのブログで使えるCSS(スタイルシート)研究 【その2】』)に次のようなコメントをもらいました。
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

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

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

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

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

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

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

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



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

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

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

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




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

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

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

1) 文字が小さくて読みづらい

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

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

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

5) 段落のインデント(段落1行目の引っ込み、字下り)をとっていないので、見づらい

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

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

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

1) 製作者スタイルシート
2) ユーザスタイルシート
3) デフォルトスタイルシート

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

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

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

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

<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 (スタイルシート) をどのように使ったらよいのか教えてください』
 
では、今日も元気良く楽しくネットサーフィンしましょうね。

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

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

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

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

あなたが絶対、
見たいと思っていた
面白くて実にためになるリンク




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

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

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

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

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

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

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

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

またお会いしましたわね。
卑弥子ござ~♪~ます。
では、今日も一日楽しく愉快に
ネットサーフィンしましょうね。


アクセスアップのためのブログで使えるHTML研究 【その1】 うまく写真を貼り付けるには? [HTML & CSS]

アクセスアップのための
ブログで使えるHTML研究 【その1】 
うまく写真を貼り付けるには?

まずサンプルとして11月3日に書いた次の記事を見てください。


秋の行楽といえば、やっぱり紅葉狩りですよね。
でしょう?

あたしは日本に行ったのはわずかに3度だけですけれど、紅葉の見事なのには本当に息を飲み込むほど圧倒されたことを今でも鮮やかに記憶しています。

紅葉は9月中旬ごろ北海道の高地から始まるそうですよね。

徐々に南下して、11月ごろ関東地方の紅葉も各所で見ごろを迎えるそうですよ。
桜前線とは逆向きになるわけですよね。

今年は平年より気温が高めだということです。
そういうわけで、見ごろの時期は例年より遅くなるそうです。

紅葉は、気温の低下と日光に関係するのですって。
気温が低くなると木は冬支度を始めます。
葉と枝の間の養分と水分の流れが少なくなり、光合成で作られる糖分は葉にたまります。

この糖分が赤い色素に変化する一方で、夏の間光合成を行っていた葉緑体の緑の色素は壊れていくのだそうです。
赤い色素が増えて緑の色素が減ってゆきます。
それで、葉が赤く色づくわけです。

ところで、昼間お天気がよく夜にぐっと冷え込むと、鮮やかに紅葉するといわれています。

美しく色づくには適度の水分の必要です。
この水分が欠乏すると、色づく前に枯れてしまうのです。

そういうわけで、紅葉の名所といわれる場所に渓谷が多いのは、日当たりと水分、そして夜間の冷え込みを兼ね備えた場所だからなのですね。

これから見ごろとなる関東の紅葉スポットをいくつか紹介しますね。

群馬県の妙義山、
栃木県の日光東照宮周辺
茨城県の袋田の滝。
いずれも見ごろ予想は11月上旬~中旬。

埼玉県の長瀞は11月中旬~下旬、
千葉県の養老渓谷は11月中旬~12月上旬が見ごろと予想されています。

大自然の中の圧倒されるような紅葉は素晴らしいですが、
神奈川県の鶴岡八幡宮や東京の神宮外苑のイチョウも風情がありますよ。
どちらも見ごろは11月中旬~12月中旬ということです。
イチョウやブナなどは緑の色素が減少して
もとからあった黄色の色素だけが残ることで黄色く色づくのだそうですよ。

では、あなたもぜひ紅葉狩りを楽しんでくださいね。
ええっ?安くて快適なホテルや旅館を知っていたら紹介して欲しいのですか?
あなたもネットで調べたらいかがですか?

きっとお忙しいのでしょうね。
たまたま、あたしが調べたばかりですから、ここにご紹介します。

【 関東地区 】 

 ◆ホテル塩原ガーデン (栃木県 塩原温泉郷)
  ◎紅葉と塩原温泉、秋の味覚を満喫する[激安]プランも大好評!
  1泊朝食付 通常 9975円~ → 会員 4987円~
  最大50%OFF!
 
 ◆山のホテル ASANO (群馬県 嬬恋)
  ◎草津白根山は紅葉の見頃です!地元産食材たっぷりの料理もどうぞ!
  1泊食事なし 通常 5000円~ → 会員 2500円~
  最大50%OFF!
 
 ◆ホテルニュー川治 (栃木県 川治温泉)
  ◎龍王峡の紅葉は鬼怒川の渓谷美と相まって、その美しさは格別です!
  1泊2食付 通常 10500円~ → 会員 6930円~
  最大34%OFF!
 
 ◆風花の宿 寶ホテル (群馬県 水上)
  ◎奥利根の坤六峠~奈良俣ダムへと日ごとに南下していく紅葉前線を満喫
  1泊食事なし 通常 8201円~ → 会員 4389円~
  最大46%OFF!
 
 ◆湯の家 (栃木県 奥日光湯元温泉)
  ◎奥日光は今が見頃!湯の湖畔を散策しながら紅葉狩りを楽しめます!
  1泊2食付 通常 8400円~ → 会員 4872円~
  最大42%OFF!


ええっ?
どのようにしたら会員になれて
安く利用できるの?
そう、お聞きですか?
次のリンクを
クリックしてくださいね。
『あなたがお得な旅をできるように。。。』
じゃあ、あなたも
日本のすばらしい紅葉を
満喫してくださいね。
Have a good trip!



長くて申し訳ありませんでした。ここまでがサンプルです。

画像(あるいは写真やイラスト)のないウェブページというのは“クリープの入らないコーヒー”のようなものですよね。
何かが物足りない!
ネットがここまで爆発的に広まったのはGUI(graphical user interface)によるところが大きいですよね。
つまり、今あなたが見ているブラウザーのトップ・バーやボトム・バーにある小さな画像(アイコン)をクリックすることで、いろいろなプログラムを起動することができます。

今から15年程前にはGUIはまだ目新しかった。
どうしていたかというと黒い画面の一番下に点滅するカーソルが現れます。
そこに起動したいプログラム名をキーボードをたたいて書き込みます。
そしてEnterキーをたたいて初めてプログラムが動きます。

現れるプログラムも文字がほとんどでした。
画像らしきものといえば文字で書いた次のような落書き程度のものでした。

        ,,,--─===─ヽ/へ 
      /iiiiiiiiiiiiii彡≡≡≡|≡ヾ ヽ 
     iiiiiiiiiiiiiiiiiii彡≡≡≡≡|≡ミミヾ丶 
    iiiiiiiiiiiiiiiiiiii/ ̄ ̄ ̄ ̄ ̄ ̄\ミiiiiiヽ 
   iiiiiiiiiiiiiiiiii/             \iiiiiiiゞ 
   iiiiiiiiiiii/                \iiヽ 
  iiiiiiiiiiiiiii《    ━━━'/  ヽ━━━ ヽミヽ 
 ...iiiiiiiiii彡/      __,.::  :: __  ヽiiiii| 
 ..iiiiiiiiiiiii》|             :::      |iiiii| 
 iiiiiiiiiiiiiiii|,                     |iii| 
..iiiiiiiiiiiiiiiiii,         ( ● ● )      .|iiii| 
iiiiiiiiiiiiiiiiiiiiiii       》━━━━《       |iiiii| 
iiiiiiiiiiiiiii《《《ヽ     》 / ̄ ̄\ 《     |iiiiiiii| 
iiiiiiiii《《《《《《《《    《《 \ ̄ ̄/ 》》   |iiiiiiiiiii| 
iiiiiiiiiiii《《《《《《《《《《《 》》   ̄ ̄  《《 》》》》》iiiii| 
iiiiiiiiii《《《《《《《《《《《《《《《《《《《《》》》》》》》》》》》》》》iii| 
iiiiiiiiiiiiiii巛巛巛巛巛巛巛巛巛》》》》》》》》》》》》》》IIII 
iiiiiiiiiiiiiiiiiiiiii巛巛巛巛巛巛巛巛》》》》》》》》》》》》iiiiiii 

現在では、上のサンプルに見るようなすばらしいシャロンさんの写真を載せることができます。
どうせ載せるなら、きれいにページに貼り付けたいですよね。
僕は上のシャロンさんのドレスが紅葉の写真に引っかかって隠れてしまっているのが気になりませんが、あなたは、もしかすると、重なっているのが気になるかもしれません。

ではどうしたらよいのか?
そのことを示すために上の長いページを書き出したというわけなのです。

では、重ならないようにして次に表示してみます。

秋の行楽といえば、やっぱり紅葉狩りですよね。
でしょう?

あたしは日本に行ったのはわずかに3度だけですけれど、紅葉の見事なのには本当に息を飲み込むほど圧倒されたことを今でも鮮やかに記憶しています。

紅葉は9月中旬ごろ北海道の高地から始まるそうですよね。

徐々に南下して、11月ごろ関東地方の紅葉も各所で見ごろを迎えるそうですよ。
桜前線とは逆向きになるわけですよね。

今年は平年より気温が高めだということです。
そういうわけで、見ごろの時期は例年より遅くなるそうです。

紅葉は、気温の低下と日光に関係するのですって。
気温が低くなると木は冬支度を始めます。
葉と枝の間の養分と水分の流れが少なくなり、光合成で作られる糖分は葉にたまります。

この糖分が赤い色素に変化する一方で、夏の間光合成を行っていた葉緑体の緑の色素は壊れていくのだそうです。
赤い色素が増えて緑の色素が減ってゆきます。
それで、葉が赤く色づくわけです。

ところで、昼間お天気がよく夜にぐっと冷え込むと、鮮やかに紅葉するといわれています。

美しく色づくには適度の水分の必要です。
この水分が欠乏すると、色づく前に枯れてしまうのです。


どのようにすたかというと次のように clear=right をブレイク(改行)・タグと一緒に使いました。

<br clear=right>
<img src="../images/redleaf5.jpg">

場合によってはページ・タグを使っても同様な効果があります。

<p clear=right>
<img src="../images/redleaf5.jpg">

この clear=right の意味は“画像の右側が他の文字や画像と重ならないようにしなさい(障害物を片付けなさい;きれいにしなさい)”という命令です。
この命令をブラウザーが受け取って、上のように重ならないように表示するわけです。

シャロンさんの写真が、左側にある場合には次のようにします。

<br clear=left>
<img src="../images/redleaf5.jpg">

この clear=left を取り外すと2番目のシャロンさんの写真と文章ブロックは次のようになってしまいます。

ええっ?
どのようにしたら会員になれて
安く利用できるの?
そう、お聞きですか?
次のリンクを
クリックしてくださいね。
『あなたがお得な旅をできるように。。。』
じゃあ、あなたも
日本のすばらしい紅葉を
満喫してくださいね。
Have a good trip!

<br clear=left> これが取り外されています。

長くて申し訳ありませんでした。ここまでがサンプルです。



片方だけじゃなく、もし両側が重ならないようにしたいのであれば次のように書きます。

<br clear=all>
<img src="../images/redleaf5.jpg">

あなたもぜひ試してみてください。

注意: “<” と “>” は実際に使う時にはすべて半角を使ってください!


ところでシャロンさんの写真が文字列(文字ブロック)の右側にはってありますよね。
このように写真を貼るにはどのようにしたら良いのか?

つまり、写真を“右回り込み”あるいは“左回り込み”に貼るのってどうするの?
それはこのシリーズの次の回 【その2】 でお伝えします。
楽しみにしていてください。


HTML & CSS ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。