質問編集履歴

1

ご指摘ありがとうございます。HTMLとCSSの全文を載せました。また、プロジェクトの構造については、全てのフォルダーを開いた状態でキャプチャしたものを貼り付けております。

2019/08/14 06:06

投稿

merukapu
merukapu

スコア3

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,8 @@
1
+ ```
2
+
3
+ コード
4
+
1
- ### 前提・実現したいこと
5
+ ```### 前提・実現したいこと
2
6
 
3
7
  cssで背景画像を設置したいです。あと、Boostrapを使用しています。
4
8
 
@@ -24,7 +28,71 @@
24
28
 
25
29
  ```html
26
30
 
27
- <main>
31
+ <!doctype html>
32
+
33
+ <html lang="ja">
34
+
35
+ <head>
36
+
37
+ <!-- Required meta tags -->
38
+
39
+ <meta charset="utf-8">
40
+
41
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
42
+
43
+
44
+
45
+ <!-- Bootstrap CSS -->
46
+
47
+ <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">
48
+
49
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
50
+
51
+ <link rel="stylesheet" href="css/styles.css">
52
+
53
+ <title>現地の人から借りる家、体験&スポット - Airbnb</title>
54
+
55
+ </head>
56
+
57
+ <body>
58
+
59
+ <header class="px-1 ">
60
+
61
+ <section class="menu">
62
+
63
+ <div class="logo" >
64
+
65
+ <img src="img/logo.png" width="34" height="34" alt="Airbnbのロゴ">
66
+
67
+ </div>
68
+
69
+ <div class="harrow">
70
+
71
+ <i class="fas fa-angle-down"></i>
72
+
73
+ </div>
74
+
75
+ </section>
76
+
77
+ <section class="header-right">
78
+
79
+ <div class="input-group mb-3">
80
+
81
+ <div class="input-group-prepend srch">
82
+
83
+ <span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
84
+
85
+ </div>
86
+
87
+ <input type="text" class="form-control" placeholder="探す" aria-label="Username" aria-describedby="basic-addon1">
88
+
89
+ </div>
90
+
91
+ </section>
92
+
93
+ </header>
94
+
95
+ <main>
28
96
 
29
97
  <div class="mainto">
30
98
 
@@ -48,18 +116,124 @@
48
116
 
49
117
  </main>
50
118
 
51
-
52
-
53
- ーーーーここからmaintoクラスのcssです。ーーーーーー
119
+ <!-- Optional JavaScript -->
120
+
121
+ <!-- jQuery first, then Popper.js, then Bootstrap JS -->
122
+
123
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
124
+
125
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
126
+
127
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
128
+
129
+ </body>
130
+
131
+ </html>
132
+
133
+
134
+
135
+ ```
136
+
137
+
138
+
139
+ ```css
140
+
141
+ body{
142
+
143
+ font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
144
+
145
+ font-size:14px;
146
+
147
+ color:#484848;
148
+
149
+ line-height:1.43;
150
+
151
+ }
152
+
153
+ /* header */
154
+
155
+ header{
156
+
157
+ display:flex;
158
+
159
+ }
160
+
161
+ .menu{
162
+
163
+ width:100px;
164
+
165
+ height:64px !important;
166
+
167
+ padding:15px 22px;
168
+
169
+
170
+
171
+ }
172
+
173
+ .logo{
174
+
175
+ position:relative;
176
+
177
+ }
178
+
179
+ .harrow{
180
+
181
+ position:absolute;
182
+
183
+ top:20px;
184
+
185
+ left:68px
186
+
187
+ }
188
+
189
+ .header-right{
190
+
191
+ margin-top:12px;
192
+
193
+ flex-grow: 3;
194
+
195
+ }
196
+
197
+ .input-group{
198
+
199
+ box-shadow:rgba(220, 220, 220, 1) 0px 2px 4px !important;
200
+
201
+ margin-bottom:12px;
202
+
203
+ height:48px;
204
+
205
+ width:100%;
206
+
207
+ }
208
+
209
+ .input-group-text{
210
+
211
+ background:#fff;
212
+
213
+ }
214
+
215
+ .form-control{
216
+
217
+ height:48px;
218
+
219
+ }
220
+
221
+
222
+
223
+ /* main */
54
224
 
55
225
  .mainto{
56
226
 
227
+ height:500px;
228
+
57
229
  background:url(img/picture1.png);
58
230
 
59
231
  background-size:cover;
60
232
 
61
233
  }
62
234
 
235
+
236
+
63
237
  ```
64
238
 
65
239
 
@@ -73,3 +247,5 @@
73
247
 
74
248
 
75
249
  ### 補足情報(FW/ツールのバージョン)
250
+
251
+ ![イメージ説明](a35fcf3fea16111ab39cf262a8dc2e17.png)