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などのリストでマークアップする方法も考えられます。
  • リンクにマークの画像を入れる方法として, inline | リンクマーク,ダウンロードマークの挿入 : a002 も参考にしてください。