親子要素関係について

問題点・エラーコード

模写コーディングをしています。ベースはBootstrapを使っていたのですが、resuponsibleファイルを作って新たに手を加えています。

特定のおや要素の中に入ってくれる子要素と入らない子要素ができてしまいます。
→body > div.body-box > top > div.top.row > div.t-1.col-12.col-lg-6
body > div.body-box > top > div.top.row > div.t-2.col-12.col-lg-6という風に、.t-1と、.t-2を入れているのですが、.t-2は親からは見出し、.t-1.t-2とも、widthの50％指定が効いてくれません。
また、positionをおや要素に指定したとき、子要素はおや要素と一体にならないという理解は正しいですか？
どなたかお時間ある方、ご教示願います。

文字数の関係上、リセットcssを本文中にリセットcssをつけれませんでした。申し分けないです。使用したリセットcssのリンクは以下です。
doctor reset css

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    
7      <!-- Bootstrap CSS -->
8      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
9
10      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
11    <meta name="viewport" content="width=device-width, initial-scale=1.0">
12    <link rel="stylesheet" href="responsive.css">
13   
14
15    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
16    <link rel="stylesheet" href="style.css">
17
18    <title>airbnb</title>
19  </head>
20<header class="container-fluid">
21  <div class="header row">
22    <div class="col-12 col-sm-12 col-lg-6">
23      <div class="header-lg-sm row">
24    <div  class="item col-2 col-sm-2 col-lg-3  fab fa-airbnb h-100"><a href="#"></a></div>
25    <div class="item col-2 col-sm-2 col-lg-2"><a href="#">概要</a></div>
26    
27  </div>
28</div>
29</div>
30</header>
31
32    <body class="container-fluid">
33      <div class="body-box">
34            
35      
36          <top class="row">
37            <div class="top-img col-12 col-lg-12">
38            </div>
39      
40            <div class="top row">
41              <div class="t-1 col-12 col-lg-6">
42              <h2> 最大ホスティング収入：<br>
43                <span>¥ 70,941 </span>／1か月、エリア：<br>
44                Fukuoka</h2>
45                 <a href="#">予想ホスティング収入額の計算方法</a>
46              </div>
47              <div class="t-2 col-12 col-lg-6">
48                <h2>予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください</h2>
49                <form action="#" method="POST" name="information" class="information">
50                  <input type="text" name="location" placeholder="所在地"> 
51                  <select name="roomtype">
52                    <option value="まるまる貸し切り"> まるまる貸し切り</option>
53                    
54               
55                      </select>
56                      <select class="last" name="bathroom">
57                        <option value=""hidden>バスルーム</option>
58                        <option value="0">0寝室</option>
59                    
60                      </select>
61                    </form>
62      
63                  </div>
64                  
65                    <input type="checkbox" id="hidden-input-2">
66                    <label for="hidden-input-2"">特別なアメニティ・設備の追加</label>
67                    <div class="hidden-form-2">
68                      <p>ゲストに人気の特別なアメニティ・設備がある場合は、お知らせください</p>
69                        <form action="#" method="POST" class="check-b">
70      
71                          <div class="check-content">
72                            <div class="check-contents"><input type="checkbox" id="hid-2-1"><label for="hid-2-1">ジム</label></div>
73
74                          </div>
75                          
76                        </form>
77                    </div>
78                  
79                </div>
80                <button type="button" class="top-btn" value="get-started!">リスティングの掲載をはじめる</button>
81              </div>
82      
83             </div>
84              
85            
86          </top>
87　　　</div>
88   </body>
89</html>

