HTML/CSS

【HTML/CSS】 floatを使って横並びにしてみる!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

floatプロパティを使っていますか?

float(フロート)プロパティとは、要素を右または左に配置することができるプロパティなのですが、HTML/CSSのコーディングをしていると必ずと言っていいほど使うものなんです。

今回はそんなfloatプロパティをご説明していきます!

 



私は現役でフリーランスエンジニアとしてWebサービスやサイト制作をしながら、現在ご覧いただいているブログの運営をしております。

float プロパティとは?

Webサイトのレイアウトでは、要素を左右に寄せて配置したいことが多くあります。
そんな時に利用されるのが「float」プロパティです。

このプロパティはこれから紹介する4つの値があります。

  • left       ... 左に寄せる
  • right     ... 右に寄せる
  • none       ... floatをやめる
  • inherit  ... 継承させる

※4つめのinheritはあまり使わないのですが、一応覚えておきましょう。

float を使ってみる

 

例えば右図のような「box-a」と「box-b」という2つのboxが並んでいるとします。

それぞれのbox要素には200pxの横幅が指定されています。

この2つのboxをfloatをつかって横並びにしていきます。
今回はパターンを3つ例を出して説明しようと思います。

 

パターン1 [float: left]を指定してbox-bを回り込ませる

 

box-aとbox-bにそれぞれ  widthの指定とfloat:leftを指定すると、box-bが左側に回り込んで表示されます。

メニューや画像ギャラリーなど、要素の横並びに配置したいときによく使う技です。

パターン2 [float: left]と[float: right]を指定して左右に配置する


box-aとbox-bにそれぞれ  float:leftとfloat:rigthを指定すると、左右に分かれて表示されます。

両サイドに画像などを配置するときに便利ですね♪

 

パターン3 [float: right]を指定して右に寄せて配置する


float:rightを指定すると、htmlで先に表示されている要素=box-aが右側に表示されます。

左右が反転するので少しわかりにくく感じるかもしれませんが右から順番に並んでいくと考えれば理解できると思います。

まとめ

このようにfloatプロパティを使うことで、要素を左右に自由に配置することが可能になるわけです。
これでレイアウトの自由度がまた増えましたね!

この調子でどんどん学習し素晴らしいサイトが作れるように頑張っていきましょう。

https://itthestudy.com/html-css-max-width%E3%81%A8min-width-%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%BE%E3%81%A8%E3%82%81/


Copyright© FUNA BLOG , 2020 All Rights Reserved.