« [携帯サイト] リンクをスクロールさせるhtmlタグ | トップページ | 1000億ジンバブエドル紙幣 »

2008年7月21日 (月)

ul、liタグとCSSで作る段組表示

HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法より

CSS 段組表示 li ul
崩れない段組表示。<ul><li>タグで作ったこと無かったので防備録。

<div id="photo">
<ul>
<li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li>
<li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li>
<li><img src="hoge3.jpg" alt="サンプル3" width="160" height="120" /></li>
</ul>
</div><!-- /#photo -->

全体幅が500pxで3枚の画像を用いた場合のCSSが

* { /* デフォルトCSSのリセット */
  margin: 0;
  padding: 0;
}
div#photo {
  width: 500px; /* 全体の横幅 */
  height: 120px;
}
div#photo ul {
  width: 510px;
  height: 120px;
  margin-right: -10px; /* ここがポイント! */
  list-style-type: none;
}
div#photo li {
  float: left; /* floatで段組み */
  width: 160px;
  height: 120px;
  margin-right: 10px; /* 写真間の余白 */
}

<div id=photo>の500pxを<ul>で幅を510pxにしてはみ出していますが、margin-right:-10;とすることではみ出した分をネガティブ値で指定することにより、段組みが崩れるのを防いでいるそうです。

理屈じゃなく実践暗記ですね。

|

« [携帯サイト] リンクをスクロールさせるhtmlタグ | トップページ | 1000億ジンバブエドル紙幣 »

コメント

コメントを書く



(ウェブ上には掲載しません)




« [携帯サイト] リンクをスクロールさせるhtmlタグ | トップページ | 1000億ジンバブエドル紙幣 »