このページはBlog | hamashun.comの記事、jQueryとCSSでグラデーション角丸＋リキッドレイアウトをコーディングしてみるのサンプルページです。 このサンプルにはダウンロード版もあります。

サンプルソース

//要素を増やす
$(function() {
 for(i=0; i<6; i++) {
  $("div.entrytWrap").wrap('<div class="wrap' + i + '"></div>');
 }
});

//jsが適用されない環境のための指定をリセット
$(function() {
 $("div.entrytWrap").css("border","none")
});

------------------------------------------------------------

div.wrap0 {
 background: #74abef url(../img/ml.gif) repeat-y left top;
}

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

div.wrap2 {
 background: url(../img/br.gif) no-repeat right bottom;
}

div.wrap3 {
 background: url(../img/bl.gif) no-repeat left bottom;
}

div.wrap4 {
 background: url(../img/tl.gif) no-repeat left top;
}

div.wrap5 {
 max-width: 1150px;
 background: url(../img/tr.gif) no-repeat right top;
}


div.entrytWrap {
 border: solid 1px #74abef;
} /* jsが適用されない環境のための指定 */

------------------------------------------------------------

<div class="entrytWrap">
 <h3><a href="/">jQueryとCSSでグラデーション角丸＋リキッドレイアウトをコーディングしてみる</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>

サンプル表示