2007年11月14日

ボックスの繰り返し方法-基本編

今回は「ボックスの繰り返し方法」についてお話します。

弊社のホームページ「サービス内容」のページをご覧ください。



わかりにくいかと思いますが、dlタグのかたまりが横に並んで配置されています。

この様に、ブロック要素を横に並べていく方法です。

cssコーディングでは、ごく当たり前の方法ですが、注意点などがありますので、
その辺りも合わせて基本編としてお話します。
 

コーディング例

ご存知の方が大半だと思いますが、floatを使用した実現方法をご紹介します。
まずは、ソースと表示サンプルをご覧ください。
(htmlコーディング)
<div class="repetition01">
<div class="entryWrapper">
<div class="entry">
繰り返し01<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="entryWrapper">
<div class="entry">
繰り返し02<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="entryWrapper">
<div class="entry">
繰り返し03<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="entryWrapper">
<div class="entry">
繰り返し04<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="entryWrapper">
<div class="entry">
繰り返し05<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.repetition01 {
width:636px;
border:1px solid #CCCCCC;
}
.repetition01 .entryWrapper {
float:left;
width:202px;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
background:url(images/top.gif) no-repeat left top;
}
.repetition01 .entryWrapper .entry {
padding:0 5px;
background:url(images/body.gif) repeat-y left top;
}
.repetition01 .entryWrapper .bottom {
height:10px;
font-size:1px;
line-height:1px;
background:url(images/bottom.gif) no-repeat left bottom;
}
.clear {
clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;
}
表示サンプルをご覧いただければわかると思いますが、floatを使えば
容易にボックスの繰り返しを実現することができます。

ポイントは
1.floatするブロック要素にwidthを設定する。
2.ボックスの高さが異なる場合はclearする必要がある。
3. floatする方向にmarginを開けない。
(float:leftならmargin-leftは設定しない。)


の3点です。
 

floatするブロック要素にwidthを設定する

今回のサンプルでwidth指定をはずしてみると、
Firefoxではテキストの幅までしか、ボックスが表示されなくなり
IEでは、横に並びさえしなくなることが確認できると思います。

もちろん、わざとwidthを設定しない場合もありますが、
ボックスの横幅が固定である場合は、widthを設定することを
おすすめします。

(サンプル「widthを未設定の場合」をご参照ください)

 

ボックスの高さが異なる場合はclearする

ボックスの高さがすべて同じ場合は問題ありませんが、
ボックス内のテキストに差があるなどの理由で
ボックスの高さが異なる場合は注意が必要です。

表示サンプルで言うと、ボックスの3番目や、
その下にボックスの無い、4番目、5番目なら
良いのですが、1番目や2番目が高くなってしまうと、
その下の段のボックスが、その高いボックスにひっかかり
一番左まで折り返すことができなくなってしまいます。

(サンプル「ボック場スの高さが異なる合(表示くずれ)」をご参照ください)


そのため、ボックスの高さを固定してしまうか、
折り返しの際にfloatをclearする必要があります。
(表示サンプルだと、3回ごとにclear)
 

floatする方向にmarginを開けない

これは、IE6.0のバグを回避するためです。

IE6.0では、
float:rightとmargin-right、
float:leftとmargin-left
を同じ要素に設定すると、
marginの開きが2倍になるというバグがあります。

(サンプル「IEでの表示くずれ(margin-left)」をご参照ください)

IE6.0で表示サンプルをご覧いただくと、一番左のmarginが2倍され、
ボックスが横に3つ並ばなくなってしまっているのが確認できると
思います。

floatと同じ方向に開きを設定する必要があるのであれば、marginではなくpaddingで
間を開ける必要があります。
 
今回は、基本的なことをご紹介しましたが、
ボックスの繰り返し方法について、少し応用的な使い方があります。

それはまたの機会にお話いたします。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 19:45 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。