CSSデザインカタログ » block » シンプルな枠に背景色 : div011-hp
サンプル
シンプルな枠に背景色 : div011-hp
h3，pとナビゲーションリンクを含む
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ソース
XHTML
<div class="div011-hp">
<h3>シンプルな枠に背景色 : div011-hp</h3>
<p>h3，pとナビゲーションリンク含む</p>
<p>テキストテキスト......</p>
<p>テキストテキスト......</p>
<p class="site-navi"><a href="#">リンク</a></p>
</div>
CSS
div.div011-hp {
margin: 1em 0;
border: solid 1px #999;
background: #FFE6E6;
}
div.div011-hp h3 {
margin: 1em 15px;
padding: 0;
color: #903;
}
div.div011-hp p {
margin: 0.5em 15px 0.5em 30px;
}
div.div011-hp p.site-navi {
text-align: right;
}
解説
pの上下のmarginは通常より小さめにしてあります。pは，特にclassをふって右寄せにしてあります。pではなく，ulなどのリストでマークアップする方法も考えられます。