やまでら くみこ のレシピ

簡単料理の作り方や話題の人気レシピなどを紹介。

【CSS入門】回り込みを設定する時の3つのルール

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

rubiks cube
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を使った回り込みの基本です。
意外と難しくありませんね。
ぜひ、自分のブログなどで試してみてください。

画像引用元:Rubik’s cube on 15th March by athos[hun]

関連記事

トルコ料理の有名メニュー大全!ケバブなどの特徴やおすすめレシピも紹介。

トルコ料理の有名メニュー42品の特徴やレシピを、現地からご紹介します。トルコは、肉料理がとても美味しい国。特に、羊肉(ラム肉)の味は、時に感…

ごぼうの保存方法と保存期間。泥付き・洗いの違いと冷凍保存のコツ。

ごぼうの上手な保存の仕方をご紹介します。スーパーで売られているごぼうには、「洗いごぼう」と「泥付きごぼう」の2種類があります。「洗いごぼう」…

栗ペーストの簡単レシピ。パンに塗るのは勿論、お菓子作りにも使える!

栗ペースト(栗クリーム)の簡単レシピをご紹介します。この栗ペーストの材料は、茹で栗と砂糖だけ。この2つを5分ほど煮て、フードプロセッサーでペ…

インドのヨーグルトを現地から徹底解説!ダヒの作り方と使い方。

インドヨーグルトの作り方や食べ方を、現地インドから詳しくご紹介します。ヨーグルトは、インドでは「ダヒ(Dahi)」と呼ばれています。ダヒはイ…

豆腐の水切り方法の決定版!簡単時短からしっかりまで全て解説。

豆腐の水切りのおすすめの方法をご紹介します。豆腐の水切りには複数のやり方があるので、どの方法がベストなのか分かりづらいですよね。そこで今回は…

おすすめ記事

あんこ餅のレシピ。たった3分で完成!あんこのおやつの簡単な作り方。

あんこ餅の簡単レシピをご紹介します。餅をレンジで柔らかくして、あんこを…

からみ餅の作り方。大根おろし&かつおぶし!醤油風味のシンプルレシピ。

からみ餅のレシピをご紹介します。餅をレンジで茹でて、大根おろしと鰹節と…

磯辺餅の作り方。トースターで簡単!海苔&醤油が旨い磯辺焼きレシピ。

磯辺餅のレシピをご紹介します。磯辺餅とは、こんがりと焼いた餅に醤油を付…

トルコ料理の有名メニュー大全!ケバブなどの特徴やおすすめレシピも紹介。

トルコ料理の有名メニュー42品の特徴やレシピを、現地からご紹介します。…

ギリシャ料理41品を現地から徹底解説!有名な食べ物をすべて紹介。

ギリシャ料理41品を、写真とともに現地から詳しくご紹介します。ギリシャ…

さつまいものレンジでの蒸し方。短時間で柔らかく!ふかし芋の簡単レシピ。

さつまいもを電子レンジで蒸して、ふかし芋を作る簡単な方法をご紹介します…

焼き芋のトースターレシピ!さつまいもの甘みとねっとり食感が人気。

焼き芋のトースター(オーブントースター)を使った簡単レシピをご紹介しま…

ブロッコリーの簡単な茹で方と茹で時間!塩茹でして色よくきれいに。

ブロッコリーの美味しい茹で方をご紹介します。鍋にたっぷりの湯を沸かし、…

糖質制限ダイエットの人気レシピ。低糖質なメニュー224品まとめ。

糖質制限におすすめの人気レシピ224品をご紹介します。どれも低糖質なう…

トーストの人気レシピ集。簡単で美味しい作り方37品まとめ。

トーストの簡単人気レシピを37品ご紹介します。トーストと言えば朝食の定…

生落花生(ピーナッツ)の炒り方!レンジ・フライパン・オーブンを比較。

生落花生の炒り方(煎り方)をご紹介します。乾燥生落花生を、フライパン・…

お餅をトースターで焼く方法!餅の焼き時間とくっつかない焼き方。

トースターを使ったお餅の焼き方をご紹介します。餅をオーブントースターに…

餅の茹で方。鍋で煮るのは意外と簡単!お餅を柔らかくする方法。

餅の茹で方をご紹介します。餅を鍋で煮て柔らかくする方法です。餅は、水か…

