floatを使ったCSSレイアウトの基礎

CSSレイアウトの基礎

floatを使って2つのBOXを並べて配置する3つの方法です。

注意する点は、floatを使用した場合、floatの解除を行わないとレイアウトが崩れる可能性があるので必ず解除しましょう。

PR

1.CLASSで同じスタイルを繰り返す

ネットショップの商品一覧など同じスタイルのBOXを並べたりする時に使用する。

BOXを並べる
※BOXの間の余白は、広めに描画してあります。

【実際の例】
CLASSを使いスタイルを繰り返せるので、2つと言わず複数可能。
横幅に入りきれない場合は、改行して下に表示されます。

A
B
C
D
E
F
G

 

2.margin-leftでずらす

左側のBOXにfloat:leftを適用し、右側のBOXはmargin-leftで左側のBOXの幅と間の余白分をずらす方法です。
margin-leftでずらす

【実際の例】

A
B

 

3.float:left と float:right で両側に振り分ける

floatで両側に振り分ける
float:left と float:right で両側に振り分けるので、外側に幅を指定したBOXが必要になります。

【実際の例】
広がらないようにベルトでギュッと締めてる感じ(笑)

A
B
PR

関連記事