デンマンのブログ

デンマンが徒然につづったブログ

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

2005-11-27 07:22:10 | ネットストカー・荒らし・インターネット


アクセスアップのための

ブログで使える

CSS(スタイルシート)研究 【その1】 

引用文をはっきり、くっきり区別する


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

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


きもいって

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



消えてくれ

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


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


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

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



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

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

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

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

この事だったんだね。


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



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

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

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


>きもいって

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

>消えてくれ

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

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

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

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

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

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

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

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

>この事だったんだね。

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




こうして比べてみると歴然としていますよね。
つまり、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で背景の色を指定します。
何百万色もの色が指定できますから、すべての色に名前が付いているわけではありません。
それで16進法の数で色を指定します。#サインが16進法であると言う事をブラウザーに教えているわけです。

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

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

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

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

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

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

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

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

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


dotted



dashed



solid



double



groove



ridge



inset



outset


注意: 分かりやすく Width (太さ)を

    大きくして表示しています。


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






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

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



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

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

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

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

コメント (8)   この記事についてブログを書く
« 心の痛みを話す気になりまし... | トップ | “言論の自由と民主主義” »

8 コメント

コメント日が  古い順  |   新しい順
はじめまして (kiya2014)
2005-11-27 22:37:12
そういうときは、という「引用のため」の要素を使用する方がよいです。

なぜかというと、CSSはテキストの”見た目”を指示するものであるのに対して、引用というのはテキストの”構造”であるので、CSSをいじって引用を表現するのは適切とは言えないからです。

(たとえば、視覚に障害のある人が、を使って引用を表したサイトを閲覧した場合、声でテキストを読み上げてくれる補助ソフトウェアが引用部分を引用として認識できないため、正確にテキストの意図を把握することが困難になってしまいます)
あなたは間違っていますよ! (デンマン)
2005-11-28 07:53:29
“CSSをいじって引用を表現するのは適切とは言えないからです”



この件に関して、あなたは99%間違っていますよ。

テキストの構造だからCSSをいじって引用を表現するのは適切とはいえない、という根拠をあなたは明確に言っていませんよ。



CSSでも視覚障害者を除けば、十分に構造的に引用であることを明確に表示する事が出来ます。視覚障害者であっても、ちょっと工夫すればCSSを使った引用の仕方で全く問題がありませんよ!



あなたは、後から視覚障害者のことを出して言っているに過ぎない。それを拡張解釈して“CSSをいじって引用を表現するのは適切とは言えないからです”と言っている。



つまり、あなたの論法に従うなら、初めに視覚障害者の事を書くべきなんですよ。

あなたの批判の仕方は本末転倒になっている!

批判の仕方をあなたは知らないようですね!



もっと勉強してから批判するようにしてくださいね。

あなたのような薄っぺらな批判の仕方では説得力に欠けますよ!



僕のCSSの使い方に問題があるとするなら、何をさておいても“視覚障害者”の事を最初に持ち出すべきですよ。



それ以外に説得力はないんです!



CSSがどうしてこれだけ普及したか?

あなたは考えた事がありますか?

ネットがどうしてこれだけ普及したか?

あなたは考えた事がありますか?



あなたはネットの歴史を知らない。

あなたはCSSの歴史を知らない。



だから俯瞰的な見方が出来ない。



ネットは視覚に障害のある人を対象にして発展してきたものではないんですよ。

視覚正常者をメインに発展してきたんですよ。



だから例えばGUI(Graphical User INterface)のような視覚に訴える技術が目覚しく発展した事がネットを爆発的に普及させる事になった。



この“視覚に訴える”と言う技術的な思想のもとで画像だとか、動画だとかアニメだとか、CSSが普及してきたわけです。



もちろん、障害者もネットに参加できるよう、技術的なサポートもたくさんなされるようになりました。音声で文章を読む技術などがその例です。



あなたはネットの歴史的なバックグラウンドをほとんど知らないから次のような無知な事を言っている!



“CSSをいじって引用を表現するのは適切とは言えないからです”



これはすでに僕が言ったように99%間違っている!



あなたの論法に従うなら、“視覚障害者のことも考えたほうが良いと思います”と言うべきだったんですよ。



