CSSのレイアウトとレスポンシブ対応について

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title></title>
7    <link rel="stylesheet" href="1.css">
8    <link rel="stylesheet" href="sumaho.css">
9  </head>
10  <body>
11    <header>
12      
13    </header>
14
15    <div class="lesson-wrapper">
16
17
18        <div class="lessons">
19
20          <div class="lesson">
21            <div class="category 1">
22              <h1></h1>
23              <p class="text">
24                
25              </p>
26              </div>
27
28              <div class="icon">
29              <div class="icon 1">
30               <img src=".jpg">
31
32             </div></div>
33            </div>
34
35
36
37          <div class="lesson">
38            <div class="category 2">
39              <h1></h1>
40              <p class="text">
41                
42              </p>
43              </div>
44            <div class="icon">
45            <div class="icon 2">
46              <img src="S__3022854.jpg">
47
48            </div></div>
49          </div>
50
51          
52          <div class="clear"></div>
53        </div>
54
55    </div>
56
57css
58
59body {
60  margin: 0;
61  font-family: "Hiragino Kaku Gothic ProN";
62  height:100%;
63}
64
65html{height:100;}
66
67a {
68  text-decoration: none;
69}
70
71*{
72  box-sizing:border-box;
73}
74
75.clear{
76  clear: left;
77}
78
79.container {
80  width: 100%;
81  padding: 0 15px;
82  margin: 0 auto;
83}
84
85
86
87.lesson-wrapper {
88
89  height: 100%;
90  padding-bottom: 80px;
91  background-color: black;
92
93  margin: 0 auto;
94
95}
96
97.lessons{height: 100%;}
98
99.lesson {
100
101
102  width: 100%;
103  height: 25%;
104  background-color: orange;
105  margin-bottom: 20px;
106  margin-top: 20px;
107
108
109}
110
111.lesson h1 {
112  opacity: 0.7;
113  font-size: 100px;
114  letter-spacing: 5px;
115  background-color: yellow;
116  margin-top: 0;
117}
118
119
120.text{
121  font-size: 10px;
122  display: inline-block;
123}
124
125
126
127.category{
128  background-color: green;
129  display: inline-block;
130height: 50%;
131
132  vertical-align: top;
133
134}
135
136
137.icon {
138  position: relative;
139  width: 500px;
140  background-color: blue;
141  display: inline-block;
142  float: right;
143  vertical-align: top;
144}
145
146
147.icon img {
148  position: absolute;
149
150  width: 400px;
151  background-color: green;
152  color: white;
153}
154```![イメージ説明](4130d7da85321b9626ae1e0503eea7c9.jpeg)**ボールドテキスト**### 前提・実現したいこと
155
156写真のような構造にしたいのですが、div⑤がdiv③をはみ出してしまいます。また、スマホ画面にしたときは右のように③の中で④の下に⑤という形にしたいのですが、⑤が③をはみ出して２つ目の③と重なってしまいます。
157どのようにcssを組めばよいのでしょうか？
158自分でも数日間ずっと調べたり検証したりしていますが初心者にはもう限界なので助けていただきたいです。

Lhankor_Mhy

2020/05/26 08:40

ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1

yuuuu6

2020/05/26 08:59

失礼しました。追加しました。

kei344

2020/05/26 09:02

こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。

Lhankor_Mhy

2020/05/26 09:10

確認できませんでした。 teratail は質問の編集のUIが悪くて、投稿せずに閉じてしまいやすいのですよね……

Lhankor_Mhy

2020/05/26 09:14

質問の追記拝読。 ⑤は.iconですか？

yuuuu6

2020/05/26 09:14

もう一度やり直しました。多分反映されたと思います。

yuuuu6

2020/05/26 09:15

⑤が.iconです。

Lhankor_Mhy

2020/05/26 09:19

.icon img{ width: 400px; なので、どう頑張ってもはみ出る時ははみ出ると思います。はみ出たときはどうしたいのですか？小さくしたい、親を広げたい、はみ出た部分を隠したい、など具体的にどうしたいのか書いてください。

yuuuu6

2020/05/26 09:26

そこを見落としていたのでpx指定を削除しました。しかし、まだはみ出ているというか、iconをlessonの中に入れたいのですがlessonの下に配置されてしまいます。

Lhankor_Mhy

2020/05/26 09:33 編集

正直、フレックスレイアウトを勉強して、最初から全部やり直した方がいいのではないかと思うのですが、このままやり遂げたい感じですか？

yuuuu6

2020/05/26 09:33

そうですね。いずれにせよ勉強はし直す予定ではありますが、とりあえず今のレイアウトの正解を知った状態にしておきたいです。

Lhankor_Mhy

2020/05/26 09:37

長くなりそうですね…… では、ご提示のコードでサンプルを作ってみました。 https://jsfiddle.net/Lhankor_Mhy/m3gbdtjs/ とりあえず現状を確認してください。この画像をオレンジの中に入れたい、ということでいいですか？

yuuuu6

2020/05/26 09:41

ありがとうございます、そうです。

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

回答1件

ベストアンサー

絶対配置がよくないと思います。

サンプル

css
1.lesson {
2  width: 100%;
3  height: 25%;
4  background-color: orange;
5  margin-bottom: 20px;
6  margin-top: 20px;
7  display: flow-root; /* 追加 */
8}
9.icon img {
10  /* position: absolute; 削除 */
11
12  width: 400px;
13  background-color: green;
14  color: white;
15}