アクセスアップのためのブログで使えるCSS（スタイルシート）研究 【その１】 引用文をはっきり、くっきり区別する

アクセスアップのための
ブログで使える
CSS（スタイルシート）研究　【その１】　
引用文をはっきり、くっきり区別する

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

僕が書いた記事に対して３つのコメントをもらいました。
そのうちの２つは同一人物の書いたものです。
次のようなものでした。

きもいって

by あ at 2005-11-10 (Thu) 23:07

消えてくれ

by あ at 2005-11-10 (Thu) 23:08

本人は身元が分からないと思って、こういういい加減で無責任な事を書いているんですよね。
でもね、この稚拙で幼稚な公衆便所の落書きを書いた人物のIPが分かり、身元が判明したらどうする気なんですかね。
ところで、この愚か者の身元を突き止めるのは難しい事ではないんですよ。

どうだい、お父さんはね、オマエと同じ年頃の頃、こういう愚かな事を書いていたんだよ。

だから分かるだろ、オマエもお父さんと同じで愚かな子供なんだよ。

そうだね、お父さんも、こういう馬鹿なことを書いていたんだね。

どうして僕が馬鹿だか、これを読んで初めてよく分かったよ。

“この親ありてこの子あり”

学校の先生がそういうことを言っていたよ。

この事だったんだね。

こういうメールがあなたのパソコンに送られないためにも、
１行じゃなくて、せめて高校生程度の文章を書いてくださいね。
これでは小学校１年生と言われても仕方が無いですよね。へへへ。。。

---

全文は次のリンクをクリックして読んでください。
『公衆便所の落書きは文芸と言えるでしょうか？』

これをこれまでの掲示板のやり方を使うと次のようになります。

僕が書いた記事に対して３つのコメントをもらいました。
そのうちの２つは同一人物の書いたものです。
次のようなものでした。

＞きもいって

by あ at 2005-11-10 (Thu) 23:07

＞消えてくれ

by あ at 2005-11-10 (Thu) 23:08

本人は身元が分からないと思って、こういういい加減で無責任な事を書いているんですよね。
でもね、この稚拙で幼稚な公衆便所の落書きを書いた人物のIPが分かり、身元が判明したらどうする気なんですかね。
ところで、この愚か者の身元を突き止めるのは難しい事ではないんですよ。

＞どうだい、お父さんはね、オマエと同じ年頃の頃、こういう愚かな事を書いていたんだよ。

＞だから分かるだろ、オマエもお父さんと同じで愚かな子供なんだよ。

＞そうだね、お父さんも、こういう馬鹿なことを書いていたんだね。

＞どうして僕が馬鹿だか、これを読んで初めてよく分かったよ。

＞“この親ありてこの子あり”

＞学校の先生がそういうことを言っていたよ。

＞この事だったんだね。

こういうメールがあなたのパソコンに送られないためにも、
１行じゃなくて、せめて高校生程度の文章を書いてくださいね。
これでは小学校１年生と言われても仕方が無いですよね。へへへ。。。

---

こうして比べてみると歴然としていますよね。
つまり、CSSを使って表示すると引用文をはっきりと区別する事が出来、
しかも、肌理（きめ）の細かい指定が可能です。
要するに四角い枠で囲みますから、引用文である事がはっきりします。
またその範囲もはっきりと分かります。
色の違いによって“誰の言葉か”と言う事も明確にする事が出来ます。

何よりも引用文が引き立ちます。読者の注意を引き、単調な文章にアクセントを付けてくれます。
つまり、白黒の文面に花が咲いたような華やかな雰囲気をかもし出す事が出来ます。

では、CSSを使ってどのようにすれば上のようなことが出来るのか？

では、上のコードを次に示します。

＜div style="background-color:#F0FFFF;padding:20px;border:solid blue 1px;"＞
きもいって

by あ at 2005-11-10 (Thu) 23:07
＜/div＞

＜div style="background-color:#F0FFFF;padding:20px;border:solid blue 1px;"＞
消えてくれ

by あ at 2005-11-10 (Thu) 23:08
＜/div＞

＜div style="background-color:#FFE4E1;padding:20px;border:solid red 1px;"＞
どうだい、お父さんはね、オマエと同じ年頃の頃、こういう愚かな事を書いていたんだよ。

だから分かるだろ、オマエもお父さんと同じで愚かな子供なんだよ。
＜/div＞

＜div style="background-color:#F0FFF0;padding:20px;border:solid green 1px;"＞
そうだね、お父さんも、こういう馬鹿なことを書いていたんだね。

どうして僕が馬鹿だか、これを読んで初めてよく分かったよ。

“この親ありてこの子あり”

学校の先生がそういうことを言っていたよ。

この事だったんだね。
＜/div＞

注意：　＜　と　＞　は実際には半角を使ってください。
　　　　表示用に全角を使ってあります。

background-colorで背景の色を指定します。
何百万色もの色が指定できますから、すべての色に名前が付いているわけではありません。
それで１６進法の数で色を指定します。＃サインが１６進法であると言う事をブラウザーに教えているわけです。

色の名前で指定したい場合は次のテーブルを見て下さい。
『主な色の名前とそれに対応する数値』

すべてのブラウザーがこの色の名前を理解できるとは限りません。
だから、数値で指定すれば間違いあリません。

paddingで文字部分と枠の間の隙間を指定します。
px　は pixel (picture cell) の略です。
1 px は約　０．２８ｍｍ　です。

詳しい事が知りたいのであれば次の記事を読んでください。
『CSSで使われる単位』

border　で枠の種類（style）と色（color）と太さ（width）を指定します。
この３つの属性はどのような順序で並べてもかまいません。
属性と属性の間はスペースで区切ってください。

別々に指定する事も出来ます。
そうする時には次のようにします。

bordey-style:solid; border-color:green; border-width:1px;

主に使われるのは次の８つのstylesです。

dotted, dashed, solid, double, groove, ridge, inset, outset

dotted

dashed

solid

double

groove

ridge

inset

outset

注意：　分かりやすく　Width　（太さ）を
　　　　大きくして表示しています。

あなたも試してみてください。
では、今日も元気良く楽しくネットサーフィンしましょうね。

---

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

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

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

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

“Border”を使って、こった“囲み”を作りたい人のために！

■　『Boaderについての詳しい情報』