フォントに背景色をつける

フォントに背景色をつけるフォントに背景色をつける表示例

スタイルシートでフォントに背景色を入れます。段落のタグ<p>の背景をスタイルシートで指定します。<p>タグはブロックレベル要素ですので、ボックス全体の背景色をつけることが出来ます。また、paddingの値を指定することで、背景と文字の間にスペースを指定することが出来ます。

特定のテキストなど部分的に背景色をつける場合は<span>などのインライン要素で背景色を指定します。

HTML/XHTML

<h1>フォントに背景色をつける</h1>
<p class="yellow">このフォントの背景色は黄色</p>
<p class="green">このフォントの背景色は緑色</p>
<p class="blue">このフォントの背景色は青色</p>
<p class="orange">このフォントの背景色はオレンジ色</p>
<p class="pink">このフォントの背景色はピンク色</p>
<p class="purple">このフォントの背景色は紫色</p>
<p class="gray">このフォントの背景色は灰色</p>
<p class="brown">このフォントの背景色は茶色</p>
<p class="black">このフォントの背景色は黒色</p>

CSS

<style type="text/css">
<!--
.yellow { background: #FFFF00; }
.green { background: #33CC00; }
.blue { background: #00CCFF; }
.orange {background: #FFCC00; }
.pink { background: #FF99FF; }
.purple {
padding: 10px;
background: #6633FF;
color: #FFFFFF;
}
.gray {
padding: 10px 50px;
background: #CCCCCC;
color: #FFFFFF;
}
.brown {
padding: 10px 50px 30px;
background: #993300;
color: #FFFFFF;
}
.black {
padding: 10px 50px 30px 0px;
background: #000000;
color: #FFFFFF;
}
-->
</style>

フォントに背景色をつける表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録