文字や文章の修飾には 文字自体の修飾以外にも、背景色や背景画像を指定したり、枠線を表示させたりといろいろな方法があります。
<p>や<div>、&llt;hⅩ>など段落タグの align オプションで、段落文章の行揃えを指定することができます。
<div align="center">
この段落を、中央揃えにします。
</div>
このソースを表示させると、次のようになります。赤字部分で、段落を中央揃えに指定しています。
| この段落を、中央揃えにします。 |
中央揃え以外にも、下記の中から指定できます。
| キーワード | 位置 |
| left | 左詰め |
| center | 中央揃え |
| right | 右詰め |
| justify | 均等配置※（Explorerのみ） |
中央揃えの場合のみ、専用タグ <center>も用意されています。ソースは次のようになります。
<center>
この段落を、中央揃えにします。
</center>
段落文章を囲む枠の太さ、色、種類は、style指定でまとめて指示することができます。
<div style="border:枠の太さ 全体の色 全体の形状">～</div>
というふうに、スペースで区切って指定内容を併記します。<p>タグや、他のブロックタグでもＯＫです。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| キーワード | 枠の太さ |
| thin | 細線 |
| thick | 太線 |
| medium | 中程度の太さの線 |
※正確にはデバイス依存の相対サイズ
| キーワード | 説明 | サンプル |
| none | なし | |
| hidden | なし | |
| dotted | 丸い点線 | |
| dashed | 四角い点線 | |
| solid | 実線 |
| キーワード | 説明 | サンプル |
| double | 二重線 | |
| groove | 凹んだような立体枠 | |
| ridge | 尖ったような立体枠 | |
| inset | 中央が凹のような立体枠 | |
| outset | 中央が凸のような立体枠 |
太さ、色、種類の 3つの要素は、必ずしもすべて記述しなくても構いません。
<div style="border:5px">～</div>
<div style="border:5px red">～</div>
というふうに 太さだけ、太さと色だけ 指定して、あとはブラウザにお任せなどということもできます。ただし今回はサンプルなので、3つの要素をすべて指定してみます。
|
段落文章を枠で囲みます。ここでは扱いませんが、
同時に、padding 指定で余白を設けると、より見やすくなるでしょう。 |
このソースは次のようになります。
<div style="border:10px lime inset;">
段落文章を枠で囲みます。ここでは扱いませんが、<br>
同時に、padding 指定で余白を設けると、より見やすくなるでしょう。</div>
ソース中赤字部分で、枠の太さを 10ピクセル、色をライム色に、種類を insetに指定しています。
また、上記例は四辺の太さをを一括して指定していますが、個別に指定することもできます。
段落文章を枠で囲んで表示する際に、種類を指定することができます。
<div style="border-style:キーワード">～</div>
という形式になります。キーワードは、下記から選べます。
| キーワード | 説明 | サンプル |
| none | なし | |
| hidden | なし | |
| dotted | 丸い点線 | |
| dashed | 四角い点線 | |
| solid | 実線 |
| キーワード | 説明 | サンプル |
| double | 二重線 | |
| groove | 凹んだような立体枠 | |
| ridge | 尖ったような立体枠 | |
| inset | 中央が凹のような立体枠 | |
| outset | 中央が凸のような立体枠 |
この中から、『 double 』で指定してみます。
|
この段落文章を、太さ 15ピクセルの赤色の二重線の枠で囲みます。
枠で囲むことで、文章を強調したり、見やすくすることができます。 |
このソースは、次のようになります。
<div style="border-style:double;border-color:red;border-width:15px">
この段落文章を、太さ 15ピクセルの赤色の二重線の枠で囲みます。<br>
枠で囲むことで、文章を強調したり、見やすくすることができます。
</div>
<div>タグの代わりに<p>タグでもＯＫですし、その他のブロックタグも使えます。
また、上記例は四辺の太さをを一括して指定していますが、個別に指定することもできます。
段落文章を枠で囲んで表示する際に、色を指定することができます。
<div style="border-color:色番号または色名称">～</div>
という形式になります。『#FF0000』などの 16進数表記、または『 red 』などの色名称で指定します。カラー見本はこちらでご紹介しています。
|
この段落文章を、太さ 15ピクセルの赤色の枠で囲みます。
枠で囲むことで、文章を強調したり、見やすくすることができます。 |
このソースは、次のようになります。
<div style="border-color:red;border-width:15px">
この段落文章を、太さ 15ピクセルの赤色の枠で囲みます。<br>
枠で囲むことで、文章を強調したり、見やすくすることができます。
</div>
<div>タグの代わりに<p>タグでもＯＫですし、その他のブロックタグも使えます。
また、上記例は四辺の太さをを一括して指定していますが、個別に指定することもできます。
段落文章を枠で囲んで表示することができます。
<div style="border-width:全体の太さ">～</div>
というような形式で、枠の太さを指定します。太さは、下記の絶対サイズ、相対サイズまたはキーワードにて指定できます。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| キーワード | 枠の太さ |
| thin | 細線 |
| thick | 太線 |
| medium | 中程度の太さの線 |
※正確にはデバイス依存の相対サイズ
|
この段落文章を、太さ 15ピクセルの枠で囲みます。
枠で囲むことで、文章を強調したり、見やすくすることができます。 |
このソースは、次のようになります。
<div style="border-width:15px">
この段落文章を、太さ 15ピクセルの枠で囲みます。<br>
枠で囲むことで、文章を強調したり、見やすくすることができます。
</div>
<div>タグの代わりに<p>タグでもＯＫですし、その他のブロックタグも使えます。
また、上記例は四辺の太さをを一括して指定していますが、個別に指定することもできます。
マージン、パディングそれぞれについては、各項目をご覧ください。ここでは、マージンとパディングの違いについてご説明します。
いま、グレーの部分が表示領域と考えてください。ここで、
|
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。 だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... |
このソースは、次のようになります。
<div style="margin:5px 15px 5px 25px;padding:5px 20px 5px 10px;background-color:yellow;border:10px lime solid;">
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... </div>
このとき、マージンとパディングは下図のようになっています。マージンは、段落などのブロックタグ要素が表示される領域（グレーの部分の端末）と、それより内側に発生するブロックタグ枠（ライム色の枠線の外側）との間の空白です。またパディングは、そのブロックタグ枠（ライム色の枠線の内側）と、さらに内側に表示されるブロックタグ文書（破線で囲まれた段落文章の端末）との間の空白です。
表示領域とマージン、パディングの間には必ず、
表示領域 = 左マージン + 左枠の太さ + 左パディング + 段落文章 +
右マージン + 右枠の太さ + 右パディング
の関係が成り立つようになります。
表示領域と本文の間に余白を入れることができます。いま、表示領域はグレーの部分だと思ってください。余白を指定しないと、下記のようになります。
|
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。 リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。 だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... |
ここで、上に 5ピクセル、右に 10ピクセル、下に 15ピクセル、左に 20ピクセルの余白を入れてみます。わかりやすいように、同時に背景色を黄色に指定します。
|
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。 だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... |
このソースは次のようになります。
<div style="padding:5px 10px 15px 20px;background-color:yellow;">パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... </div>
このサンプルでは、上下左右の余白を一括して指定しています。
style="padding:上余白 右余白 下余白 左余白"
という順番で、スペースで区切って余白を指定します。余白の指定は、下記の絶対サイズまたは相対サイズにて指定することができます。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| % | 基準書体のサイズに対する百分率 |
※正確にはデバイス依存の相対サイズ
上のみ、下のみ、など個別に余白を指定することもできます。
表示領域と本文の間に余白を入れることができます。いま、表示領域はグレーの部分だと思ってください。余白を指定しないと、下記のようになります。
|
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。 リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。 だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... |
ここで、上に 5ピクセル、右に 10ピクセル、下に 15ピクセル、左に 20ピクセルの余白を入れてみます。わかりやすいように、同時に背景色を黄色に指定します。
|
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。 だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... |
このソースは次のようになります。
<div style="margin:5px 10px 15px 20px;background-color:yellow;">パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... </div>
このサンプルでは、上下左右の余白を一括して指定しています。
style="margin:上余白 右余白 下余白 左余白"
という順番で、スペースで区切って余白を指定します。余白の指定は、下記の絶対サイズまたは相対サイズにて指定することができます。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| % | 基準書体のサイズに対する百分率 |
※正確にはデバイス依存の相対サイズ
上のみ、下のみ、など個別に余白を指定することもできます。
<br>タグを使って改行することができます。改行したい部分に<br>タグを挿入します。
これは、1行目です。改行します。
これは、2行目です。
ソースで改行しても、改行タグがなければ改行されません。
ソースは、次のようになります。
これは、1行目です。改行します。<br>
これは、2行目です。
ソースで改行しても、改行タグがなければ改行されません。
ブログではたいてい自動改行機能が付いています。この機能を有効にしておけば、投稿欄で改行すれば記事も普通に改行されて見えますが、これは自動改行機能が必要に応じて<br>タグや<p>タグを挿入しているためです。
この機能を無効にした場合は、改行する箇所に手動で<br>タグを挿入する必要があります。逆に、自動改行機能が有効の状態で<br>タグを挿入すると、2重に改行されて期待通りに表示されないことがありますのでご注意ください。
改行タグを挿入しなくても ブラウザは文章が表示領域の右端に達すると自動改行して表示しますが、改行を禁止したい場合は、<nobr>タグを使います。このタグを使用すると、表示領域に文章が収まらない場合、切り捨てられます。
このソースは、次のようになっています。
<nobr>
この段落は、改行を禁止しています。長い文章ですので表示領域内に収まりきらず、切り捨てられます。
</nobr>
また、改行禁止タグ<nobr>タグで指定したした範囲内で、改行しても構わない部位に、<wbr>タグを挿入すると、改行候補位置としてその位置で改行されます。
|
|
このソースは、次のようになっています。
<nobr>この段落は、改行を禁止しています。ただし、改行候補として、ここ<wbr>で、wbrタグを挿入しています。</nobr>
文章の背景色、背景画像、配置方法は、まとめて指定することができます。
というふうに、スペースで区切って指定内容を併記します。
Mac + IE4.x では不可
Mac + IE4.x では不可| キーワード | 繰返し方法 |
| repeat | 上下左右にパターンを繰り返す （通常の繰返し） |
| repeat-x | 左右にパターンを繰り返す |
| repeat-y | 上下にパターンを繰り返す |
| no-repeat | 繰り返さない |
body
address｜
address｜
blockquote｜
div｜
dir｜
dl｜
form｜
h1～h6｜
menu｜
ol｜
p｜
pre｜
plaintext｜
table｜
ul｜
xmp
a｜
b｜
big｜
blink｜
cite｜
code｜
em｜
font｜
i｜
input｜
kbd｜
s｜
samp｜
small｜
span｜
strike｜
strong｜
sub｜
sup｜
td｜
textarea｜
tt｜
u｜
var
Mac + IE4.x では不可| キーワード | 文字のスタイル |
| scroll | 固定しない。ユーザーがスクロールバーで画面をスクロールすると、それにあわせて背景画面も移動する。 |
| fixed | 固定する。スクロールバーを操作しても背景画像は常に同じ位置に表示される。 |
Mac + IE4.x では不可| 指定方法 | 表示位置 |
| 絶対サイズ、 相対サイズ |
表示領域の右上から、背景画像の左上までの距離を横距離、 縦距離の順番で指定 |
| ％ | 表示領域の各辺から、背景画像の各辺までの距離を、 左右の距離合計に対する左側距離の比率、上下距離の合計に対する上側距離の比率、の順番で指定 |
| キーワード | 左右の配置（left , right , center）、 上下の配置（top , bottom , center）の順番で指定 |
段落の背景画像の位置を指定することができます。
|
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...
|
ソースは、下記のようになります。赤字部分で背景画像の表示位置を、表示可能領域の右端から60ピクセル、上端から30ピクセルの位置に指定しています。
<div style="background-image:url(./sample/cat.gif);background-repeat:no-repeat;background-position:60px 30px;">
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...
</div>
位置指定は、下記の方法から選べます。
| 指定方法 | 表示位置 |
| 絶対サイズ、相対サイズ | 表示領域の右上から、背景画像の左上までの距離を横距離、縦距離の順番で指定 |
| ％ | 表示領域の各辺から、背景画像の各辺までの距離を、左右の距離合計に対する左側距離の比率、上下距離の合計に対する上側距離の比率、の順番で指定 |
| キーワード | 左右の配置（left , right , center）、上下の配置（top , bottom , center）の順番で指定 |
例えば、上記の例で『 60px 30px 』としていたところを、『 right center 』とすると、左右位置は段落の左端、上下位置は段落の中央、という指定になります。
ご注意：Netscape および Mac + IE4.x 対応していません。
文章の背景に指定した画像を、固定表示にすることができます。
Mac + IE4.xでは不可
| キーワード | 文字のスタイル |
| scroll | 固定しない。ユーザーがスクロールバーで画面をスクロールすると、それにあわせて背景画面も移動する。 |
| fixed | 固定する。スクロールバーを操作しても背景画像は常に同じ位置に表示される。 |
サンプルソースです。
<div style="background-image:url(sample/cat.gif);background-repeat:repeat;background-attachment:fixed;height:80px;overflow:scroll">
この段落は、背景画像を固定表示しています。
スクロールバーでクロースしてみてください。<br><br>
文章はスクロールしますが、背景画像は<br>
動きませんね。Netscape および Mac + IE4.x は<br>
対応していませんが...
</div>
このソースを表示させると、次のようになります。
|
この段落は、背景画像を固定表示しています。
スクロールバーでクロースしてみてください。
文章はスクロールしますが、背景画像は 動きませんね。Netscape および Mac + IE4.x は 対応していませんが... |
文章の背景に指定した画像は、繰返し表示（タイリング）させることができます。
body
address｜
blockquote｜
div｜
dir｜
dl｜
form｜
h1～h6｜
menu｜
ol｜
p｜
pre｜
plaintext｜
table｜
ul｜
xmp
a｜
b｜
big｜
blink｜
cite｜
code｜
em｜
font｜
i｜
input｜
kbd｜
s｜
samp｜
small｜
span｜
strike｜
strong｜
sub｜
sup｜
td｜
textarea｜
tt｜
u｜
var
| キーワード | 繰返し方法 |
| repeat | 上下左右にパターンを繰り返す （通常の繰返し） |
| repeat-x | 左右にパターンを繰り返す |
| repeat-y | 上下にパターンを繰り返す |
| no-repeat | 繰り返さない |
サンプルソースです。元画像は、この50ｘ50ピクセルの小さな画像ですが、これを y（上下）方向に繰返し表示させます。
<p style="background-image:url(sample/cat.gif);background-repeat:repeat-y">
この段落は、背景画像を指定しています。元画像は50ｘ50ピクセルの<br>
ねこの画像です。これをｙ（上下）方向に繰返し表示させています。<br>
ちなみにこのブログは、bodyタグに背景画像のタイリングを<br>
しています。文字を少しずつずらしつつ、タイリングしたときに文字が<br>
つながっているように見えるように画像をつくるのは面白いものです。
</p>
|
この段落は、背景画像を指定しています。元画像は50ｘ50ピクセルの |
style の width 指定で、段落の横幅を指定することができます。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| % | 基準書体のサイズに対する百分率 |
※正確にはデバイス依存の相対サイズ
指定のソースのサンプルです。
<p style="width:50%">段落文書の横幅を指定すると、ページの途中で折り返して文章が表示されます。同時に、段落の背景色などをしていすると、より美しく表示できるかも知れません。</p>
赤字部分で、段落文書の横幅を表示可能最大幅の50％に指定しています。このサンプルでは、グレーの部分が表示可能最大幅ですので、その半分で折り返して表示されます。
|
段落文書の横幅を指定すると、ページの途中で折り返して文章が表示されます。同時に、段落の背景色などをしていすると、より美しく表示できるかも知れません。 |
もちろん、<p>タグの代わりに、<div>タグなどの他ブロックタグも使用可能です。
style の line-height 指定で、行間隔（行の高さ）を指定することができます。下記の絶対サイズまたは相対サイズで指定します。サイズではなく、『 normal 』と指定すると、普通のサイズになります。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| % | 基準書体のサイズに対する百分率 |
| 数字のみ | 基準書体のサイズに対する倍率 |
※正確にはデバイス依存の相対サイズ
指定のソースのサンプルです。
<p style="line-height:1.8em">
日本語のフォントは、行の高さとフォントサイズが同じになってしまうので、少し広く設定するとページが見やすくなるでしょう。指定方法は絶対サイズでも相対サイズでも構いませんが、相対サイズにしておくと、文字の大きさを変更した場合に、一緒に行の高さが広がります。</p>
赤字部分で、行の高さを基準書体の文字の高さの1.8倍に指定しています。これを表示させると、次のようになります。
|
日本語のフォントは、行の高さとフォントサイズが同じになってしまうので、少し広く設定するとページが見やすくなるでしょう。指定方法は絶対サイズでも相対サイズでも構いませんが、相対サイズにしておくと、文字の大きさを変更した場合に、一緒に行の高さが広がります。 |
もちろん、<p>タグの代わりに、<div>タグなどの他ブロックタグも使用可能です。
文章の背景に、画像を指定することができます。
サンプルソースです。
背景画像の指定<br>
インラインタグを使えば、
<span style=background-image:url(sample/bgimg.jpg)">部分的に背景画像を指定することが
できます。<br>この場合、InternetExplorer では文字のある部分だけに、<br>
Netscape の場合、文字を囲む最小の四角形に背景画像が<br>
表示されます。</span>
<div style="background-image:url(sample/bgimg.jpg)">
段落タグなどのブロックタグの場合、InternetExploreでは
背景画像が表示可能最大幅いっぱいに表示されますが、
Netscape では、文字を囲む最小の四角形に背景画像が適用されます。
</div>
このソースを表示すると、次のようになります。
|
背景画像の指定 インラインタグを使えば、 部分的に背景画像を指定することが できます。 この場合、InternetExplorer では文字のある部分だけに、 Netscape の場合、文字を囲む最小の四角形に背景画像が 表示されます。
段落タグなどのブロックタグの場合、InternetExploreでは
背景画像が表示可能最大幅いっぱいに表示されますが、
Netscape では、文字を囲む最小の四角形に背景画像が適用されます。
|
背景画像を指定する際には、background-image をサポートしていないブラウザでも見映えを損なわないように、同時に近似色の背景色を指定しておくと良いでしょう。background-image をサポートしていない場合に、代わりに表示されます。
部分的に、文章の背景色を指定することができます。
サンプルソースです。
文字の背景色を、
<span style="background-color:lime">ライム色に指定します。</span>
<span style="background-color:yellow">黄色に指定します</span>
<div style="background-color:#FFA500">この段落は、背景色を＃FFA500（オレンジ色）に指定します。
タグ名にブロックタグを使用した場合、文字が表示されている部分を囲む四角形の
範囲に背景色が適用されます。</div>
上記ソースをブログの投稿欄にそのまま入力すると、
|
文字の背景色を、 ライム色に指定します。
黄色に指定します
この段落は、背景色を＃FFA500（オレンジ色）に指定します。
タグ名にブロックタグを使用した場合、文字が表示されている
部分を囲む四角形の範囲に背景色が適用されます。
|
また、タグ名に段落タグなどを指定した場合、InternetExplorer と Netscape では見え方が異なります。InternetExploreの場合は、背景色が表示可能最大幅いっぱいに表示されますが、Netscape では、文字を囲む最小の四角形に背景色が適用されます。
