じっけん！HTMLタグ・引用文に背景色をつける天使のたまご/ウェブリブログ

じっけん！HTMLタグ・引用文に背景色をつける

<< 作成日時： 2007/12/16 22:09 >>

今さらですが、HTMLタグの勉強をしています。
ブログの記事によく、字下げした引用文が載っていますよね？
前からやってみたかったんですが、ようやくタグがわかったので、上手くいくかどうか実験してみます。ちなみに引用文のタグは・・・

　<blockquote>引用文</blockquote>です。

（前略）ただしGIF画像は、そのままだと編集する事ができません。自動選択ツールでクリックした場合、「この画像はインデックスカラーです。RGBカラーに変更しますか？」と訊かれるので、「はい」を選びましょう。これでツールを使えるようになります。
正確な定義はともかく、大雑把に「インデックスカラー」→GIF画像、「RGBカラー」→JPEG画像と考えてそう間違いはないと思います。インデックスカラーは256色しかないので、写真などを変換するとずいぶん印象が違ったりしますが、イラスト程度の色使いならほとんど心配はありません。（後略）
「Photoshop Elements でイラストを描こう♪～ダウンロードした素材に合成する」より

左右に何文字ぶん空くかは、使うテキストエディタによるらしいです。
これに背景色をつけてみましょう。

（前略）ただしGIF画像は、そのままだと編集する事ができません。自動選択ツールでクリックした場合、「この画像はインデックスカラーです。RGBカラーに変更しますか？」と訊かれるので、「はい」を選びましょう。これでツールを使えるようになります。
正確な定義はともかく、大雑把に「インデックスカラー」→GIF画像、「RGBカラー」→JPEG画像と考えてそう間違いはないと思います。インデックスカラーは256色しかないので、写真などを変換するとずいぶん印象が違ったりしますが、イラスト程度の色使いならほとんど心配はありません。（後略）
「Photoshop Elements でイラストを描こう♪～ダウンロードした素材に合成する」より

はい、無事に上手くできました♪このように引用文を装飾するには・・・

<blockquote style="background-color:silver; padding:0.5em;">引用文</blockquote>と書きます。開始タグと終了タグに挟まれた文字列の装飾を、style= 以降で指定しているわけですね。それぞれの意味は・・・

background-color　背景色
silver　銀色（色は通常16進法の数字で指定しますが、色名で指定できるものも16色あります）
padding　内側の余白、この場合は背景色と文字の間
0.5em　標準で使われる文字の半分の値、ピクセルや％でも指定できる

background-color とsilver は、「何を」「どうするか」の関係。間には「:（コロン）」、後には「;（セミコロン）」を忘れずにつけて下さい。
私はsilver の後にセミコロンをつけ忘れ、プレビューで確認したら反映されてなかったので一瞬慌てちゃいました。何せ始めたばっかなので～。(^^ゞ

なお引用に使うblockquote タグは、ブロック全体を指定するので、文字のないところにも背景色が塗られます。以下は文字のある部分だけ指定した場合。

　例）<blockquote>引用文</blockquote>です。

HTMLタグは　<span style="background-color:#ffccff;">文字列</span>
（span は文章内の特定の範囲にスタイルを指定するとき使うタグ）

以上はいずれも、HTMLタグの書き方の一例です。
他にも書き方はあるみたいだし、文法的に正確じゃなくても、ある程度ブラウザが解釈してくれるらしいんですが・・・とりあえず終了タグは忘れないようにしましょう。でないと指定したスタイルがずーっと続いてしまいます。(^^ゞ

そんではまた。何か実験してみたいタグがあったら、続きを書きますね☆
・・・って、おやぁ～～～!? どうやらウェブリブログでは、blockquote タグに自動で枠線をつける仕様のようだ。公開してみてドびっくり！（笑）
しかもはっきりわかるほど、字下げがされてないし。。。(-_-)
プレビューはテンプレート抜きだからなー、正確にはわからんのよ。

このように使うテキストエディタの仕様によって、それぞれ結果が違ったりします。
・・・上手くまとまった、とゆう事でいいのかな？（苦笑）