第4回webのひみつ(floatについての簡単な仕組み)

皆さんこんにちは。
インターン生の明瀨と申します。

今回はhtmlで私が苦手としていたfloatについてまとめていきたいと思います。

(参考画像)

(参考画像URL)
http://taneppa.net/float/

上記の画像はfloat型のイメージを示しています。
主にfloatは左右に寄せる際に使っていきますが、単に左右に寄せるだけではなくfloatをつけた要素を浮かせるという機能を付けます。
この機能を上手く使うことによって、メニューバーの作成やコンテンツの上にコンテンツを配置するなど様々なことができるようになるため覚えてしまうとすごく便利なものとなっています。
また、これを使用する際によく並行してつかわれるのはclearと呼ばれるプロパティです。
これを使用することで、floatを指定した要素を解除することが可能となっています。
こちらの何が凄いのかというと、浮かせて移動させた後に、そのままでは浮きっぱなしの状態ですので、他のコンテンツなどを入れた時に、この浮かせたコンテンツが邪魔になって上に被るように表示されてしまうため、見えなくなったりする可能性があるという点です。しかし、これをclaerのプロパティを使用することで、移動させて表記させた後に、その位置に設置することが可能となっています。

特にclareに関しては凄く大事な仕組みのため必ず覚えたほうが良いと思っています。

これ以外にも色々な使い方があると思うので、次はfloatを使用したサンプルを取り上げたいと思います。
(参考URL)
http://www.css-designsample.com/beginner/hp/float-base.html

こちらのサイトでは様々なパターンを上げていましたのでこちらからパターンについて述べていきます。
まず、パターン1ではAとBのボックスをleftで指定して回り込ませることによって横並びにさせるという方法となっています。こちらを使用することで、縦並びに以外にも横並びという表現方法を増やすことが出来ます。
次のパターン2に関しては、先ほどfloatをleft,leftで同じ位置にしていましたがこちらは片方をrightもう片方をleftとしているため左右離れた場合の設置方法となっています。

では今回はこの辺で終わりたいと思います。
他にも様々な方法がfloatの表現方法があると思うので是非自分で調べてみて下さい。
次回の予告は、float以外のプロパティについてまた触れていきたいと思うのでまた良ければ見てください。

(参考URL)
http://taneppa.net/float/

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

インターンシップへの申し込み・お問い合わせ先
メールでのお問い合わせは、下記フォームに入力して送信してください。
ご氏名 (例)山田 太郎
メールアドレス 半角英数字:ご入力間違いのないようにご注意ください
メールアドレス(確認用) 半角英数字:ご入力間違いのないようにご注意ください
電話番号 (例)0354339211 ※ハイフン抜きで入力してください
題名
お問合わせ内容

アーカイブ

カテゴリー