CSSデザインカタログ » inline » フォントの色，サイズ，太さ，スタイルを変更 : inline110
サンプル
6月30日まで30%offの21,000円！
お問い合わせはphone 050-0000-0000へ。
ソース
XHTML
<div class="inline110">
<p class="discount">6月30日まで<em>30%off</em>の<em>21,000円！</em></p>
<p>お問い合わせは<em class="phone">phone 050-0000-0000</em>へ。</p>
</div>
CSS
div.inline110 {
margin: 1em 30px;
border: solid 1px #CCC;
padding: 0 15px;
line-height: 1.4;
}
div.inline110 p.discount em {
padding-left: 0.3em;
padding-right: 0.3em;
text-transform: uppercase;
font-size: 150%;
font-weight: bold;
font-style: italic;
color: #F590D2;
}
div.inline110 em.phone {
padding-left: 0.3em;
padding-right: 0.3em;
text-transform: capitalize;
vertical-align: -0.2em;
font-size: 200%;
font-weight: bolder;
color: #999;
}
解説
em，strongの通常の強調とは異なる装飾をする場合を想定しています。emを含む祖先要素にclassをふるか，emにclassをふるなどして，要素を特定できるようにします。padding-left，padding-rightで強調したテキストの前後に若干の余白をとっています。text-transformプロパティで，全てを大文字にする（uppercase），先頭だけ大文字にする（capitalize）などの表示方法を指定しています。「OFF」と全て大文字で書くと読み上げソフトなどで「オー・エフ・エフ」と読まれる可能性があるからです。