teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

6

コード、画像の更新

2020/05/06 22:56

投稿

writegrint
writegrint

スコア22

title CHANGED
File without changes
body CHANGED
@@ -1,30 +1,37 @@
1
+ サイトの模写をしているのですが、
1
- htmlでクラスを指定して、CSSでurlを書いたのに画像が表示されません。なぜでしょうか。コード載せます。
2
+ bootstrap, htmlでクラスを指定して、CSSでurlを書いたのに画像が表示されません。なぜでしょうか。コード載せます。
2
3
  ```ここに言語を入力
4
+ <!DOCTYPE html>
5
+ <html lang="ja">
6
+ <head>
7
+ <meta charset="utf-8">
8
+ <title>Bootstrapの練習</title>
9
+ <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <link rel="stylesheet" href="css/bootstrap.css">
11
+ <link rel="stylesheet" href="css/Bootstrap-practice.css">
12
+ <script type="text/javascript" src="js/jquery-3.5.0.min.js"></script>
13
+ <script type="text/javascript" src="js/bootstrap.js"></script>
14
+ <link href="https://fonts.googleapis.com/css2?family=Jost&family=Montserrat&display=swap" rel="stylesheet">
15
+
16
+ </head>
17
+ <body>
18
+ <h1></h1>
19
+ <button type="button" class="btn btn-default">概要</button>
20
+ <button type="button" class="btn btn-default">準備</button>
21
+ <button type="button" class="btn btn-default">安全</button>
22
+ <button type="button" class="btn btn-default">マネープラン</button>
3
- <div class="background-image">
23
+ <div class="text-right pr-5">
4
-
24
+ <button type="submit" class="btn btn-danger">はじめる</button>
5
25
  </div>
6
- ```
7
- ```ここに言語を入力
8
- .background-image{
9
- background-image:url(airbnb.png);
26
+ <div class="background-image">
10
- }
11
- ```
12
- ![イメージ説明](6c2123993e5af7242019efa970b27ea4.png)
13
- ![イメージ説明](b4fb4b643f10e6830d42f494090f28b8.png)
14
- 写真の通り、画像は同じ階層に保存してます。
15
27
 
16
- 一方の画像は表示できたのですが、もう一方の写真は表示できません。なぜなのでしょうか・・・?(backgroundの方はできて、新たに追加したbackground1の方は表示できません・・・)もちろん写真は同じ階層にあります
17
- ```
18
- ここに言語を入力
19
- <div class="background-image">
20
-
21
28
  <div class="row justify-content-end">
22
29
  <div class="border col-5">
23
30
  <br>
24
- <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ<h1>
31
+ <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1>
25
32
  <h2 class="size1"><b>宿泊施設の内容を記入</b></h2>
26
33
  <br>
27
- <div class="row">
34
+ <div class="row clear_form">
28
35
  <div class="col-md">
29
36
  <form>
30
37
  <div class="form-group">
@@ -53,19 +60,17 @@
53
60
  <option>ゲスト15人</option>
54
61
  <option>ゲスト16人</option>
55
62
  </select>
56
- <button type="submit" class="btn btn-danger">はじめる</button>
57
- </div>
63
+ </div>
64
+ <button type="submit" class="btn btn-danger ">はじめる</button>
58
65
  </form>
59
66
  </div>
60
67
  </div>
61
68
  </div>
62
69
  </div>
63
70
  </div>
64
-
65
-
66
71
  </div>
67
72
 
68
- <div class="flex_div">
73
+ <div class="flex1_div">
69
74
  <div class="first_div">
70
75
  <h2 style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2>
71
76
  <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
@@ -78,7 +83,7 @@
78
83
 
79
84
 
80
85
  <h2 style="text-align:center" class="px"><b>3ステップでホスティング</b></h2>
81
- <div class="flex_div">
86
+ <div class="flex1_div">
82
87
  <div class="third_div">
83
88
  <h3><b>無料でお部屋を掲載</b></h3>
84
89
  <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
@@ -94,24 +99,73 @@
94
99
  <button type="button" class="btn btn-link mt-1">ホストを始める方法をチェック</button>
95
100
  </div>
96
101
  </div>
97
- <div>
102
+ <div><p class="px3">“</p>
98
- <h2 style="text-align:left"class="px1" >
103
+ <h2 style="text-align:left" class="px1" >
99
104
  「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2>
100
105
  <p style="text-align:left" class="px1">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>
101
106
  <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button>
102
107
  </div>
103
108
  <div class="background-image1">
104
109
  </div>
105
- コード
110
+ <h2 style="text-align: center"class="px"><b>万一の時も安心です</b></h2>
111
+ <div class="flex_div">
112
+ <div class="f6_div">
113
+
114
+ <p class="px4">大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
115
+ <button type="button" class="btn btn-link mt-1 px2">ホストを守るAirbnbの仕組みをチェック</button>
116
+ </div>
117
+ <div class="f7_div">
118
+ <ul>
119
+ <li>予約前に政府発行の身分証明書を求める権限</li>
120
+ <li>ハウスルールに同意しないと泊まれない</li>
121
+ <li>過去の宿泊のレビューもばっちり読める</li>
122
+ <li>財物損害は¥100,000,000まで無料で補償</li>
123
+ <li>$1,000,000の賠償責任保険が無料で付帯</li>
124
+ <li>24時間365日対応グローバルカスタマーサポート</li>
125
+
126
+ </ul>
127
+
128
+
129
+ </div>
130
+
131
+
132
+ </div>
133
+
134
+
135
+ </div>
136
+ <div class="background-image2">
137
+ </div>
138
+
139
+ </body>
140
+ </html>
141
+
106
142
  ```
