電子書籍の厳選無料作品が豊富!

最近FC2ブログを始めました
それでネットやパソコンの知識は、ありますが
ブログの運営は初心者です

それで、先日
文字の背景に色を付け様としたんですが
上手く行きません
詳細を言わせて頂くと、ブログの記事の中に
他のHP等の文章を引用した時等

区別する為に、色分けを考えました

それで、こういうHPを見つけて
http://www.d3.dion.ne.jp/~tiyoko01/7tagu/hashoku …

<body bgcolor="black" text="#ffffff">
<p>色を掛けたい文字</p>

このタグを入れましたし、blackの部分は
色の数字(?)も入れたんですが、上手く反映されません

それで現在設定してるのタグは
それに近い反映で、文字の上だけに色が付くタグとして
<span style="background-color: rgb(0, 204, 255);">色を掛けたい文字</span>
を入れてます

ただ、この設定だと
文字と文字の間の行は掛かりません

つまり、文字で表す(?)と

      文章
      文章
      文章
   引用した文章等1行目
   引用した文章等2行目
   引用した文章等3行目
      文章
      文章

みたいな感じの時、上記タグだと
引用した文章の1行目と2行目、2行目と3行目は
色が付かないんです

これは、分かり易く言うと
通常の文章…つまりレポート用紙等の文章で例えるなら
引用した文章に対して、蛍光ペンで文字の部分だけ色が付いてる
そんな感じに、なってます

しかし、私の希望は
引用した文字を書きたい所に色の付いた紙を貼り
その上に、文字を書くみたいな感じで作りたいんです

それを考えた場合、私が見つけたHPのタグではダメなんでしょうか?
それとも私の解釈違いでしょうか?
そうだとすると、私の希望する反映は
どうやったら出来るんでしょうか?
宜しく御願いします

A 回答 (2件)

実は、引用したテキストを囲うためのタグが存在しています。


<blockquote>~</blockquote>

これにスタイルを反映させるには、style属性を用います。
<blockquote style="">~</blockquote>

次のように記述すると、<blockquote>で囲まれた範囲内の背景が、指定した色に変化します。
<blockquote style="background-color:色">~</blockquote>

さて、問題が解決したところで、
<span style="background-color: rgb(0, 204, 255);">色を掛けたい文字</span>
ではどうして駄目なのかについて、簡単にご説明します。

HTMLの各要素は、ブロックレベル要素とインライン要素に分けられます。
ブロックレベル要素は文書構成に係る要素であり、
インライン要素はブロック要素内の特定の部分に係る要素です。
つまり、ブロックレベル要素にスタイルを付した場合、それはブロック全体に対して反映されますが、
インライン要素にスタイルを付した場合には、特定部分についてのみ反映されるわけです。

ブロックレベル要素とインライン要素の区別については、下記のリンク先のページを参照にしてください。
http://www.asahi-net.or.jp/~BD9Y-KTU/htmlrel_f/w …
http://www.asahi-net.or.jp/~BD9Y-KTU/htmlrel_f/w …

この点、blockquoteはブロックレベル要素ですから、全体に対してスタイルが反映されます。
しかし、spanはインライン要素ですから、特定部分にしかスタイルが反映されません。

この回答への補足

回答有難う御座いました

結論から言うと、一応成功しました
ただ、一応…と書いた理由なんですが
反映したことは確かなんですが

文字の周り…つまり色の周りに枠が出来てるんです
ちなみに入れたタグは
<blockquote style="background-color:rgb(0, 255, 255)">文字に色を付ける</blockquote>
です

但し、今回反映させたい記事の場合は
特に問題ないですから良いんですが
これは別の方法が、あるのか?
それともダメなのか?と思い、質問しました

でも…余談なんですが
今回御紹介の方法
逆に文章内の…更に特定箇所の文字だけ
枠入りで色を付けたい場合も有効かな?…と感じました

補足日時:2009/08/07 19:08
    • good
    • 0

枠が出る?


ならborder-width: 0px;で指定すれば良いのでは?

この回答への補足

回答有難う御座います

ただスイマセン
“ならborder-width: 0px;で指定すれば良いのでは?”
に関してなんですが
これって画像を入れた時に見たタグと同じと判断しましたが

このタグを入れると枠が消えるという事でしょうか?
但し、そうだとしても、枠は画像じゃないですから
プロパティからサイズを見る事も出来ませんし
まして、私の投稿やNo.1さんの回答にも入ってないタグですから
どう調整すれば良いのかが分からないんですが…

補足日時:2009/08/08 15:58
    • good
    • 0
この回答へのお礼

有難う御座いました
ただ、少し傾向が変わったんで
一旦このスレを締め切ります

従って、引き続きアドバイス頂ける様なら
ここに、御願いします
http://oshiete1.goo.ne.jp/qa5194535.html

お礼日時:2009/08/09 23:27

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!