前置き
floatとflexboxとgridはそれぞれ、要素を横並びにすることができるCSSのプロパティや値です。
Webページを作る上で最も大事なこととなるので、使い分けできるようにしましょう。
この記事で分かること
- テキストの回り込みをしたい場合は、floatを使う
- 横並びのレイアウトをしたい場合は、flexboxを使う
- 格子状のレイアウトをしたい場合は、gridを使う
それぞれの特徴
float
指定した要素を左または右に浮動させ、後ろの要素を回り込みます。
ブログなどで、文字の途中に画像を入れる時にしか今は使わないかもしれません。
flexbox
指定した要素の子要素を整列させます。
子要素の配置を調整しやすいので、横並びの中でもちょっと段を変えたりなども可能です。
grid
指定した要素の子要素をテーブル状(行・列)に配置します。
子要素の幅や高さを親要素(gridを指定している要素)で指定することができます。
それぞれのコード
float
See the Pen CSS_compare_float by engineerhikaru (@engineerhikaru) on CodePen.
flexbox
See the Pen CSS_compare_flexbox by engineerhikaru (@engineerhikaru) on CodePen.
grid
See the Pen CSS_compare_grid by engineerhikaru (@engineerhikaru) on CodePen.
それぞれの特徴を生かしたコード
float
See the Pen CSS_compare_float_ex by engineerhikaru (@engineerhikaru) on CodePen.
flexbox
See the Pen CSS_compare_flexbox_ex by engineerhikaru (@engineerhikaru) on CodePen.
grid
See the Pen CSS_compare_grid_ex by engineerhikaru (@engineerhikaru) on CodePen.
まとめ
ただ横並びにするだけであれば、どれを使っても問題はありませんが、
記事の最初に書いた通り、私の場合は下記のように使い分けています。
- テキストの回り込みをしたい場合は、floatを使う
- 横並びのレイアウトをしたい場合は、flexboxを使う
- 格子状のレイアウトをしたい場合は、gridを使う
特にflexboxは、モダンなレイアウトなサイトを作る時に有効ですので、まずこれを習得したいです。
| float | flexbox | grid | |
|---|---|---|---|
| 特徴 | 要素を浮動させる | 子要素を整列させる | 子要素をテーブル状に配置させる |
| 使う場面 | テキストの回り込み | 横並びのレイアウト | 格子状のレイアウト |
| 応用性 | △ | ◎ | ○ |