長生き味噌汁のレシピ30品。大人気!味噌玉の作り方とみそ汁の効果。

「世界一受けたい授業」や「金スマ」など、多くのテレビ番組で話題沸騰中の…

おからパウダーダイエットのレシピ。人気のラクやせ法のやり方と効果!

NHKの「あさイチ」や日本テレビの「得する人損する人」で話題になった、…

もち麦ダイエットの方法と効果!テレビで話題の茹でもち麦レシピ7品も。

痩せると話題のもち麦ダイエット。フジテレビの「梅ズバ」やTBSの「名医…

ムサカの本格簡単レシピ!ギリシャの人気料理を現地から徹底解説。

ムサカ(moussaka)の本格簡単レシピを、本場ギリシャからお伝えし…

ギリシャヨーグルトの作り方とおすすめレシピ!市販品の味の違いも解説。

ギリシャヨーグルトの作り方と、それを使った料理のおすすめレシピを、本場…

ゆで卵の作り方。茹で時間は何分?半熟や固ゆでの簡単基本レシピ。

ゆで卵の作り方を動画でご紹介します。鍋を使って作る、ゆで卵の簡単レシピ…

豆腐の水切りがわずか3分でできる。レンジを使った裏ワザ。

豆腐の水切りは通常30分くらいかかりますが、電子レンジを使うと時短にな…

豆腐の水切り方法の決定版!簡単時短からしっかりまで全て解説。

豆腐の水切りのおすすめの方法をご紹介します。豆腐の水切りには複数のやり…

ロカボダイエットのレシピ。テレビで話題の糖質制限、お腹一杯食べてもOK。

ロカボダイエットのやり方と、ロカボダイエットのメニューをご紹介します。…

プロのお弁当 おかず簡単レシピ。112日分メニューまとめ。

お弁当の簡単おかずレシピを112パターンご紹介します。112品すべてが…

世界一美味しいカルボナーラのレシピ。得する人損する人で話題。

日本テレビの「得する人損する人」で話題になった、世界一美味しいカルボナ…

レモン酢の作り方2パターン。効果・飲み方・料理に使う方法も紹介。

レモン酢の作り方2パターンと、効果や飲み方、料理に使う方法をご紹介しま…

作り置きおかずの人気レシピ。常備菜にぴったりな料理187品。

作り置きにおすすめの人気レシピを187品ご紹介します。当サイトでは、テ…

作り置き人気レシピ。夕飯のメインおかず向けの肉の常備菜54品。

プロが考案した肉料理の中から、常備菜におすすめの人気レシピを54品ご紹…

超時短レシピ。10分以内で作れる人気料理294品まとめ。

10分以内で作れる時短レシピを294品ご紹介します。当サイトではテレビ…

超時短レシピ。3分以内で作れる人気料理96品まとめ。

3分以内で作れる時短レシピを96品ご紹介します。当サイトではテレビで話…

銀だこが教える、たこ焼きのレシピ。家庭で作る方法。

人気たこ焼きチェーン店「築地 銀だこ」がすすめる、家庭でもできる、タコ…

ヨーグルトの美味しい食べ方29選。ダイエットや便秘解消レシピも。

ヨーグルトの美味しい食べ方をご紹介します。医師が考案した健康レシピや、…

最新記事

ほうれん草の茹で方。茹で時間は1分!下ごしらえ(下処理)のコツも紹介。

ほうれん草の上手な茹で方をご紹介します。ほうれん草を美味しく茹でるコツ…

にんにくの醤油漬けの作り方。保存期間が大幅アップ!簡単レシピと食べ方。

にんにくの醤油漬けの作り方をご紹介します。にんにくと醤油だけを使った、…

チャイの作り方。インドのスパイスミルクティー(マサラチャイ)のレシピ

チャイ(Chai)の作り方を、本場インドで撮影した動画とともにご紹介し…

ごぼうの保存方法と保存期間。泥付き・洗いの違いと冷凍保存のコツ。

ごぼうの上手な保存の仕方をご紹介します。スーパーで売られているごぼうに…

じゃがいもの芽や緑化した皮は身体に毒。ソラニンを抑える保存法と食べ方。

じゃがいもの「芽」と「緑色に変色した皮」には、天然の毒素が多く含まれて…