143
+
144
+
107
- ```
145
+ ```ここに言語を入力
146
+ .px {
147
+ font-size: 320%;
148
+ padding-top: 8%;
149
+ padding-bottom: 5%;
150
+ }
151
+ .size1{
152
+ font-size: 100%;
153
+ }
154
+ .size2{
155
+ font-size: 170%;
156
+
157
+ }
158
+ .size3{
159
+ font-size: 170%;
160
+ }
108
161
  .background-image{
109
- background-image:url(../airbnb.png);
162
+ background-image: url(../airbnb.png);
110
163
  background-repeat: no-repeat;
111
164
  background-position: center center;
165
+ background-size: cover;
112
- padding-bottom: 20%;
166
+ padding-bottom:33%
113
167
  }
114
- .flex_div {
168
+ .flex1_div {
115
169
  display: flex;
116
170
  justify-content: center;
117
171
  }
@@ -146,16 +200,119 @@
146
200
  margin: 0 10px 0 0;
147
201
  }
148
202
  .px1{
149
- width: 35%;
203
+ width: 32%;
150
204
  padding-left: 10%;
151
205
  }
206
+ .px2{
207
+ padding-left: 10%;
208
+ }
152
209
  .background-image1{
153
210
  background-image:url(../airbnb3.png);
211
+ height:80%;
154
212
  }
213
+ .form-control{
214
+ text-align: left
215
+ }
216
+ .form-group{
217
+ width: 100%;
218
+ }
219
+ .clear_form:after{
220
+ content: "";
221
+ display: block;
222
+ clear: both;
223
+ }
224
+ .px3{
225
+ font-size: 500%;
226
+ color:orange;
227
+ padding-left: 10%;
228
+ }
229
+ ul {
230
+ background: white;
231
+ padding: 0 0.5em;
232
+ position: relative;
233
+ }
155
234
 
156
- こに言語を入力
235
+ ul li {
236
+ line-height: 1.5;
237
+ padding: 0.5em 0 0.5em 1.5em;
238
+ border-bottom: 2px solid white;
239
+ list-style-type: none!important;
240
+ }
241
+
242
+ ul li:before {
243
+ font-family: "Font Awesome 5 Free";
244
+ content: "\f00c";/*アイコン種類*/
245
+ position: absolute;
246
+ left : 1.0em; /*左端からのアイコンまで*/
247
+ color: #668ad8; /*アイコン色*/
248
+ }
249
+
250
+ ul li:last-of-type {
251
+ border-bottom: none;/*最後の線だけ消す*/
252
+ }
253
+
254
+ .f6_div{
255
+ /* display: inline-block;*/
256
+ width: 45%;
257
+ padding:0.3%;
258
+ margin: 0 10px 0 0;
259
+ }
260
+ .f7_div{
261
+ /*display: inline-block;*/
262
+ width: 30%;
263
+ padding:0.3%;
264
+ margin: 0 10px 0 0;
265
+ }
157
266
 
