/* 角丸部分の指定
------------------------------------------------------*/
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>
2007年11月02日
グラデ付きの角丸をリキッドで組むとなると結構悩みます。 と言うのも、それを実現するには通常、要素が全部で8つも必要だからです。
8つの要素だって! おいおいいくつdivを使わせる気なんだいロドリゲス? と言いたくなる気持ちでいっぱいです。