CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM9:30~PM6:30

スタッフブログ | ボックスを横に並べて表示させたい場合(floatの説明)
スタッフブログ
ボックスを横に並べて表示させたい場合(floatの説明)

ボックスを横に並べて表示させたい場合(floatの説明)
今回はいまや無くてはならない存在!?
floatについてのレシピをご紹介します。
floatとは回り込みのことです。
左、または右に寄せて配置出来ます。
 
まず

floatの書き方

こう書いてみると、ボックスが縦に並びます。
それぞれのdivに色をつけてみると分かりやすいと思います。
ボックスAとボックスBを左右に並べて表示させたい場合はどうするのか?
という時にfloatを使います。
スタイルシートの部分に

#box_a{float:left;width:200px:} #box_b{float:left;width:500px;}

と書くと、
ボックスAが一番左に寄って、その右隣にボックスBが配置されるようになります。
ただし、この状態だとボックスBの後に書いているボックスCも
ボックスBの右隣に回り込んでしまいます。
つまり3つとも横一列に並んでしまいます。
これを防ぐにはボックスCに解除指定のスタイルシートを記述します。

#box_c{ clear:both; }
これで完璧です。

floatにはrightとleftとnoneが指定出来ます。
right→後に続く内容をその左側に回り込ませる
left→後に続く内容をその右側に回り込ませる
none→配置を指定しない、初期値
という指定になっています。
noneは初期値ですので、あまり指定する場面は無いと思います。

また、clearにはrightとleftとbothとnoneが指定できます。
clearに関しては、
right→右寄せを解除
left→左寄せを解除
none→初期値、何もしない
both→左寄せ、右寄せされた全ての回り込みを解除する
という指定になっています。
bothは右も左も両方解除してくれる、という便利な値なので
bothは絶対覚えておいて下さい。
 
floatはとても便利でもう少しお話を・・・
と思いましたが、長くなりそうなので次回にします!

ではまた次回!

| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=338 |
| ソース(ホームページ)のレシピ by 委員長! | 03:08 PM | comments (x) | trackback (x) |

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
SEO・月次更新・リニュアルetc

ホームページ制作の事なら

何でもお問合せください。
お問合せフォームはこちらから

リュウム株式会社

京都市中京区橋弁慶町222番地
ヒライビル3階

TEL 075-257-4588
営業時間 AM9:30-PM6:30

無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00~PM7:00

スタッフブログ | ボックスを横に並べて表示させたい場合(floatの説明)
CSS