このページはBlog | hamashun.comの記事、グラデーション角丸＋リキッドレイアウトをCSSでコーディングする時の考え方のサンプルページ1です。

サンプルソース

/* 角丸部分の指定 
------------------------------------------------------*/
div.container {
 width: 100%;
 max-width: 1150px;
 min-width: 600px;
 background: #74abef url(img/ml.gif) repeat-y;
}

div.container div.entrytWrap {
 background: url(img/mr.gif) repeat-y right top;
}

div.container h3.entryTitle {
 float: left;
 width: 100%;
 line-height: 61px;
 margin-right: -120px;
 background: url(img/tl.gif) no-repeat;
}

div.container h3.entryTitle a {
 margin-left: 20px;
}

div.container p.entryDay {
 clear: none;
 float: right;
 width: 100px;
 height: 61px;
 margin: 0 0 -61px;
 padding: 23px 20px 0 0;
 background: url(img/tr.gif) no-repeat right top;
 text-align: right;
}

div.container p {
 clear: both;
}

div.container dl {
 list-style-type: none;
 height: 61px;
 margin-top: -20px;
 background: url(img/br.gif) no-repeat right bottom;
}

div.container dl dt {
 float: left;
 line-height: 61px;
 padding-left: 20px;
 background: url(img/bl.gif) no-repeat left top;
}

div.container dl dd {
 float: left;
 padding-top: 20px;
 padding-left: 7px;
}



/* 文字色とか細かい設定 
----------------------------------- */
div.container {
 color: #333;
 font-size: 92%;
}

div.container p.entryDay {
 font-size: 82%;
}

div.container p {
 margin: 20px;
}


/* ie5.xとか用の指定 
----------------------------------- */
div.container p.entryday {
 margin-bottom: -15px;
}



<div class="container">
  <div class="entrytWrap">
    <h3 class="entryTitle"><a href="/">できるだけ少ない要素で...</a></h3>
    <p class="entryDay">2007年10月23日</p>
    <p>グラデ付きの...</p>
    <p>8つの要素...</p>
    <dl>
      <dt>Tags</dt>
      <dd><a href="/">example</a></dd>
      <dd><a href="/">Test</a></dd>
    </dl>
  </div>
</div>

サンプル表示