やまでら くみこ のレシピ

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

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を使った回り込みの基本です。

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

おすすめ記事

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

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

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

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

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

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

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

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

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

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

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

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

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

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

分数同士の計算をサイト上で簡単に行える、電卓アプリです。かけ算・割り算・足し算・引き算、どの計算方法にも対応しています。このツール…

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

この素数チェッカーは、指定した整数が素数かどうかを簡単に判定できるアプリです。もし素数でない場合は、その整数の素因数を一覧表示しま…

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

素因数分解をサイト上で簡単に行える、計算機アプリです。入力は15桁以下に抑えるのがおすすめです。入力した数字が大きいと、計算にかな…

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

最小公倍数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切…

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

最大公約数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切…

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

フランス語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。アクセント記…

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

スペイン語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。逆疑問符や逆…

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

ロシア語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。打ち方が分から…

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

累乗とべき乗(冪乗)を簡単に計算する電卓です。数aのn乗、anを算出します。二乗や三乗を計算するときなどに便利です。なお、この計算…

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

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

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

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

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

トルコ語のアルファベットを入力するためのオンラインツールです。使い方は簡単で、トルコの文字を一覧から選択するだけでOK。キーボード…

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

ギリシャ文字を手軽に入力するためのオンラインツールです。入力したいギリシャ文字を一覧から選ぶだけなので、超簡単。キーボードで文字を…

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

ページ内リンクのジャンプ先がずれてしまう原因と、その解決策について解説します。別ページの特定の場所にリンクを貼る場合には、ハッシュ…

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

平方根(ルート)の計算機は、平方根の値をサイト上でカンタンに計算できる電卓です。整数だけでなく、小数や分数の平方根にも対応している…