divpuzzuleについて

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset3.css">
  <link rel="stylesheet" href="div3.css">
</head>
<body>
  <div class="wrapper">
    <div class="red-box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
    <div class="main clearfix">
      <div class="green-box">
      </div>
      <div class="orange-box">
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
      </div>
    </div>
    <div class="yellow-box">
    </div>
  </div>
</body>
</html>


```

```ここに言語を入力
body{
  width: 400px;
}

.wrapper{
  width: 400px;
  margin: 0 auto;
}



.red-box{
  height: 100px;
  background: #ff0000;
  position: relative;
  margin: 0;
  padding: 10px;
}

.box1{
  margin: 10px;
  padding: 0;
  width: 40px;
  height: 40px;
  background: #a9004b;
  position: absolute;
  top: 20px;
  right: 20px;
  border: 10px solid;
  border-color: #ffffff;
  float: right;
}

.box2{
  margin: 10px;
  padding: 0;
  width: 40px;
  height: 40px;
  background: #a9004b;
  position: absolute;
  top: 20px;
  right: 70px;
  border: 10px solid;
  border-color: #ffffff;
  float: right;
}

.box3{
  margin: 10px;
  padding: 0;
  width: 40px;
  height: 40px;
  background: #a9004b;
  position: absolute;
  top: 20px;
  right: 120px;
  border: 10px solid;
  border-color: #ffffff;
  float: right;
}

.green-box{
  width: 150px;
  height: 250px;
  background: #00ff51;
  float: left;
}

.orange-box{
  width: 250px;
  height: 250px;
  background: #8c2727;
  position: relative;
  float: left;
}

.box4{
  margin: 10px;
  padding: 0;
  width: 140px;
  height: 40px;
  background: #ff863f;
  position: absolute;
  top: 40px;
  left: 40px;
  border: 5px solid;
  border-color: #ffffff;
}

.box5{
  margin: 10px;
  padding: 0;
  width: 140px;
  height: 40px;
  background: #ff863f;
  position: absolute;
  top: 100px;
  left: 40px;
  border: 5px solid;
  border-color: #ffffff;
}


.box6{
  margin: 10px;
  padding: 0;
  width: 140px;
  height: 40px;
  background: #ff863f;
  position: absolute;
  top: 160px;
  left: 40px;
  border: 5px solid;
  border-color: #ffffff;
}


.yellow-box{
  height: 100px;
  background: #fff700;

}

.clearfix::after{
  content: "";
  display: block;
  clear: both;

}


```

HTML、CSSを勉強中です。
添付画像のようなpuzzleを作成中です。
上4つ、下3つの並んだ黄色とグレーの箱の作成で煮詰まってしまいました。
ご教授頂けませんでしょうか？

今現在画像とは少し違うpuzzleですが
box1.2.3を囲む新しい要素を作っています。
box1.2.3を同じクラス名にしてmarginを必要な部分だけかけるところで煮詰まりました。

![![イメージ説明](cad4993d73ed86e600ce2f9b165084bb.jpeg)](3b4541c21379d0cb3004ebcbdec79ad0.jpeg)

m.ts10806

2021/02/17 01:39

どこで、煮詰まったのでしょうか。全く何も手を付けていない状態なのでしたら作業依頼と変わりません。そして、何を教えてもらいたいのかも不明です。明示してください。

Lhankor_Mhy

2021/02/17 01:41

https://woinc.jp/web-creation-div-puzzle-3rd-level/ ↑これに取り組んでいるのであれば、ちょっと古い教材なので2021年に使うには時代遅れですね……

Daregada

2021/02/17 01:48

新たに勉強中なら、最初からflexレイアウトを学べばいいし、なんでもかんでもdiv要素で実現するのもやめて、適切にheader要素やfooter要素などを使いましょう。

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

回答1件

ベストアンサー

こんにちは。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13    <header>
14        <nav>
15            <div class="nav-item"></div>
16            <div class="nav-item"></div>
17            <div class="nav-item"></div>
18            <div class="nav-item"></div>
19        </nav>
20    </header>
21    <main>
22        <article>
23            <img src="http://placehold.jp/24/cccccc/eeeeee/320x100.png?text=" alt="">
24            <img src="http://placehold.jp/24/cccccc/eeeeee/320x100.png?text=" alt="">
25            <img src="http://placehold.jp/24/cccccc/eeeeee/320x100.png?text=" alt="">
26        </article>
27
28    </main>
29    <footer>
30
31    </footer>
32</body>
33
34</html>

css
1body {
2    width: 600px;
3}
4header {
5    background: #ca1019;
6    display: flow-root;
7}
8nav {
9    background: white;
10    margin: 45px 50px 45px auto;
11    display: flex;
12    padding: 10px;
13    width: max-content;
14    gap: 10px;
15}
16.nav-item {
17    width: 100px;
18    height: 70px;
19    background: #f4c538;
20}
21main {
22    background: #29b098;
23    height: 480px;
24}
25article {
26    padding-top: 40px;
27    background: #309c77;
28    width: 420px;
29    height: 100%;
30}
31img {
32    display: block;
33    border: 2px white solid;
34    margin: 0 auto 20px;
35}
36footer {
37    background: #f4d508;
38    height: 100px;
39}
40