いつも忘れて思い出すのに時間がかかるCSSテクニック集

HOME > What's Newの破線やナビゲーションの「|」の端を消して、スマートにコーディングするの巻

What's Newの破線やナビゲーションの「|」の端を消して、スマートにコーディングするの巻

よくあるこれ↓。一番下の破線はいらないんだよなーって場合。

0000.00.00
あああああああああああああああああああああああ
0000.00.00
いいいいいいいいいいいいいいいいいいいいいいい
0000.00.00
ううううううううううううううううううううううう
0000.00.00
えええええええええええええええええええええええ

親ボックスにoverflow: hidden;をかけて、<dd>にmargin-bottom: -1px;を設定。
hiddenは、箱から出るものは表示させない命令なので、-1pxで破線を表示外にするというテク。
そうすると、最後の<dd>にわざわざclassを付けてcssを設定する必要もなくスマートにできる。

0000.00.00
あああああああああああああああああああああああ
0000.00.00
いいいいいいいいいいいいいいいいいいいいいいい
0000.00.00
ううううううううううううううううううううううう
0000.00.00
えええええええええええええええええええええええ

HTML

<dl class="example02-list-after">
<dt>0000.00.00</dt>
<dd>あああああああああああああああああああああああ</dd>
<dt>0000.00.00</dt>
<dd>いいいいいいいいいいいいいいいいいいいいいいい</dd>
<dt>0000.00.00</dt>
<dd>ううううううううううううううううううううううう</dd>
<dt>0000.00.00</dt>
<dd>えええええええええええええええええええええええ</dd>
</dl>

CSS

.example02-list-after {
  width: 500px;
  overflow: hidden;
  _zoom: 1; /*IE6バグ対策*/
}
.example02-list-after dt {
  padding-top: 5px;
}
.example02-list-after dd {
  margin-top: -1.5em;
  margin-bottom: -1px;
  background-image: url(../example/img/css_img02.png);
  background-repeat: repeat-x;
  background-position: left bottom;
  padding-left: 100px;
  padding-bottom: 5px;
}

同じようなやり方で、横並びのナビゲーションもこんなふうに、ムダなCSSを作らなくて済んじゃう。

HTML

<ul class="example02-list02 pd-t10">
<li>ナビ1</li>
<li>ナビ2</li>
<li>ナビ3</li>
<li>ナビ4</li>
</ul>

CSS

.example02-list02 {
  overflow: hidden;
  _zoom: 1; /*IE6バグ対策*/
}
.example02-list02 li {
  float: left;
  background-image: url(../example/img/css_img03.png);
  background-repeat: no-repeat;
  background-position: left center;
  margin-left: -1px;
  padding-right: 8px;
  padding-left: 8px;
}

↑ページトップへ

HOMEへ