ホームページ作成講座HAC Design

CSS　float

float（フロート）とは、CSSでレイアウトをするのに欠かせないタグです。
サイドバーを設定する２カラムのブログや３カラムのブログではこのfloat（フロート）を理解することがとても大事です。float（フロート）は文字列や画像を回り込ませる属性です。

CSSでレイアウト実践編でも使っているのですが、サイドバーの領域とメインの領域を分けるのに使いました。ブログでレイアウトが崩れたときは、CSSファイルを開き、このfloat（フロート）が書いてある場所を見つけましょう。そこの横幅（width）より他の場所の横幅（width）で設定された数字が大きくなっていないか確認すると、レイアウトが崩れた原因が見つかることが多いです。

それでは、CSSでレイアウト実践編のレイアウトの補足になりますが、float（フロート）について説明しましょう。

float（フロート）をつかって2段組に

CSSでレイアウト実践編では全体の枠の横幅が780pxで設定していました。
float（フロート）は回り込ませるという属性なので、まずは横幅の設定をしてあげます。
ここでは #content で width:540px という設定ですが、 padding の数字も足す必要があるので、 #content はトータルで width:580px です。必然的に、#menu は width:200px となります。
このふたつを左右に分けるのが float:left float:right　なのです。

#content{
float:left;
width:540px;
padding-left:20px;
padding-right:20px;
}

#menu{
float:right;
width:180px;
padding-right:20px;
}

float:left は指定した要素を左に寄せ、後に続く内容はその右側に回り込ませます。
float:right は指定した要素を右に寄せます。後に続く内容はその左側に回り込ませます。

また、サイドバーの位置を左右逆にしたい場合は、それぞれのfloat（フロート）の左右の設定を逆にしてあげればいいのです。

レイアウトの難関は、このfloat（フロート）とmargin（マージン）とpadding（パディング）です。

これがしっかり理解できれば、ブログのカスタマイズもお手の物です！