やまでら くみこ のレシピ

テレビで話題の人気レシピをメインに紹介しています。

【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]

関連記事

行正り香さんのクローゼット管理術。オフシーズンの服は、クリーニング店に預ける。

料理研究家・行正り香(ゆきまさ りか)さんの新刊、「行正り香の暮らしメモ100」を読みました。 同著には、料理のコツから整理&整頓術や人との…

炭酸フルーツって美味しいの?イチゴやミカンの炭酸水漬けを検証!

NHKの「ガッテン」など、多くのテレビ番組で話題の炭酸フルーツ。 フルーツに炭酸を含ませることで食感がシュワシュワになり、美味しさがアップす…

【リコー GR DIGITAL IV】ブログ写真用にデジカメを購入!

昨日、リコーのデジカメ、GR DIGITAL IVを買いました。 これまでは、ブログ用の写真をiPhone4で撮っていたんです。便利なんです…

釧路湿原観光のおすすめ3選。カヌー、展望台、ノロッコ号を解説!

釧路湿原を観光するうえで、おすすめのスポット&アクティビティは3つあります。 最もおすすめで、ぜひ体験してもらいたいのがカヌーです。 初心者…

「ディアテック カウンセリングプレシャンプー」。ノンシリコンの美容院シャンプーをレビュー。

シャンプーを購入する際、私はいつも「シャンプー解析」というサイトを参考にしています。 シャンプーの成分についてはまったく無知な私ですが、この…

とうもろこしの茹で方(レンジ)おすすめ!

とうもろこしはレンジが一番。皮ごとチン、皮なしラップでチンが美味しいゆで方。

とうもろこしの茹で方は、レンジでチンが一番美味しいです。 皮ごとならそ…

枝豆の茹で方おすすめ!

枝豆の美味しい茹で方!茹で時間は鍋で4〜5分。味と栄養面を解説。

枝豆の上手な茹で方をご紹介します。 お伝えする茹で方は3パターン。 そ…

長生きみそ味噌汁おすすめ!

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

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

おからパウダーダイエット

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

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

おすすめ記事

バナナの保存方法。ラップやビニール袋で覆って冷蔵庫が一番長持ち。

バナナを生のまま日持ちさせる保存方法をご紹介します。 おすすめは冷蔵保…

桃の綺麗な剥き方と切り方!高野フルーツパーラーの簡単&おしゃれな方法。

桃の皮の剥き方と上手な切り方をご紹介します。 桃を綺麗にムダなくおいし…

そうめんの美味しい茹で方。超一流そうめん職人の梅干しを使う方法。

超一流そうめん職人がすすめる、そうめんの美味しい茹で方をご紹介します。…

ピーマンの肉詰めの基本レシピ。人気シェフの失敗しない絶品おかず。

ピーマンの肉詰めのおすすめ基本レシピをご紹介します。 中華の人気店「美…

伝説の家政婦 タサン志麻さんの人気レシピ16品。作り置きも紹介。

伝説の家政婦 タサン志麻(しま)さんの人気レシピを16品ご紹介します。…

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

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

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

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

梅干しの作り方。初心者でも失敗しない簡単な漬け方。

梅干しの漬け方をご紹介します。 私は10年ほど前から自家製梅干しを作っ…

枝豆を蒸し焼きにする方法。フライパンで簡単!栄養もムダなく取れる。

枝豆をフライパンで蒸し焼きにして火を通す方法をご紹介します。 管理栄養…

枝豆をレンジでチンする方法。時間は500wで5分。

枝豆を電子レンジでチンする方法をご紹介します。 群馬県沼田市の人気枝豆…

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

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

ギリシャ料理41品を現地から徹底解説!代表的な料理をすべて紹介。

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

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

ゆで卵の作り方をご紹介します。 鍋を使ったゆで卵の基本レシピです。 初…

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

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

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

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

豆腐の保存!水は必要?容器はどうする?保存方法と保存期間を解説。

豆腐のおすすめの保存方法と保存期間をご紹介します。 料理に使い切れなか…

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

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

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

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

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

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

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

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

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

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

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

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

みきママの人気レシピ。節約簡単料理91品まとめ。

おうち料理研究家のみきママの人気レシピ91品をご紹介します。 当サイト…

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

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

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

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

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

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

カレーに合うおかず23選。サラダ&サラダ以外の副菜を一挙紹介。

テレビで話題になった人気料理の中から、カレーに合うおかずのレシピを23…

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

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

最新記事

キョフテの本場風レシピ!人気トルコ料理の作り方を現地より紹介。

キョフテ(köfte)のレシピを本場トルコよりご紹介します。 キョフテ…

バクラヴァのレシピ!トルコやギリシャで大人気のお菓子の作り方。

バクラヴァ(バクラバ:Baklava)の超簡単レシピをご紹介します。 …

ガラタ橋からイスタンブールの街並みを観光!サバサンドのおすすめ店も紹介。

ガラタ橋は、トルコのイスタンブールの旧市街と新市街を結んでいる橋で、観…

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

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

いんげんとオリーブオイルのトルコ風煮物!ターゼファスリエのレシピ。

さやいんげんとオリーブオイルを使った煮物のおすすめレシピをご紹介します…