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

HOME > 画像の横並びレイアウトで、最初か最初だけclassを追加しなくてもコーディングできちゃうの巻

画像の横並びレイアウトで、最初か最初だけclassを追加しなくてもコーディングできちゃうの巻

よくある、画像を並べるレイアウト↓。
でも、端の余白を削除するために、最後の画像にだけclass指定をして余白を消すんだけれど、
ちょっとスマートじゃないなぁと。

↓こうしてみたら、スマートかも。

あたいの休日

  • 日傘をさす女
  • 展望少女
  • しゃぼんのようにふわふわと

HTML

<div class="example04-box">
<p><img src="img/example04_img01.png" alt="あたいの休日" width="620" height="35" /></p>
<ul class="image-box">
<li><img src="img/example04_img02.png" alt="日傘をさす女" width="200" height="120" /></li>
<li><img src="img/example04_img03.png" alt="展望少女" width="200" height="120" /></li>
<li><img src="img/example04_img04.png" alt="しゃぼんのようにふわふわと" width="200" height="120" /></li>
</ul>
</div>

CSS

.example04-box {
  width: 620px;
  border: 1px solid #CCC;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  overflow: hidden;
  _zoom: 1; /*IE6バグ対策*/
}
.example04-box .image-box {
  width: 630px;
  overflow: hidden;
  margin-right: -10px;

  _zoom: 1; /*IE6バグ対策*/
  margin-top: 10px;
}
.example04-box .image-box li {
  float: left;
  margin-right: 10px;
}

ポイントは、画像のボックスに、はみでる最後の余白分も含めて幅を指定して(実際幅620px+はみでる余白10px=630px)、
overflow: hidden;を指定して、はみでる余白分10pxをネガティブマージンで非表示にしてしまう。
これで、ムダなclass指定をせずにスマートなソースとなりやす。

↑ページトップへ

HOMEへ