267
+ /*.px4{
268
+ width: 34%;
269
+ padding-left: 10%;
270
+ }*/
271
+
158
- コード
272
+ h2.px{
273
+ text-align: center;
274
+ }
275
+ .flex_div{
276
+ max-width: 1000px;
277
+ margin: 0 auto;
278
+ display: flex;
279
+ justify-content: space-evenly;
280
+ }
281
+ .background-image2{
282
+ background-image:url(../airbnb6.png);
283
+ height: 80%;
284
+ }
285
+ .f8_div{
286
+ display: inline-block;
287
+ width: 16%;
288
+ padding:0.3%;
289
+ margin: 0 10px 0 0;
290
+ }
291
+ .f9_div{
292
+ display: inline-block;
293
+ width: 25%;
294
+ padding:0.3%;
295
+ margin: 0 10px 0 0;
296
+ }
297
+ .f10_div{
298
+ display: inline-block;
299
+ width: 22%;
300
+ padding:0.3%;
301
+ margin: 0 10px 0 0;
302
+ }
303
+ .font1{
304
+ font-family: 'Jost', sans-serif;
305
+ font-family: 'Montserrat', sans-serif;
306
+ font-size: 300%;
307
+ }
159
308
  ```
309
+
310
+ ![イメージ説明](eaa2c3da35f0b0c759e95f1c7d7e5fb7.png)
311
+ ![イメージ説明](41ec67bb37fafc43b157ee0b25460e47.png)
312
+ ![イメージ説明](d4592832f7fbb8e4e74f7babd1f68aae.png)
313
+ ![イメージ説明](7d39293fd833daa2af47dc7814b15817.png)
314
+ ![イメージ説明](f24f57598b8bd9c4b42f9b8810f19990.png)
315
+ ![イメージ説明](3014fea011e3b84ae4b5abe3f5a0bdd7.png)
316
+ ![イメージ説明](a710c0571a00b14935ded6097764547a.png)
160
317
  追記:読み込み権限の画像の追記しました。
161
318
  ![イメージ説明](31796c87cdb54cfd8f8b15eedea52c34.png)

5

画像の追加

2020/05/06 22:56

投稿

writegrint
writegrint

スコア22

title CHANGED
File without changes
body CHANGED
@@ -156,4 +156,6 @@
156
156
  こに言語を入力
157
157
 
158
158
  コード
159
- ```
159
+ ```
160
+ 追記:読み込み権限の画像の追記しました。
161
+ ![イメージ説明](31796c87cdb54cfd8f8b15eedea52c34.png)

4

CSSのコード変更

2020/05/06 20:39

投稿

writegrint
writegrint

スコア22

title CHANGED
File without changes
body CHANGED
@@ -104,7 +104,8 @@
104
104
  </div>
105
105
  コード
106
106
  ```
