やまでら くみこ のレシピ

人気レシピの作り方を分かりやすく紹介します。

【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」を読みました。 同著には、料理のコツから整理&整頓術や人との…

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

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

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

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

鎌倉の「テラデリ(TERRA DELI)」。おしゃれなランチは、デートにおすすめです。

鎌倉の「テラデリ(TERRA DELI)」は、おしゃれなランチが楽しめるカジュアルレストラン。デートにおすすめです。 昨日こちらのお店でラン…

無印良品の「ポリプロピレンストッカー」。わたしの使い方。

私は、自宅の台所と洗面所で、無印良品の「ポリプロピレンストッカー(PPストッカー)」を使っています。 幅が狭い半透明の収納ボックスです。 使…

人気記事ランキング

玉ねぎヨーグルトの作り方。得する人損する人で話題のダイエットメニュー。

日本テレビの「あのニュースで得する人損する人」という番組で話題になった…

柳澤英子さんのやせるおかず作り置きレシピ。66品まとめ。

料理研究家の柳澤英子さんの人気レシピ66品をご紹介します。 当サイトで…

みきママの人気レシピ。81品まとめ。

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

プロのお弁当 おかず簡単レシピ。96日分まとめ。

お弁当の簡単おかずレシピを96パターンご紹介します。 全96品のうちの…

家事えもんの人気レシピ。92品まとめ。

家事えもんこと、タレントの松橋周太呂さんの人気レシピをご紹介します。 …

ピックアップ記事

プロの作り置き人気レシピ。常備菜86品まとめ。

プロが考案した野菜や魚介を使った料理の中から、常備菜におすすめの人気レ…

家事えもんの人気レシピ。92品まとめ。

家事えもんこと、タレントの松橋周太呂さんの人気レシピをご紹介します。 …

みきママの人気レシピ。81品まとめ。

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

クリスマス チキン ローストチキン パーティー 料理 メニュー

クリスマスのレシピ。パーティー料理の簡単メニュー82品まとめ。

クリスマスにおすすめの、パーティー料理82品をご紹介します。 当サイト…

お正月におすすめの肉料理。簡単レシピ13品まとめ。

お正月におすすめの肉料理を13品ご紹介します。 当サイトでは、テレビで…

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

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

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

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

食パンの美味しい食べ方。人気レシピ23品まとめ。

食パンを使った人気レシピ23品をご紹介します。 当サイトでは、テレビで…

肉じゃがの人気レシピ。おすすめ7品まとめ。

肉じゃがの人気レシピ7品をご紹介します。 当サイトでは、テレビで話題に…

鍋料理の人気レシピ。おすすめ10品まとめ。

鍋料理の人気レシピを10品ご紹介します。 当サイトではテレビで話題にな…

鶏むね肉の人気レシピ。おすすめ23品まとめ。

鶏ムネ肉の人気レシピを23品ご紹介します。 当サイトでは、テレビで話題…

小倉優子さんの人気レシピ。ゆうこりんの料理11品まとめ。

ゆうこりんこと、タレントの小倉優子さんの人気レシピを11品ご紹介します…

平野レミさんの人気レシピ。61品まとめ。

料理愛好家の平野レミさんの人気レシピを61品ご紹介します。 おしゃれな…

栗原心平さんの人気レシピ。おすすめ43品まとめ。

料理研究家の栗原心平さんの人気レシピ43品をご紹介します。 栗原さんと…

サイゲン大介さんの人気レシピ。28品まとめ。

サイゲン大介こと、お笑いコンビ うしろシティの阿諏訪泰義(あすわたいぎ…

北斗晶さんの人気レシピ。73品まとめ。

タレントの北斗晶さんの人気レシピ73品をご紹介します。 子供も喜ぶ優し…

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

糖質制限ダイエットにおすすめの人気レシピ156品をご紹介します。 当サ…

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

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

プロの作り置き人気レシピ。肉の常備菜36品まとめ。

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

キャベツの人気レシピ集。キャベツの簡単料理の作り方まとめ。

キャベツの人気レシピ50品をご紹介します。当サイトでは、テレビで話題に…

じゃがいもの人気レシピ集。じゃがいもの簡単料理の作り方まとめ。

じゃがいもの人気レシピ50品をご紹介します。当サイトでは、テレビで話題…

白菜の人気レシピ集。白菜の簡単料理の作り方まとめ。

白菜の人気レシピ18品をご紹介します。当サイトでは、テレビで話題になっ…

最新記事

ハンバーグの作り置きレシピ。家事えもんのかけるハンバーグ。

作り置きにぴったりのハンバーグのレシピをご紹介します。 家事えもんこと…

家事えもんのハンバーグ焼きそば。クリスマスパーティーにお薦め。

クリスマスパーティーにお薦めのレシピをご紹介します。 家事えもんこと、…

アボカドの人気レシピ集。アボカドの簡単料理の作り方まとめ。

アボカドの人気レシピ22品をご紹介します。当サイトでは、テレビで話題に…

エビの人気レシピ集。エビの簡単料理の作り方まとめ。

エビの人気レシピ22品をご紹介します。当サイトでは、テレビで話題になっ…

かぼちゃの人気レシピ集。かぼちゃの簡単料理の作り方まとめ。

かぼちゃの人気レシピ17品をご紹介します。当サイトでは、テレビで話題に…

サイト内を検索

このブログについて

このブログは、鎌倉在住の主婦が綴るレシピサイトです。

これは皆んなでシェアしないともったいない!と思った事柄を記事にしています。

最近の話題は、こんな感じです。

  1. 人気の簡単料理のレシピ
  2. 夕食やお弁当の節約献立
  3. 忙しくてもラクチンな作り置き
  4. 無理なく続けられるダイエットレシピ
  5. 食材の基本的な調理法や保存方法