デザインカスタマイズでレイアウトが崩れる。CSSのfloat:設定

レイアウトが崩れる

結構切実な問題です。いくら設定を見直しても直せない。
ホームページに来てくれる人がいて、教えてくれる「ホームページが壊れていますよ」
どうしよう。やっと直しても、今度は、別のブラウザでおかしい。
直ったものに手を加えて、直したら、直っていた方のデザインが壊れてしまった。

お手上げ。。。。

なんとかしたい。

標準的なホームページのレイアウト

標準的なホームページのレイアウトはこうなっていませんか?

ヘッダーがあって、コンテンツをのせる場所(A)、サイドバーメニューの(B)、そして、フッター。
このようにキレイに並ばずに、BがAの下に行ってしまったり、フッターがなぜか、ヘッダーのすぐ下に来てしまったりします。

こんなふうな悲しい結果に。。

なんで壊れるの？わからない！涙
少し説明させていただきます。

CSSのfloatって？

AとBを横に並べるために、知っておく必要があるCSSの設定方法は、

float:

というCSSの設定です。

このfloatには3つの設定があります。

float:left;
要素を左に浮き上がらせます。ニュースホームページの記事の中に、写真が掲載されている場合があると思います。

float:right;
要素を右に浮き上がらせます。ニュースホームページの記事の中に、写真が掲載されている場合があると思います。

float:none;
一度指定したfloatの値をnoneに戻します。スマートフォンなどで、画面サイズが大きくなり、floatを使いたくない場合に、こちらを設定します。

実にシンプルです。

しかしながら、複雑にfloatを設定したりしているとわからなくなってしまい、デザインが崩れるという現象が起こります。
floatの中にfloatを入れ、その中にfloatを入れたりするとわからなくなりますよね。

CSSのclearって？

floatの設定を打ち消してくれる記述です。floatとclearの設定はセットです。

先ほどの例ですと、AとBを左と右にfloatさせました。
そのままにしていると、フッター部分も浮き上がり、A、B、フッターを横並びになってしまいます。
そこで、フッターの前やフッター自体に、clearというタグを入れる事で、フッターを正常な位置にとどめる事ができます。

大まかに３つの設定があります。

こちらでは、こんな風に設定すると良いでしょう。

全体的な設定

それでは、上のレイアウトをシンプルにCSSで書いてみましょう。
横幅1000pxとし、ヘッダーのidを”header”、Aのレイアウトのidを”A”、Bのレイアウトのidを”B”、フッターのidを”footer”とします。

それでもデザインが壊れる。

ブラウザによっては、これでも表示がおかしくなり、回り込みをしてしまう場合があります。
その場合は、このようなタグをfloat設定した要素のすぐ下に挿入すると修正されます。