span styleで文字色と背景色の指定方法

div style は、そのブロック要素全体の色彩や背景色を指定するのに使いますが、文中での重要なキーワードなど、特定の文字の色彩を変更する場合、span style を使用して設定します。

「 div style 」と「 span style 」の違いですが、div style はブロック要素になりますのでその前後で改行が入ってしまいます。なので、文中の特定の文字だけという使い方はできませんが、span style の場合はインライン要素のため、文中のキーワードだけの色を指定する際に便利です。

ちなみに、このスタイル属性についてはこちらのページをご参照ください。
HTMLタグにstyle属性の指定方法

ブロック要素の div タグについては、こちらを参照ください。
<div>タグはブロック分けのhtml


文字色の指定方法

span style で文字の色彩を変える場合は、キーワードの前後に次のタグを入れます。

<span style="color:#ff0000;"></span>

この例では、赤の#ff0000を指定していますが、変更したい色彩を指定します。

例えば、このように span タグを記述すると、、

span で囲まれた範囲の前後で改行なく表示されます。


文字の背景色の指定方法

文字の背景色を変える場合には background-color で指定します。キーワードの前後に次のタグを入れます。

<span style="background-color:#FFCACA;"></span>

そうすると、タグの範囲の背景色だけを指定することができます。


スタイルシートでの指定方法

上記の方法はhtml内で直接指定する方法になりますが、色彩や背景色などはスタイルシート側であらかじめ設定しておくと便利です。

例えば、span class="abc" と指定して、abc という span 属性の表示内容をスタイルシート側で別に指定することができます。

<span class="abc"></span>

.abc {
color:ff0000;
background-color:#FFCACA;
}

これをスタイルシートを使わず、html上に直接記述する際は次と同じ意味になります。

<span style="color:ff0000;background-color:#FFCACA;"></span>

このようにhtmlに直接記述すると長くごちゃごちゃになるため、できるだけスタイルシートを使って外部化した方がhtmlがスッキリします。

次へ:<b>と<strong>タグの違い