やまでら くみこ のレシピ

短時間で簡単に作れる人気家庭料理を紹介。

CSSで回り込みを設定する時の3つのルール。floatの使い方。

投稿日:2013年1月17日 更新日:


CSSで意外とつまずきやすいのが、回り込み(段組み)、そしてその解除の方法です。
分かってしまえばスゴク簡単なことなんですが、実は私も最初はあまり理解できませんでした。

そこで今回は、画像やテキストの回り込みを設定するにあたって、最低限おさえておきたいルールを3つご紹介します。

ルール1:左寄せは「float:left;」 右寄せは「float:right;」

左はleft、右はright。
カンタンですね。

たとえば、下の例。

ボックス(1)
【 left 】
ボックス(2)
【 left 】

両方とも「float:left;」を指定しています。ボックス1を左寄せして、そのとなりにボックス2も左寄せ。
だから、2つとも左端に並んで表示されます。

続いて、こちら。

ボックス(1)
【 left 】
ボックス(2)
【 right 】

先ほどとは違い、ボックス2に「right」を指定しています。
そのため、ボックス2が右端に移動しています。

それでは、両方に「right」を指定したらどうなるか。

ボックス(1)
【 right 】
ボックス(2)
【 right 】

ボックス1の方が、より右側に表示されます。
ちょっと意外ですね。

ちなみに、ボックス1は「right」、ボックス2は「left」と指定すると、こうなります。

ボックス(1)
【 right 】
ボックス(2)
【 left 】

ルール2:幅( width )は必ず指定する

幅を指定しないと、意図したとおりの段組みになりません。
floatを指定した要素には、widthも記述しておきましょう。

下の例は、両方のボックスに float:left; を記述しています。
つまり、左から順番に並ぶよう指定しているということです。

それぞれのボックスの幅を指定すると、ちゃんと横に並んで表示されます。

このボックスには、幅(width)を指定しています。
このボックスにも、幅(width)を指定しています。

しかし、幅を指定しないと、横に並びません。
上の例と同じように float:left; を記述しているにもかかわらずです。

中のテキストの長さ分だけボックスが広がってしまっているので、2つのボックスが並ぶ幅がなくなってしまっているのです。
だから、上下に表示されてしまいます。

このボックスには幅(width)を指定していません。
このボックスにも幅(width)を指定していません。

ルール3:回り込みの解除を忘れずに

ボックスを並べて表示した後に、その次からは段組みをやめて普通に表示したい場合は、回り込みの解除をする必要があります。

それには、解除したい場所に、 <div style=”clear: both;”></div> を記入します。
そうしないとレイアウトが崩れてしまいます。

ホントはこうしたかったのに・・・

ボックスA
【 left 】
ボックスB
【 left 】
ボックスC
【 clear:both; 】

解除しないと、こうなっちゃう。

ボックスA
【 left 】
ボックスB
【 left 】
ボックスC
【 指定なし 】

まとめ

  1. 左寄せは「float:left;」 右寄せは「float:right;」
  2. 幅( width )は必ず指定する
  3. 回り込みの解除を忘れずに

以上の3点が、CSSを使った回り込みの基本です。

意外と難しくありませんね。
ぜひ、自分のサイトなどで試してみてください。

おすすめ記事

最小公倍数の計算アプリ。手計算する場合の簡単な求め方も紹介。

最小公倍数を求めるための計算機アプリです。整数は、3つ以上入力すること…

最大公約数の計算機。サイト上で瞬時に計算!簡単な求め方も解説。

最大公約数を求めるための計算機アプリです。整数は、3つ以上入力すること…

フランス語のアルファベットの簡単キーボード。一覧から文字を入力。

フランス語のアルファベットを簡単に入力するためのオンラインアプリです。…

スペイン語のアルファベット入力キーボード。変換不要!一覧から文字を選択

スペイン語のアルファベットを簡単に入力するためのオンラインアプリです。…

ロシア語のアルファベット入力キーボード。変換不要!一覧から文字を選択

ロシア語のアルファベットを簡単に入力するためのオンラインアプリです。一…

累乗・べき乗の計算機。指数が分数・小数・マイナスでもOK!

累乗とべき乗(冪乗)を簡単に計算する電卓です。数aのn乗、anを算出し…

正三角形の面積・高さ・辺の長さの計算機。公式を使った求め方も紹介。

正三角形の面積・高さ・辺の長さを計算するツールです。

円の面積・直径・半径・円周の計算機。公式を使った求め方も紹介。

円の面積と円周の長さを計算するツールです。

トルコ語のアルファベットの入力ツール。トルコ文字の簡単キーボード。

トルコ語のアルファベットを入力するためのオンラインツールです。使い方は…

ギリシャ文字への変換を簡単に!見た目と読み方の一覧からギリシャ語を入力。

ギリシャ文字を手軽に入力するためのオンラインツールです。入力したいギリ…

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

ページ内リンクのジャンプ先がずれてしまう原因と、その解決策について解説…

平方根(ルート)の値を求める計算機。分数もOKな電卓サイト。

平方根(ルート)の計算機は、平方根の値をサイト上でカンタンに計算できる…

【文字数カウント】いちどに複数の文章をチェックできるWebアプリ。

文字数カウンター/文字数チェッカーを作りましたので、サイト運営に役立て…

台形の面積 計算機。基本公式と高さが分からないときの求め方。

「台形の面積」計算機は、台形の面積をWeb上でカンタンに計算できる電卓…

HTMLタグとCSSで太字表示する3つの方法。

ブログを書くときなどに、HTMLタグやスタイルシートでテキストを太字に…