【CSS】div floatパズルが思うように出力を実現できない

実現したいこと

発生している問題・分からないこと

画像のように、#0093b7青がどこかに隠れてしまいます。
①何故でしょうか？どうすればいいのでしょうか？

また、どうにか勘でここまで出力できたのですが、構造を理解できていません。
というのも、この問題はHTMLは穴埋め形式でクラス名だけ挿入する形でした。
つまり、②何故それぞれのボックス？を順々に書くだけでなく、ネスト？が何層もあるのでしょうか？勘でボックスの何となくのまとまり毎に区分けして、入力したのですが合ってるかもわかりません。

組み立て方？考え方？を教えていただけると助かります。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Check</title>
6        <div class="wrapper">
7            <div class="header"></div>
8                <!--
9                    ヘッダーとフッターを除く、main 部分のcssを作成し、
10                    「CLASS」と記述されている箇所へ自身で作成したcssのクラス名を当てはめてください。
11                    ※事前に必要な div は記述してあります。
12                    
13                    Tips: cssのクラス名はどのdiv要素を指しているかわかりやすい命名にして作成しましょう。
14                    例) 左側の緑 → 「.left-green」など
15                -->
16                <div class="main clearfix">
17                    <div class="left-green"></div>
18                    <div class="right-4element">
19                        <div class="right-3element-higher">
20                            <div class="right-heighter-2element">
21                                <div class="right-yellow1"></div>
22                                <div class="right-orange2"></div>
23                            </div>
24                            <div class="right-blue3"></div>
25                        </div>
26                        <div class="right-winered4"></div>
27                    </div>
28                </div>
29            <div class="footer"></div>
30        </div>
31    <link rel="stylesheet" type="text/css" href="./css/reset.css">
32    <link rel="stylesheet" type="text/css" href="./css/index.css">
33</head>
34</html>
35

CSS
1@charset "utf-8";
2/*=============================================
3      index用css divパズル SkillCheck
4      課題と同じく表示されるようhtmlに記述したクラスにスタイルを当てましょう。
5=============================================*/
6.wrapper {
7    margin: 0 auto;
8    width: 400px
9}
10
11/* 共通（ヘッダー・フッター） */
12.header,
13.footer {
14    height: 100px;
15}
16
17/* ヘッダー・フッター */
18.header {
19    background: #141f40;
20}
21.footer {
22    background: #d98d30;
23}
24
25/* 共通 */
26.clearfix:after {
27    content: "";
28    clear: both;
29    display: block;
30}
31
32/*___________________________*/
33
34.left-green {
35    float: left;
36    height: 250px;
37    width: 150px;
38    background-color: #80bfa8;
39}
40.right-yellow1,
41.right-blue2 {
42    float: left;
43    width: 150px;
44}
45.right-yellow1 {
46    height: 50px;
47    background-color: #dbd400;
48}
49.right-orange2 {
50    float: left;
51    height: 150px;
52    width: 100px;
53    background-color: #ff9e6b;
54}
55.right-blue3 {
56    float: left;
57    height: 100px;
58    background-color: #0093b7;
59}
60.right-winered4 {
61    float: left;
62    height: 100px;
63    width: 250px;
64    background-color: #8c2727;
65}
66

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

知人に聞いて教えてもらったのは、マトリョーシカしかのように考えるとのことでした。
言っていることは理解できたのですが、それがどこにどう反映させるべきものなのか不明でした。
知人も勉強中で詳しくは聞けずです。

補足

良さげな記事を見つけました。
これに沿って考えてみます。

https://teratail.com/questions/335329

私がこのレイアウトをフロートで組むときに考えるのは、以下のような感じです。

全体にサイズ指定があるので、まず、全体を包む要素を用意する
縦並びで3つのエリアに分割できるので、要素を3つ用意する
一番上と一番下はサイズと色を付けて終わり
真ん中は横並びで2つのエリアに分割できるので、要素を2つ用意して全部フロートする
内部要素が全てフロートしたので、親要素をclearfixする
左側はサイズと色を付けて終わり
右側は縦並びで2つのエリアに分割できるので、要素を2つ用意する
下側はサイズと色を付けて終わり
上側はは横並びで2つのエリアに分割できるので、要素を2つ用意して全部フロートする
内部要素が全てフロートしたので、親要素をclearfixする
右側はサイズと色を付けて終わり
左側は縦並びで2つの要素なので、要素を2つ用意する
サイズと色を付けて全部終わり

utm.

2024/09/06 00:17

まず、サイズが予期できるなら、フロートではなくフレックスを使います。昔はフロートしか無かったみたいなので配置にフレックスを教えるところが多々あるみたいですが、 MDNのドキュメントでは以下にあるように過去のレイアウト手法として紹介されています https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods しかし、特別な理由がない限りflexを使う方が楽です。 https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Introduction そもそも、HTMLの構造が間違っている可能性があるのに正しい前提で問題に取り組むのは愚か以外の何者でもありません。

