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

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

段落などのブロックレベルでの背景色ではなく、文章の一部分に背景色をつけたいときはインライン要素にスタイルシートで背景色を指定します。paddingの値で余白の設定も可能ですが、行間がせまい場合は、重なって見難くなってしまいます。

line-heightで行間を指定すると見やすくなります。

p { line-height: 300%; }

HTML/XHTML

<p><span class="yellow">ここの背景色は黄色</span><b class="green">ここの背景色は緑色</b><strong class="blue">ここの背景色は青色</strong><small class="orange">ここの背景色はオレンジ色</small><big class="pink">ここの背景色はピンク色</big><tt class="purple">ここの背景色は紫色</tt><i class="gray">ここの背景色は灰色</i><u class="brown">ここの背景色は茶色</u><s class="black">ここの背景色は黒色</s></p>

CSS>

<style type="text/css">
<!--
p { line-height: 300%; }
.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!ブックマークに登録