CSSで意外とつまずきやすいのが、回り込み(段組み)、そしてその解除の方法です。
分かってしまえばスゴク簡単なことなんですが、実は私も最初はあまり理解できませんでした。
そこで今回は、画像やテキストの回り込みを設定するにあたって、最低限おさえておきたいルールを3つご紹介します。
ルール1:左寄せは「float:left;」 右寄せは「float:right;」
左はleft、右はright。
カンタンですね。
たとえば、下の例。
【 left 】
【 left 】
両方とも「float:left;」を指定しています。ボックス1を左寄せして、そのとなりにボックス2も左寄せ。
だから、2つとも左端に並んで表示されます。
続いて、こちら。
【 left 】
【 right 】
先ほどとは違い、ボックス2に「right」を指定しています。
そのため、ボックス2が右端に移動しています。
それでは、両方に「right」を指定したらどうなるか。
【 right 】
【 right 】
ボックス1の方が、より右側に表示されます。
ちょっと意外ですね。
ちなみに、ボックス1は「right」、ボックス2は「left」と指定すると、こうなります。
【 right 】
【 left 】
ルール2:幅( width )は必ず指定する
幅を指定しないと、意図したとおりの段組みになりません。
floatを指定した要素には、widthも記述しておきましょう。
下の例は、両方のボックスに float:left; を記述しています。
つまり、左から順番に並ぶよう指定しているということです。
それぞれのボックスの幅を指定すると、ちゃんと横に並んで表示されます。
しかし、幅を指定しないと、横に並びません。
上の例と同じように float:left; を記述しているにもかかわらずです。
中のテキストの長さ分だけボックスが広がってしまっているので、2つのボックスが並ぶ幅がなくなってしまっているのです。
だから、上下に表示されてしまいます。
ルール3:回り込みの解除を忘れずに
ボックスを並べて表示した後に、その次からは段組みをやめて普通に表示したい場合は、回り込みの解除をする必要があります。
それには、解除したい場所に、 <div style=”clear: both;”></div> を記入します。
そうしないとレイアウトが崩れてしまいます。
ホントはこうしたかったのに・・・
【 left 】
【 left 】
【 clear:both; 】
解除しないと、こうなっちゃう。
【 left 】
【 left 】
【 指定なし 】
まとめ
- 左寄せは「float:left;」 右寄せは「float:right;」
- 幅( width )は必ず指定する
- 回り込みの解除を忘れずに
以上の3点が、CSSを使った回り込みの基本です。
意外と難しくありませんね。
ぜひ、自分のサイトなどで試してみてください。