span styleで文字色と背景色の指定方法
div style は、比較的広い範囲でのブロック要素の色彩や背景色を指定するのに使いますが、文中での重要なキーワードなど、特定の文字の色彩を変更する場合、span style を使用して設定します。
「 div style 」と「 span style 」の違いですが、div style の場合、その前後で改行が入ってしまうので、文中の特定文字だけという使い方はできませんが、span style の場合はインライン要素ですので、文中のキーワードだけの色を指定する際に便利です。
ブロック要素の div タグについては、こちらを参照ください。
<div>タグはブロック分けのhtml
文字色の指定方法
span style で文字の色彩を変える場合は、キーワードの前後に次のタグを入れます。この例では、赤の#ff0000を指定していますが、変更したい色彩を指定します。
<span style="color:#ff0000;"></span>
例えば、このように span タグを記述すると、、
span で囲まれた範囲の前後で改行なく表示されます。
文字の背景色の指定方法
文字の背景色を変える場合には、キーワードの前後に次のタグを入れます。
<span style="background-color:#FFCACA;"></span>
そうすると、タグの範囲の背景色だけを指定することができます。
スタイルシートでの指定方法
これらの色彩の指定はスタイルシート側であらかじめ設定しておくと便利です。
例えば、class="abc" と指定して、abc という span 属性の表示内容をスタイルシート側で別に指定することができます。
<span class="abc"></span>
.abc {
color:ff0000;
background-color:#FFCACA;
}
細かい設定をする場合など、できるだけスタイルシートを使った方が便利です。