演習課題「ボックスを非表示にしてみよう」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめと表示されています。
ここで、floatプロパティを用いて、霧島京子と緑川つばめのボックスが左詰めのフローティングボックスとなるように設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃06:フロート(float)
このチャプターでは、フロートを学習します。
CSSのfloatプロパティは、要素を通常の文書フローから外し、コンテナの左端または右端に寄せて配置します。floatを指定したボックスが続く場合、同じレイヤーのボックスはインラインボックスのような振る舞い方をします。連続するフローティングボックスでも、ブロックごとに左寄せ・右寄せを設定することができます。
主な値は以下の通りです。
・left: 要素をコンテナの左端にフロートさせます。
・right: 要素をコンテナの右端にフロートさせます。
・none: 要素をフロートさせません（デフォルト値）。
@charset "UTF-8";
.box_1 {
float: left;
height: 100px;
background-color: aqua;
}
.box_2 {
float: left;
height: 60px;
background-color: yellow;
}
.box_3 {
height: 60px;
background-color: silver;
}
MDN web docs - float
https://developer.mozilla.org/ja/docs/Web/CSS/float