行動規範の内容に同意します

回答3件

htmlの構成をかえていいならこんな感じ

html
1<style>
2.header {
3    height: 100px;
4    background: #141f40;
5}
6.footer {
7    height: 100px;
8    background: #d98d30;
9}
10
11.left-green {
12    height: 250px;
13    width: 150px;
14    background-color: #80bfa8;
15}
16.right-yellow1 {
17    width: 150px;
18    height: 50px;
19    background-color: #dbd400;
20}
21.right-orange2 {
22    height: 150px;
23    width: 100px;
24    background-color: #ff9e6b;
25}
26.right-blue3 {
27    width: 150px;
28    height: 100px;
29    background-color: #0093b7;
30}
31.right-winered4 {
32    height: 100px;
33    width: 250px;
34    background-color: #8c2727;
35}
36.col > div:not(.clear){
37float:left;
38}
39.clear{
40clear:both;
41}
42.row{
43width:-moz-fit-content;
44width:fit-content;
45}
46</style>
47<div class="row">
48  <div class="header">h</div>
49  <div class="col">
50    <div class="left-green">l</div>
51    <div class="row">
52      <div class="col">
53         <div class="row">
54           <div class="right-yellow1">1</div>
55           <div class="right-blue3">3</div>
56         </div>
57         <div class="right-orange2">2</div>
58         <div class="clear"></div>
59      </div>
60      <div class="right-winered4">4</div>
61    </div>
62    <div class="clear"></div>
63  </div>
64  <div class="footer">f</div>
65</div>

right-blueが２だったり3だったりtypeがあるのでオリジナルのままではなんとも・・・
ちなみに手抜きのgirdレイアウト

html
1<style>
2.wrap{
3  grid-template-areas:
4  "H H H"
5  "L C1 C2"
6  "L C3 C2"
7  "L C4 C4"
8  "F F F";
9  display: grid;
10  grid-template-columns:150px 150px 100px;
11  grid-template-rows:100px 50px 100px 100px 100px;
12}
13.H { grid-area: H; background: #141f40;}
14.F { grid-area: F; background: #d98d30;}
15.L { grid-area: L; background: #80bfa8;}
16.C1{ grid-area: C1;background: #dbd400;}
17.C2{ grid-area: C2;background: #ff9e6b;}
18.C3{ grid-area: C3;background: #0093b7;}
19.C4{ grid-area: C4;background: #8c2727;}
20</style>
21<div class="wrap">
22<div class="H">H</div>
23<div class="L">L</div>
24<div class="C1">1</div>
25<div class="C2">2</div>
26<div class="C3">3</div>
27<div class="C4">4</div>
28<div class="F">F</div>
29</div>

投稿2024/09/06 00:46

編集2024/09/06 05:30

yambejp

総合スコア117707

①何故でしょうか？

css
1.right-blue3 {
2  float: left;
3  height: 100px;
4  background-color: #0093b7;
5}

フロートした要素は、幅が内部コンテンツまで縮みます。内部コンテンツがない場合0pxまで縮むため、見ることができなくなります。

どうすればいいのでしょうか？

原則として、フロートした要素には幅を持たせるのがいいでしょう。

また、お手本になるような構成ですが、答えだけを書くなら、水色と黄色をラップして、ラップした要素をオレンジと共にフロートする（そしてclearfixする）、のが正解だと思います。

②何故それぞれのボックス？を順々に書くだけでなく、ネスト？が何層もあるのでしょうか？

ご質問にある質問の回答に書いた通りです。

フロートレイアウトで縦並びと横並びを混在させるには、そのようにする必要があります。縦並びだけ横並びだけの場合には必要ありません。
グリッドレイアウトの場合は、ネストをしなくても縦並びと横並びを混在させることができます。

引用されている質問にも書きましたが、こんなものは習得する必要はないです。ほんとにほんとに時代遅れの技術で、今後あなたが使うことはまずないので、趣味でやっているのであればともかく、フロントエンジニアを目指しているのであれば回り道にもほどがあります。適当なところで見切った方がいいでしょう。代わりにフレックスボックスとグリッドレイアウトを学んでください。

独学でこの教材を選んだのであれば、教材を見直すことも考えるべきです。たぶん、5～10年単位で更新されてないと思います。
スクールで提供されたのであれば、まあ仕方ないのかもしれないですが……指導員の意図がちょっとよくわからないですね。

また、HTMLが文法上おかしいのでそちらも見直した方がいいです。

投稿2024/09/06 00:42

編集2024/09/06 06:59