teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問(Bootstrap)親要素左側の子要素を画面端一杯にはみ出させたい

編集履歴

質問編集履歴

1

タイトル・文章の内容一部変更。　左側子要素のクラス名を変更。

2020/01/21 08:03

投稿

yk_dev
yk_dev

スコア8

test CHANGED
@@ -1 +1 @@
1
- (HTML/CSS)親要素内両端の子要素を左右にはみ出させたい
1
+ (Bootstrap)親要素左側の子要素を画面端一杯にはみ出させたい
test CHANGED
@@ -1,8 +1,10 @@
1
- ### 前提・実現したいこと・試したこと
1
+ ### 前提・実現したいこと
2
2
 
3
3
  お世話になります。
4
4
 
5
+ BootStrap4を使用したレイアウトで、子要素(ko-left)の左端を親要素(Bootstrapの.containerクラス)から画面の端まで
6
+
5
- HTML・CSSのレイアウトで、子要素の両端を親要素からはみ出させるようにしたいのですが、
7
+ はみ出させるようにしたいのですが、
6
8
 
7
9
  https://teratail.com/questions/156166
8
10
 
@@ -12,6 +14,12 @@
12
14
 
13
15
  ![![イメージ説明](2430fce51d1aa71f3a803368a4a5910d.jpeg)
14
16
 
17
+
18
+
19
+
20
+
21
+
22
+
15
23
  ###ソースコード
16
24
 
17
25
 
@@ -32,6 +40,8 @@
32
40
 
33
41
  <title>sample</title>
34
42
 
43
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
44
+
35
45
  <link rel="stylesheet" type="text/css" href="style.css">
36
46
 
37
47
  </head>
@@ -40,11 +50,11 @@
40
50
 
41
51
  <body>
42
52
 
43
- <div class="wrapper">
53
+ <div class="wrapper">
44
-
54
+
45
- <div class="container">
55
+ <div class="container">
46
-
56
+
47
- <div class="about">
57
+ <div class="ko">
48
58
 
49
59
  <div class="content">
50
60
 
@@ -62,163 +72,153 @@
62
72
 
63
73
  </div>
64
74
 
75
+
76
+
77
+ <div class="ko-left">
78
+
79
+ <div class="content">
80
+
81
+ <h4>サンプル</h4>
82
+
83
+ <p class="text">
84
+
85
+ サンプル
86
+
87
+ <br />サンプルサンプルサンプルサンプルサンプルサンプルサンプル
88
+
89
+ </p>
90
+
65
- </div>
91
+ </div>
92
+
66
-
93
+ </div>
67
-
68
-
94
+
95
+
96
+
69
- <div class="container2">
97
+ <div class="ko">
70
-
98
+
71
- <div class="content">
99
+ <div class="content">
72
-
100
+
73
- <h4>サンプル</h4>
101
+ <h4>サンプル</h4>
74
-
102
+
75
- <p class="text">
103
+ <p class="text">
104
+
105
+ サンプル
106
+
107
+ <br />サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
108
+
109
+ </p>
110
+
111
+ </div>
112
+
113
+ </div>
114
+
115
+
116
+
117
+ <div class="ko-left">
118
+
119
+ <div class="content">
120
+
121
+ <h4>サンプル</h4>
76
122
 
77
123
  サンプル
78
124
 
79
- <br />サンプルサンプルサンプルサンプルサンプルサンプルサンプル
80
-
81
- </p>
82
-
83
- </div>
125
+ </div>
84
-
126
+
85
- </div>
127
+ </div>
86
-
87
-
88
-
128
+
129
+
130
+
89
- <div class="container">
131
+ <div class="ko">
90
-
132
+
91
- <div class="about">
133
+ <div class="about">
92
-
134
+
93
- <div class="content">
135
+ <div class="content">
94
-
136
+
95
- <h4>サンプル</h4>
137
+ <h4>サンプル</h4>
96
-
138
+
97
- <p class="text">
139
+ <p class="text">サンプル</p>
98
-
99
- サンプル
140
+
100
-
101
- <br />サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
102
-
103
- </p>
141
+ <br />
104
-
142
+
105
- </div>
143
+ </div>
106
-
144
+
107
- </div>
145
+ </div>
108
-
146
+
109
- </div>
147
+ </div>
110
-
111
-
112
-
113
- <div class="container2">
148
+
114
-
115
- <div class="content">
116
-
117
- <h4>サンプル</h4>
118
-
119
- サンプル
120
-
121
- </div>
149
+ </div>
122
-
150
+
123
- </div>
151
+ </div>
124
-
125
-
126
-
127
- <div class="container">
128
-
129
- <div class="about">
130
-
131
- <div class="content">
132
-
133
- <h4>サンプル</h4>
134
-
135
- <p class="text">サンプル</p>
136
-
137
- <br />
138
-
139
- </div>
140
-
141
- </div>
142
-
143
- </div>
144
-
145
- </div>
146
152
 
147
153
  </body>
148
154
 
149
155
 
150
156
 
157
+ </html>
158
+
159
+
160
+
161
+
162
+
151
163
  ```
152
164
 
153
165
  ```CSS
154
166
 
167
+ .wrapper{
168
+
169
+ max-width: 1200px;
170
+
171
+ }
172
+
173
+
174
+
175
+ .ko {
176
+
177
+ margin-top: 3rem;
178
+
179
+ margin-left: 5rem;
180
+
181
+ width: calc(100vw - 50px); /*ビューの100% - 50px（左側のマージン）*/
182
+
183
+ background-color: white;
184
+
185
+ box-shadow: 0 0 1px #000000;
186
+
187
+ height: 200px;
188
+
189
+ }
190
+
191
+ .ko-left {
192
+
193
+ display: block;
194
+
195
+ margin-top: 3rem;
196
+
197
+ width: 70%;
198
+
199
+ background-color: white;
200
+
201
+ box-shadow: 0 0 1px #000000;
202
+
203
+ height: 200px;
204
+
205
+ }
206
+
207
+
208
+
155
209
  .content {
156
210
 
157
211
  padding: 2rem;
158
212
 
159
213
  }
160
214
 
161
- .about {
162
-
163
- margin-top: 3rem;
164
-
165
- margin-left: 5rem;
166
-
167
- width: calc(100vw - 50px); /*ビューの100% - 50px（左側のマージン）*/
168
-
169
- background-color: white;
170
-
171
- box-shadow: 0 0 1px #000000;
172
-
173
- height: 200px;
174
-
175
- }
176
-
177
- .container2 {
178
-
179
- display: block;
180
-
181
- margin-top: 3rem;
182
-
183
- width: 100%;
184
-
185
- background-color: white;
186
-
187
- box-shadow: 0 0 1px #000000;
188
-
189
- height: 200px;
190
-
191
- }
192
-
193
-
194
-
195
- .container {
196
-
197
- width: 100%;
198
-
199
- }
200
-
201
- .wrapper {
202
-
203
- max-width: 100%;
204
-
205
- position: relative;
206
-
207
- padding-top: 60px;
208
-
209
- padding-bottom: 200px;
210
-
211
- }
212
-
213
215
  ```
214
216
 
215
217
 
216
218
 
217
219
  ### 補足情報
218
220
 
219
- ブラウザはChromeを使用していて、上記HTML/CSSは簡易的なものですが、
220
-
221
- 本番環境ではBootStrap4を使っています。
221
+ ブラウザはChrome使用です。
222
222
 
223
223
 
224
224