意図的にfloatを利用する

プログラミングを学び始めた頃、横並びにするプロパティとしてfloatを学びました。
実際にコードを書くとビューがよくわからなくなった。
こんな経験ありません？僕は経験しました。
そこでfloatに対する苦手意識みたいなのがつき「float使うならflexboxでしょ」みたいな感じでfloatを使ってきませんでした。
今回、ポートフォリオサイトを使う際に意図的に使う機会がありfloatに対して苦手意識がなくなったのでfloatが苦手な方の参考になればと思います。

結論

浮かせたい要素に　float: left を当てる

僕は横並びのプロパティよりこっちの方がわかりやすい。
floatって書いてるから気付けよみたいな感じですが、、
実際に見た方がわかりやすいですね

こんな感じの↓

下の要素を少し見せることでスクロールさせることを意識させるような感じ

　実際のコード

  <div class="red"></div>
  <div class="under-red"></div>
  <div class="blue"></div>
  <div class="under-blue"></div>
  <div class="green"></div>

.red{
  width: 50vw;
  height: 33vh;
  background-color: red;
  border-bottom-left-radius: 30% 10%;
  border-bottom-right-radius: 30% 10%;
  float: left;
}
.under-red{
  width: 50vw;
  height: 33vh;
  background-color: blue;
}

.blue{
  width: 50vw;
  height: 33vh;
  background-color: blue;
  border-bottom-left-radius: 30% 10%;
  border-bottom-right-radius: 30% 10%;
  float: left;
}

.under-blue{
  width: 50vw;
  height: 33vh;
  background-color: green;
}

.green{
  width: 50vw;
  height: 33vh;
  background-color: green;
}

今回の使い方

1.まず赤、青、緑の箱を用意して赤、青の下の角を丸める
2.下にいれる箱を上の箱と同じサイズで用意する（今回であればunder-redをunder-blue)
3. 浮かせたい要素にfloat: leftをあてる

まとめ

昔によくわからなくて苦手意識がついても時間を置いて振り返ることで意外とわかったりするので今わからなくても大丈夫！

floatとflexboxを上手に使いこなせるようになりたい