[PR]
2024年04月27日
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
応援クリックお願いします。
divタグを使いこなす～フロート
2009年11月30日
次はフロートです。フロートとは、「浮く」という意味でdiv要素を浮かせて、左や右に寄せることができます。このフロートがわかれば、ページのレイアウトを自分で作ることができます。
このブログの左側の記事を書いてある部分とブログランキングのリンクがある右側の部分は、それぞれフロートさせて左右に並べてレイアウトしています。
CSSの記述は以下の通りです。
・左に寄せたい場合
float:left;
・右に寄せたい場合
float:right;
ちなみに、floatで寄せたdivの次に記述したdivは左に寄せたら右側に、右に寄せたら左側に入ります。
・左側のボックスのCSS
float:left;
width:50px;
height:50px;
・右側のボックスのCSS
height:50px;
※右側のボックスは幅を指定してないので右側に突き当たるまで幅が伸びてます。
しかし、ここで注意してもらいたいことが2つあります。
まず一つ目は、div要素は幅を指定しなければ、どこかに突き当たるまで幅が広がってしまうので、必ず幅を指定する必要があります。
2つのdivボックスを左右に並べたいと思っても幅を指定しないと以下のようになってしまいます。
（わかりやすいように線をつけています）
二つ目は、どちらかに寄せる場合、どこかに突き当たるまで寄るので、寄せる場所に突き当たるようにしなければいけないのです。
幅を指定しても突き当たる場所を指定しないで2つのdivを左と右に寄せると以下のようになってしまいます。
ちなみに、フロートを解除する場合は次のようになります。
・float:left;の解除
clear:left;
・float:right;の解除
clear:right;
両方解除する場合
・clear:both;
PR
応援クリックお願いします。
Comment
