ウェブデザイナー募集 ホームページ作成HOME

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

CSS float

CSS float

float(フロート)とは、CSSでレイアウトをするのに欠かせないタグです。
サイドバーを設定する2カラムのブログや3カラムのブログではこの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(パディング)です。

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


CSSの基礎知識
CSS・スタイルシートとは
ブログのCSS
CSSでレイアウト 書き方編
CSSでレイアウト 実践編
CSSポイントレイアウト
CSS フォント
CSS テーブル
CSS ロールオーバー
CSS 背景
CSS margin
CSS float
あると便利!
CSS エディター
FireFoxとCSS
CSSのお勧め書籍
リファレンスHOME
ウェブサイトHOME