つまり、簡単な事なんですよ。

枠の中の最初のところに次の語句を付け足せばそれですむ事なんですよ。



【引用】



あなたの勉強不足のために、こういうちょっとした事を見落としている!



あなたの無知のために、あなたはCSSを“不適切”と決め付けている。



あなたのような稚拙な批判の仕方では、CSSのすばらしさを知っている人、ネットの歴史的背景を知っている人を説得する事は出来ないですよ。



でも、とにかく、URLを書いたうえでコメントを付けてくれてありがとう。

まじめに書いてくれたと言う事が良く分かります。

でも、あなたが勉強不足だということも良く分かりました。もっとネットを勉強してくださいね。もっとCSSを勉強してくださいね。それから、また僕のCSSの使い方を批判してくださいね。お待ちしています。



僕の記事にはめったにコメントが付きません。

なぜなら、どのようなコメントを書いてくれても、僕は必ず反論するからです。

へへへへ。。。。



自我意識が強いのでしょうか?

でも、勝った負けたと言う次元で反論しているんじゃないんですよ!

僕なりに正論を吐いているつもりです!



また気が向いたらコメント書いてくださいね。

とにかくコメントありがとう。

じゃあね。

Unknown (CSSビギナ)
2005-11-28 10:56:32
> CSSでも視覚障害者を除けば、十分に構造的に引用であることを明確に表示する事が出来ます。視覚障害者であっても、ちょっと工夫すればCSSを使った引用の仕方で全く問題がありませんよ!

blockquoteやqで引用を示さないで、どうしてその部分が引用だと分かるんですか? 周囲が線で囲われていれば引用なのですか?



> 僕のCSSの使い方に問題があるとするなら、何をさておいても“視覚障害者”の事を最初に持ち出すべきですよ。

CSSの使い方には問題はないと思いますが、HTMLの使い方に問題があると思いますよ。



> あなたはネットの歴史を知らない。

> あなたはCSSの歴史を知らない。

詳しく教えてください。

どうも私の把握しているCSSの歴史と違っているようなので。
ネチケットを知らない愚か者のCSSビギナへ (デンマン)
2005-11-28 12:51:04
>でも、とにかく、URLを書いたうえでコメント

>を付けてくれてありがとう。

>まじめに書いてくれたと言う事が良く分かります。

=============================================



Unknown (CSSビギナ)へ:



オマエは上の僕の文章を読んでいるくせに、どうして世界のネチケットを忘れているの?



他では許されるかもしれないけれど、僕のブログではオマエのような非常識で世界的に見て無教養な“井の中の蛙”は招かれざる客なんだよ!



どうして、オマエは自分のブログかホームページのURLを書かないの?



どうして、正々堂々と僕のコメントに対して批判が出来ないの?



オマエは世界的に見て、知性と教養の点で小学校3年生程度ですよ!



なぜか?



これから説明しますよ!



僕がこれまでに投稿を交わした最少年齢者は10歳でしたよ。小学校4年生でした。彼はちゃんと自分のホームページのURLを残した上で僕にコメントを書いてくれましたよ。



オマエは小学校4年生が持っている常識を身につけていない!恥ずかしいと思いな!

羞恥心があるんだろう?ん?

どうなの?



僕のブログの他の記事を読んでいたのなら、オマエのような馬鹿なことは書かないものだよ!



味噌汁で顔を洗って出直してきな!!



URLをしっかり書いてから次のような事を書くものだよ!それが礼儀と言うものだ!



------------------------------------------

>> あなたはネットの歴史を知らない。

>> あなたはCSSの歴史を知らない。



>詳しく教えてください。

>どうも私の把握しているCSSの歴史と

>違っているようなので。

------------------------------------------



このように“お願い”する時にはね、URLを書くという最低限度の礼を示すものだよ!



オマエには小学校4年生が身につけている常識がないという点で、知能程度と教養程度が小学生3年生以下だと言ったわけなんだよ!



理解できたかい?



分かったら、もう一度ネチケットをじっくり考えてから書き直しな!



分かったかい?

小学校3年生でもよく分かるように噛んで含めるように書いたからねぇ。分かったろう?

