フロートを理解することで、さらに柔軟なレイアウトを作ることができます。なろうだとこれを使って凝ったものを作ります。
フロートはレイアウトを作るために役立つプロパティです。是非理解して、使ってみてください。
チャット小説や赤文字さんなど、応用が効きます。
ブロック要素を左右に並べたかったらどうすればいいでしょうか。
通常、ブロック要素を並べると縦に並びます。幅を小さくしても同様です。
左右に並べるのを実現するためにはfloatパラメータを指定します。
floatパラメータを指定しするとそれぞれ別の段に分かれてしまうのを防いでくれます。
<div style="width:148px;height:148px;border:dashed 1px #FF0000;float:left;">ボックス1フロートあり。
</div><div style="width:148px;height:148px;border:dashed 1px #FF0000;float:left;">ボックス2フロートあり。
</div><div style="clear:both;"></div>
<div style="width:148px;height:148px;border:dashed 1px #FF0000;">ボックス1フロートなし。
</div><div style="width:148px;height:148px;border:dashed 1px #FF0000;">ボックス2フロートなし。
</div>
使い方は
<div style="float:left;">ブロック1</div><div style="float:left;">ブロック2</div>
<div style="clear:both;"></div>
のようにします。並べたいブロックを並べ終わったら<div style="clear:both;"></div>でfloatを解除しておきます。
これを忘れるとレイアウトがひどいことになります。
ここではfloat:left;にしてますが、右から並べる場合はfloat:right;にします。あとで説明する縦書きで役立ちます。
なお、フロートを指定すると必ず左右に並ぶかというと、そうではありません。
要素の幅が親要素よりも広いと次の段に行きます。なので、並べたい要素の幅には注意しましょう。できるならwidth %を使って決めるのがよいでしょう。
さて、これを使えばどうなるのかって？ ちょっと応用の幅が広いので次回から説明します。
今回は説明まで。
今回は基本的なところまで、次回からフロートを使った応用を説明していきます。
とりあえずここでは、ブロック要素にfloat:を指定して、並べたいブロックを並べ終わったらclear:both;で解除する。それだけ覚えてください。
