このページはBlog | hamashun.comの記事、グラデーション角丸+リキッドレイアウトをCSSで無理やりコーディングしてみるのサンプルページです。

サンプルソース

/* 角丸部分の指定 
------------------------------------------------------*/
div.entrytWrap {
 max-width: 1300px;
 background: url(img/back.gif) no-repeat right bottom;
}

h3.entryTitle {
 float: left;
 width: 100%;
 min-height: 45px;
 margin-right: -8em;
 padding-top: 26px;
 background: url(img/back.gif) no-repeat left top;
}

p.entryDay {
 float: right;
 width: 7.5em;
 min-height: 45px;
 padding-top: 26px;
 padding-right: 20px;
 background: red url(img/back.gif) no-repeat right top;
 text-align: right;
}

p.entry {
 clear: left;
 margin-right: 22px;
 padding-left: 20px;
 background: url(img/back.gif) no-repeat left center;
}

dl {
 margin-right: 22px;
 background: url(img/back.gif) no-repeat left bottom;
}

 /* =hack for ie \*/
 * html p.entryDay {
  width: 8.7em;
  height: 47px;
 }
 * html h3.entryTitle {
  height: 45px;
  width: 100%;
 }/* end */

/* clearfix */
dl:after {
 height: 0;
 visibility: hidden;
 content: ".";
 display: block;
 clear: both;
} * html dl {
 height: 1%;
} *+html dl {
 height: 1%;
} /*\*//*/
dl {
 display: inline-table;
}/**//* end */


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

h3.entryTitle a {
 padding-right: 8em;
 margin-left: 20px;
}

h3.entryTitle a:link,
h3.entryTitle a:visited {
 color: #33f;
}
h3.entryTitle a:hover {
 color: #66f;
}

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

p.entry {
 padding-bottom: 15px;
}

dl {
 padding: 20px;
}

dl dt {
 float: left;
}

dl dd {
 float: left;
 padding-left: 7px;
}



<div class="entrytWrap">
 <h3 class="entryTitle"><a href="/">グラデーション角丸+リキッドレイアウトをCSSでネタコーディング</a></h3>
 <p class="entryDay">2007年10月23日</p>
 <p class="entry">グラデ付きの角丸をリキッドで組むとなると...</p>
 <p class="entry">8つの要素だって!...</p>
 <dl>
  <dt>Tags</dt>
  <dd><a href="/">example</a></dd>
  <dd><a href="/">Test</a></dd>
 </dl>
</div>

サンプル表示

グラデーション角丸+リキッドレイアウトをCSSで無理やりコーディング

2007年11月02日

グラデ付きの角丸をリキッドで組むとなると結構悩みます。 と言うのも、それを実現するには通常、要素が全部で8つも必要だからです。

8つの要素だって! おいおいいくつdivを使わせる気なんだいロドリゲス? と言いたくなる気持ちでいっぱいです。

Tags
example
Test