css
1
2/*ここからオリジナル*/
3*{
4  box-sizing: border-box;
5}
6.col-sm-12{
7  padding: 0%;
8} 
9.col-lg-6{
10  padding: 0%;
11}
12
13.container-fluid{
14  padding: 0%;
15}
16.row{
17  margin: 0%;
18}
19.body-box{
20  padding: 0 5%;
21}
22
23header{
24height: 80px;
25}
26.header-lg-sm{
27  display: flex;
28  justify-content: start;
29  align-items: center;
30  text-align: center;
31}
32.item {
33  display: inline-block;
34}
35.fa-airbnb{
36  font-size: 14px;
37  line-height: 70px;
38}
39.top-img{
40  width: 100%;
41  padding-top: 50%;
42  background-image: url(image/istockphoto-1207862114-170667a.jpg);
43  object-fit: fill;
44  background-size: cover;
45
46}
47.t-1 h2{
48   font-size: 40px;
49   font-weight: 800;
50   line-height: 42px;
51   color: #222222;
52   margin-bottom: 20px;
53}
54.t-1 span{
55  color: #E41E57;
56}
57.t-1 a{
58  color: #222222;
59  text-decoration: underline;
60  font-size: 14px;
61  font-weight: 600;
62  line-height: 20px;
63}
64.information{
65  display: flex;
66  flex-direction: column;
67}
68.information input,select{
69  width: 100%;
70  border-color: ;
71}
72#hidden-input{
73  display: none;
74}
75#hidden-input-2{
76  display: none;
77}
78#hidden-input-2+label {
79  padding: 0%;
80  margin: 0%;
81  height: 0;
82  overflow: hidden;
83  opacity: 0;
84}
85.hidden-form{
86  padding: 0%;
87  margin: 0%;
88  height: 0;
89  overflow: hidden;
90  opacity: 0;
91}
92
93#hidden-input:checked~.hidden-form{
94  padding: 10px 0;
95  height: auto;
96  opacity: 1;
97  overflow: visible;
98}
99 #hidden-input:checked~#hidden-input-2+label{
100      padding: 10px 0;
101      height: auto;
102      opacity: 1;
103      overflow: visible;
104    }
105
106.hidden-form-2{
107  padding: 0%;
108  margin: 0%;
109  height: 0;
110  overflow: hidden;
111  opacity: 0;
112}
113#hidden-input-2:checked~.hidden-form-2{
114  padding: 10px 0;
115  height: auto;
116  opacity: 1;
117  overflow: visible;
118}
119.t-1{
120  border-bottom:1px #BBBBBB solid;
121  padding-top: 24px;
122  padding-bottom: 34px;
123}
124.t-1 a{
125  padding-top: 22px;
126}
127.t-2 h2{
128  margin: 32px 0 32px 0;
129  line-height: 24px ;
130  font-size: 18px;
131  color: #222222;
132  font-weight: 400;
133}
134.information input,select{
135  height: 55px;
136  border:1px #BBBBBB solid;
137}
138.information input{
139  border-top-left-radius:5px ;
140  border-top-right-radius:5px ;
141}
142.information .member{
143  border-bottom-left-radius:5px ;
144  border-bottom-right-radius:5px ;
145  margin-bottom: 20px;
146}
147.hidden-form select{
148  height: 55px;
149  border:1px #BBBBBB solid;
150}
151.hidden-form .first{
152  border-top-left-radius:5px ;
153  border-top-right-radius:5px ;
154}
155.hidden-form .last{
156  border-bottom-left-radius:5px ;
157  border-bottom-right-radius:5px ;
158}
159.hidden-form-2 form{
160  display: flex;
161  justify-content: start;
162  height: 144px;
163  width: 100%;
164}
165.hidden-form-2 label{
166  font-size: 16px;
167  line-height: 20px;
168  font-weight: 400;
169  font-style: nomal;
170  color: #222222;
171}
172#hidden-input+label::before{
173  font-family: "Font Awesome 5 Free";
174	font-weight: 900;
175  content: "\f067";
176  font-size: 16px;
177  line-height: 20px;
178  font-style: nomal;
179  color: #222222;
180margin-right: 10px;
181}
182#hidden-input-2+label::before{
183  font-family: "Font Awesome 5 Free";
184	font-weight: 900;
185  content: "\f067";
186  font-size: 16px;
187  line-height: 20px;
188  font-style: nomal;
189  color: #222222;
190margin-right: 10px;
191}
192.hidden-form-2 p{
193  margin-bottom: 20px;
194}
195.check-content{
196  width: 144px;
197}
198.check-contents{
199  margin-bottom: 24px;
200  display: flex;
201  align-items: flex-start;
202}
203.check-contents input{
204  display: none;
205}
206.check-contents label{
207  position: relative;
208  padding-left: 20px;
209  margin-left: 20px;
210}
211.check-contents label::before{
212  content: "";
213  display: block;
214  position: absolute;
215  top: 0;
216  left: -20px;
217  width: 25px;
218  height: 25px;
219  border: 1px gainsboro solid;
220  border-radius: 4px;
221  transition-duration: 2.0s;
222}
223
224.check-contents input:checked + label::after{
225  font-family: "Font Awesome 5 Free";
226	font-weight: 900;
227  content: "\f14a";
228  position: absolute;
229  top: 3px;
230  left: -20px;
231  font-size: 28px;
232  border-radius: 4px;
233  
234}
235.top-btn{
236  background-color: #E61E52;
237  border-radius: 5px;
238  height: 55px;
239  line-height: 55px;
240  width: 100%;
241  text-align: center;
242  border: none;
243  color: #fff;
244}

responsible
1@media(min-width:743px){
2 
3  .top{
4    border-radius: 10px;
5    background-color: white;
6    display: flex;
7    flex-flow: row nowrap;
8
9
10  }
11  .t-1{
12    width: 50%;
13    height: 100%;
14  }
15  .t-2{
16    width: 50%;
17    height: 100%;
18  }
19  
20
21}

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

回答1件

ベストアンサー

こんにちは。

.t-2は親からは見出し、.t-1.t-2とも、widthの50％指定が効いてくれません。

内部要素の幅が、親要素の幅より大きくなるとはみ出すのは、仕様です。
width が効かないのは、Bootstrap で col-12 としているからです。

positionをおや要素に指定したとき、子要素はおや要素と一体にならないという理解は正しいですか？

一般的に言えば、間違っていると思います。

投稿2020/10/24 01:35

Lhankor_Mhy

総合スコア36960

Sakupi

2020/10/24 06:15

回答ありがとうございます！ ①bootstrapでcol-12を指定していますが、いま、コーディングしているものは>743pxで、bootstrapのブレークポイントはExtra small　<576pxとなっているので、問題ないと思って見過ごしていました。重ねての質問で申し分けないのですが、どうしてBootstrapがこれに影響しているのか教えていただけませんか？ ②わかりました、今一度調べ直してみます！