じゃあね。



オマエの事を馬鹿にしたわけじゃないよ!

オマエにはこれまで僕のように正直に率直に説教する人間が居なかったようだから、僕がその役を買って出たまでのことだよ!へへへへ。。。



じゃあね、真人間になって出直してきてね。

お願いします。ねっ?



引用に使用するタグについて (rainbowsazaki)
2005-11-28 15:39:11
引用部をスタイルシートを用いて装飾し、引用以外との違いを視覚的に示すことは、デンマンさんの言うように、読みやすい文章を作るうえで大切なことでだと思います。



しかしながら、文章の強調部を指定するのにstrongタグおよびemタグ、段落の見出しを指定するのにh1タグ、h2タグ、h3タグ、h4タグ、h5タグ、h6タグ、があるように、印象部であることを指定するためのタグとして、blockquoteタグ、qタグ、citeタグがあります。



divタグは、スタイルシートの指定などを行うための、文章構造の意味づけを持たないタグであり、引用部を装飾する場合は、blockquoteタグを使用した上でスタイルシートを指定するのが適切ではないかと思われます。



先に書かれたkiya2014さんが言おうとしていたことは、こういうことではないのでしょうか?
先ほどのコメントの訂正 (rainbowsazaki)
2005-11-28 20:22:32
再度の投稿失礼します。



先ほどのコメントの第2段落後半の『印象部であることを』は、『引用部であることを』の間違いでした。

また、第1段落の最後の『大切なことでだと思います。』は、"で"が余計でしたし、第2段落の『h6タグ』の後の句読点も、ほかの部分の流れを考えると余計でした。

見苦しい文章になってしまったことをお詫びします。
ささいなことですが (一ファン)
2005-11-29 01:07:56
ブログかホームページ(最近はWEBサイトと言うようですね?)を持っていないとコメントしてはいけないのでしょうか
日本は自由な国ですからね、僕が何をほざこうが、 (デンマン)
2005-11-29 07:26:09
“ささいなことですが (一ファン) ”さんへ:



日本は自由な国ですからね、僕が何をほざこうが、

原則として何をしてもいいんですよ。



ただし自分のしたことには責任を持つべきでしょうね。



一ファンさん、もちろん、ブログやホムペを持たなくてもコメントして結構ですよ。



でも、たとえば、メールアドレスを持っているでしょう?プロバイダーのメールアドレスを使うのがイヤなら、無料アドレスでもいいですよ。



僕が何を言いたいかというと、責任を持って正々堂々とコメントをつけるのであれば、URLやメールアドレスを書かなくてもいいですよ。



しかし、まじめで責任を持ってコメントを付けていると言う事を示すにはURLを書くのが手っ取り早いですよ。



なぜなら、逃げも隠れも出来ませんからね。

URLをたどってゆけば、コメントを書いた人物がどのような内容の記事を書いているかが分かる。

つまり、いい加減な事は書けない筈ですよ!

そのために、僕はURLを持ち出したのです。



ちなみに、2ちゃんねるを見てくださいよ。

僕のブログがああなっては困るんです。



2ちゃんねるで匿名でコメントを書いている連中は、僕の基準では95%いい加減な事を書いて、都合が悪くなると消えてしまう極めて無責任な愚か者たちです。



そのような連中が書くような、いい加減なコメントを僕のブログで書いてもらいたくない!



僕はそのことが言いたかったんですよ。



そういうわけですから、正々堂々と責任ある態度で書いてくれるものなら、URLなどどうでもいいんですよ。



愚か者のCSSビギナには、そのようなまじめな態度が僕には少しも感じ取れなかったんですよ。

初めから逃げ腰で書いている。



rainbowsazakiさんの書いたコメントと愚か者のCSSビギナ書いたコメントの違いがそこにあるんですよ。



分かってもらえましたか?

よろしくね。

これからも気が向いたらコメント書いてくださいね。



この件に関しては、すべてのコメントを僕の記事に書いて、明日か明後日の記事に書くつもりでいます。



楽しみにしていてください。

じゃあね。

コメントありがとう!

コメントを投稿

ネットストカー・荒らし・インターネット」カテゴリの最新記事