107
+ ```
107
- ```こ.background-image{
108
+ .background-image{
108
109
  background-image:url(../airbnb.png);
109
110
  background-repeat: no-repeat;
110
111
  background-position: center center;

3

文章の追加

2020/05/02 04:36

投稿

writegrint
writegrint

スコア22

title CHANGED
File without changes
body CHANGED
@@ -13,7 +13,7 @@
13
13
  ![イメージ説明](b4fb4b643f10e6830d42f494090f28b8.png)
14
14
  写真の通り、画像は同じ階層に保存してます。
15
15
 
16
- 一方の画像は表示できたのですが、もう一方の写真は表示できません。なぜなのでしょうか・・・?(backgroundの方はできて、新たに追加したbackground1の方は表示できません・・・)
16
+ 一方の画像は表示できたのですが、もう一方の写真は表示できません。なぜなのでしょうか・・・?(backgroundの方はできて、新たに追加したbackground1の方は表示できません・・・)もちろん写真は同じ階層にあります
17
17
  ```
18
18
  ここに言語を入力
19
19
  <div class="background-image">

2

新たな背景画像のコードの追加

2020/05/01 18:45

投稿

writegrint
writegrint

スコア22

title CHANGED
File without changes
body CHANGED
@@ -11,4 +11,148 @@
11
11
  ```
12
12
  ![イメージ説明](6c2123993e5af7242019efa970b27ea4.png)
13
13
  ![イメージ説明](b4fb4b643f10e6830d42f494090f28b8.png)
14
- 写真の通り、画像は同じ階層に保存してます。
14
+ 写真の通り、画像は同じ階層に保存してます。
15
+
16
+ 一方の画像は表示できたのですが、もう一方の写真は表示できません。なぜなのでしょうか・・・?(backgroundの方はできて、新たに追加したbackground1の方は表示できません・・・)
17
+ ```
18
+ ここに言語を入力
19
+ <div class="background-image">
20
+
21
+ <div class="row justify-content-end">
22
+ <div class="border col-5">
23
+ <br>
24
+ <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ<h1>
25
+ <h2 class="size1"><b>宿泊施設の内容を記入</b></h2>
26
+ <br>
27
+ <div class="row">
28
+ <div class="col-md">
29
+ <form>
30
+ <div class="form-group">
31
+ <input type="text" class="form-control">
32
+ <div class="d-flex">
33
+ <select class="form-control w-50">
34
+ <option>まるまる貸切</option>
35
+ <option>個室</option>
36
+ <option>シェアルーム</option>
37
+ </select>
38
+ <select class="form-control w-50">
39
+ <option>ゲスト1人</option>
40
+ <option>ゲスト2人</option>
41
+ <option>ゲスト3人</option>
42
+ <option>ゲスト4人</option>
43
+ <option>ゲスト5人</option>
44
+ <option>ゲスト6人</option>
45
+ <option>ゲスト7人</option>
46
+ <option>ゲスト8人</option>
47
+ <option>ゲスト9人</option>
48
+ <option>ゲスト10人</option>
49
+ <option>ゲスト11人</option>
50
+ <option>ゲスト12人</option>
51
+ <option>ゲスト13人</option>
52
+ <option>ゲスト14人</option>
53
+ <option>ゲスト15人</option>
54
+ <option>ゲスト16人</option>
55
+ </select>
56
+ <button type="submit" class="btn btn-danger">はじめる</button>
57
+ </div>
58
+ </form>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </div>
64
+
65
+
66
+ </div>
67
+
68
+ <div class="flex_div">
69
+ <div class="first_div">
70
+ <h2 style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2>
71
+ <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
72
+ </div>
73
+ <div class="second_div">
74
+ <h2 style="text-align:center" class="size3"><b>困った時も安心</b></h2>
75
+ <p style="text-align:center">万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
76
+ </div>
77
+ </div>
78
+
79
+
80
+ <h2 style="text-align:center" class="px"><b>3ステップでホスティング</b></h2>
81
+ <div class="flex_div">
82
+ <div class="third_div">
83
+ <h3><b>無料でお部屋を掲載</b></h3>
84
+ <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
85
+ </div>
86
+ <div class="f4_div">
87
+ <h3><b>ホスティング方法を設定</b></h3>
88
+ <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。
89
+ </p>
90
+ </div>
91
+ <div class="f5_div">
92
+ <h3><b>はじめてのゲストが来ます!</b></h3>
93
+ <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
94
+ <button type="button" class="btn btn-link mt-1">ホストを始める方法をチェック</button>
95
+ </div>
96
+ </div>
97
+ <div>
98
+ <h2 style="text-align:left"class="px1" >“
99
+ 「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2>
100
+ <p style="text-align:left" class="px1">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>
101
+ <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button>
102
+ </div>
103
+ <div class="background-image1">
104
+ </div>
105
+ コード
106
+ ```
107
+ ```こ.background-image{
108
+ background-image:url(../airbnb.png);
109
+ background-repeat: no-repeat;
110
+ background-position: center center;
111
+ padding-bottom: 20%;
112
+ }
113
+ .flex_div {
114
+ display: flex;
115
+ justify-content: center;
116
+ }
117
+ .first_div {
118
+ display: inline-block;
119
+ width: 24%;
120
+ padding:0.3%;
121
+ margin: 0 10px 0 0;
122
+ }
123
+ .second_div {
124
+ display: inline-block;
125
+ width: 24%;
126
+ padding:0.3%;
127
+ margin: 0 10px 0 0;
128
+ }
129
+ .third_div{
130
+ display: inline-block;
131
+ width: 16%;
132
+ padding:0.3%;
133
+ margin: 0 10px 0 0;
134
+ }
135
+ .f4_div{
136
+ display: inline-block;
137
+ width: 16%;
138
+ padding:0.3%;
139
+ margin: 0 10px 0 0;
140
+ }
141
+ .f5_div{
142
+ display: inline-block;
143
+ width: 16%;
144
+ padding:0.3%;
145
+ margin: 0 10px 0 0;
146
+ }
147
+ .px1{
148
+ width: 35%;
149
+ padding-left: 10%;
150
+ }
151
+ .background-image1{
152
+ background-image:url(../airbnb3.png);
153
+ }
154
+
155
+ こに言語を入力
156
+
157
+ コード
158
+ ```

1

画像の追加

2020/05/01 18:44

投稿

writegrint
writegrint

スコア22

title CHANGED
File without changes
body CHANGED
@@ -8,4 +8,7 @@
8
8
  .background-image{
9
9
  background-image:url(airbnb.png);
10
10
  }
11
- ```
11
+ ```
12
+ ![イメージ説明](6c2123993e5af7242019efa970b27ea4.png)
13
+ ![イメージ説明](b4fb4b643f10e6830d42f494090f28b8.png)
14
+ 写真の通り、画像は同じ階層に保存してます。