質問編集履歴

1

コードの修正

2020/10/29 09:56

投稿

hta
hta

スコア1

test CHANGED
File without changes
test CHANGED
@@ -2,20 +2,42 @@
2
2
 
3
3
  コード
4
4
 
5
- <header>
5
+ <!doctype html>
6
+
7
+ <html lang="ja">
8
+
9
+ <head>
10
+
11
+ <!-- Required meta tags -->
12
+
13
+ <meta charset="utf-8">
14
+
15
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
16
+
17
+ <!-- Fontawesome -->
18
+
19
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
20
+
21
+ <!-- Bootstrap CSS -->
22
+
23
+ <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">
24
+
25
+ <link rel="stylesheet" href="style.css">
26
+
27
+ <title>Hello, world!</title>
28
+
29
+ </head>
30
+
31
+
32
+
33
+ <body>
34
+
35
+ <header>
6
36
 
7
37
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
8
38
 
9
39
  <a href="#" class="navbar-brand">AFS-1000</a>
10
40
 
11
- <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
12
-
13
- <span class="navbar-toggler-icon"></span>
14
-
15
- </button> -->
16
-
17
-
18
-
19
41
  <div class="collapse navbar-collapse" id="navbarResponsive">
20
42
 
21
43
  <ul class="navbar-nav ml-auto">
@@ -42,6 +64,8 @@
42
64
 
43
65
  <!-- End Navigation-->
44
66
 
67
+ <!-- Landing page -->
68
+
45
69
  <main>
46
70
 
47
71
  <div class="main-img">
@@ -56,16 +80,374 @@
56
80
 
57
81
  </main>
58
82
 
83
+ <!-- End Landing page -->
84
+
85
+ <div class="panel-heading">
86
+
87
+ <h4 class="panel-title bg-primary text-white">検査に関して
88
+
89
+ </h4>
90
+
91
+ </div>
92
+
93
+ <div class="accordion" id="accordion-4">
94
+
95
+ <div class="card">
96
+
97
+ <div class="card-header" id="header-4a">
98
+
99
+ <button class="btn btn-link" type="button"
100
+
101
+ data-toggle="collapse" data-target="#card-4a"
102
+
103
+ aria-expanded="true" aria-controls="card-4a">
104
+
105
+ <p><span>Q.</span>検査結果が出るまでの所要時間「8分」は適正なのでしょうか?<span>+</span></p>
106
+
107
+ </button>
108
+
109
+ </div>
110
+
111
+ <div id="card-4a" class="collapse"
112
+
113
+ aria-labelledby="header-4a" data-parent="#accordion-4">
114
+
115
+ <div class="card-body">
116
+
117
+ <p><span>A.</span>Covid-19の検査結果に関する国際基準が設定されていないため、それぞれのメーカーが研究を重ね、的確な結果が出るように機器を設計しています。本機器については手順通りの時間(8分)で測ることをお勧めします。</p>
118
+
119
+ </div>
120
+
121
+ </div>
122
+
123
+ </div>
124
+
125
+ <div class="card">
126
+
127
+ <div class="card-header" id="header-4b">
128
+
129
+ <button class="btn btn-link" type="button"
130
+
131
+ data-toggle="collapse" data-target="#card-4b"
132
+
133
+ aria-expanded="false" aria-controls="card-4b">
134
+
135
+ <p><span>Q.</span>IgM,IgGの基準の単位T/Cとはなんでしょうか?<span>+</span></p>
136
+
137
+ </button>
138
+
139
+ </div>
140
+
141
+ <div id="card-4b" class="collapse"
142
+
143
+ aria-labelledby="header-4b" data-parent="#accordion-4">
144
+
145
+ <div class="card-body">
146
+
147
+ <p><span>A.</span>Target/Control. Tは感染、Cは非感染の免疫グロブリンを表します。</p>
148
+
149
+ </div>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
155
+ <div class="card">
156
+
157
+ <div class="card-header" id="header-4c">
158
+
159
+ <button class="btn btn-link" type="button"
160
+
161
+ data-toggle="collapse" data-target="#card-4c"
162
+
163
+ aria-expanded="false" aria-controls="card-4c">
164
+
165
+ <p><span>Q.</span>蛍光抗体検査機器の精度はどのくらいでしょうか?<span>+</span></p>
166
+
167
+ </button>
168
+
169
+ </div>
170
+
171
+ <div id="card-4c" class="collapse"
172
+
173
+ aria-labelledby="header-4c" data-parent="#accordion-4">
174
+
175
+ <div class="card-body">
176
+
177
+ <p><span>A.</span>95%以上の精度となっています。</p>
178
+
179
+ </div>
180
+
181
+ </div>
182
+
183
+ </div>
184
+
185
+ <div class="card">
186
+
187
+ <div class="card-header" id="header-4d">
188
+
189
+ <button class="btn btn-link" type="button"
190
+
191
+ data-toggle="collapse" data-target="#card-4d"
192
+
193
+ aria-expanded="false" aria-controls="card-4d">
194
+
195
+ <p><span>Q.</span>基準値(カットオフ)について、イタリアとその他の国がなぜ違うのでしょうか?<span>+</span></p>
196
+
197
+ </button>
198
+
199
+ </div>
200
+
201
+ <div id="card-4d" class="collapse"
202
+
203
+ aria-labelledby="header-4d" data-parent="#accordion-4">
204
+
205
+ <div class="card-body">
206
+
207
+ <p><span>A.</span>コロナに対するIgG IgM の世界的な基準となるカットオフは定められておりません。イタリアは自国民とコロナウィルスの関連性に関して研究が進んでおり、イタリアに住んでいる民族に対して的確と考えうる基準値が決められています。</p>
208
+
209
+ </div>
210
+
211
+ </div>
212
+
213
+ </div>
214
+
215
+ </div>
216
+
217
+ <div class="panel-heading">
218
+
219
+ <h4 class="panel-title bg-primary text-white">検査に関して
220
+
221
+ </h4>
222
+
223
+ </div>
224
+
225
+
226
+
227
+ <div class="accordion" id="collapse-accordion">
228
+
229
+ <div class="card mb-2">
230
+
231
+ <div class="card-header" id="headingOne">
232
+
233
+ <h5 class="mb-0">
234
+
235
+ <button class="btn btn-link btn-block text-center" type="button" data-toggle="collapse" data-target="#collapse-accordion-1">
236
+
237
+ <p><span>Q.</span>IgM値が0.00となるのはなぜでしょうか?<span>+</span></p>
238
+
239
+ </button>
240
+
241
+ </h5>
242
+
243
+ </div>
244
+
245
+ <div id="collapse-accordion-1" class="collapse" data-parent="#collapse-accordion">
246
+
247
+ <div class="card-body">
248
+
249
+ <p><span>A.</span>その時点でIgMが確認できない程小さな値だった際に0.00を示します。</p>
250
+
251
+ </div>
252
+
253
+ </div>
254
+
255
+ </div>
256
+
257
+ <div class="card mb-2">
258
+
259
+ <div class="card-header" id="headingOne">
260
+
261
+ <h5 class="mb-0">
262
+
263
+ <button class="btn btn-link btn-block text-center" type="button" data-toggle="collapse" data-target="#collapse-accordion-2">
264
+
265
+ <p><span>Q.</span>基準値(IgM:1.3、IgG:1.2)を少し超えた場合のどのような対応をすればよいでしょうか?<span>+</span></p>
266
+
267
+ </button>
268
+
269
+ </h5>
270
+
271
+ </div>
272
+
273
+ <div id="collapse-accordion-2" class="collapse" data-parent="#collapse-accordion">
274
+
275
+ <div class="card-body">
276
+
277
+ <p><span>A.</span>カットオフ値を若干上回った陽性という結果となるため、再テストをお勧めいたします。</p>
278
+
279
+ </div>
280
+
281
+ </div>
282
+
283
+ </div>
284
+
285
+ </div>
286
+
287
+ <footer>
288
+
289
+ <div class="contact">
290
+
291
+ <h5 class="text-center">ご不明点がございましたら
292
+
293
+ メールにてお問合せください。</h5>
294
+
295
+ </div>
296
+
297
+ <div class="contact contact-btn text-center">
298
+
299
+ <a href="#" class="btn btn-danger">お問合せ</a>
300
+
301
+ </div>
302
+
303
+ </footer>
304
+
305
+
306
+
307
+ <!-- Optional JavaScript -->
308
+
309
+ <!-- jQuery first, then Popper.js, then Bootstrap JS -->
310
+
311
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
312
+
313
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
314
+
315
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
316
+
317
+ </body>
318
+
319
+ </html>
320
+
321
+ <body>
322
+
323
+
324
+
59
325
  ```CSS
60
326
 
61
327
  コード
62
328
 
63
- ```.main-img{
329
+ ```body {
64
-
330
+
65
- background-image: url("img/bg-2.jpg");
331
+ font-family: 'Lato', sans-serif;
332
+
66
-
333
+ color: #505962;
334
+
67
- }
335
+ }
336
+
68
-
337
+ /* navbar */
338
+
339
+ .navbar {
340
+
341
+ text-transform: uppercase;
342
+
343
+ font-weight: 700;
344
+
345
+ font-size: 0.9rem;
346
+
347
+ letter-spacing: .1rem;
348
+
349
+ background: rgba(0,0,0,1)
350
+
351
+ }
352
+
353
+ .navbar-nav li {
354
+
355
+ padding-right: 0.7rem;
356
+
357
+ }
358
+
359
+ .navbar-dark .navbar-nav .nav-link {
360
+
361
+ color: #fff;
362
+
363
+ padding-top: 0.8rem;
364
+
365
+ }
366
+
367
+ .navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link:hover{
368
+
369
+ color: #1ebba3;
370
+
371
+ }
372
+
373
+ /* main */
374
+
375
+ main{
376
+
377
+ width: 100%;
378
+
379
+ height: 400px;
380
+
381
+ }
382
+
383
+ /* panel */
384
+
385
+ .panel-title{
386
+
387
+ padding-left: 20px;
388
+
389
+ padding: 10px;
390
+
391
+ }
392
+
393
+ .panel-heading{
394
+
395
+ margin-top: 30px;
396
+
397
+ }
398
+
399
+ /* card */
400
+
401
+ .card{
402
+
403
+ text-align: center;
404
+
405
+ }
406
+
407
+ .accordion{
408
+
409
+ margin-top: 20px;
410
+
411
+ }
412
+
413
+ .card-header p{
414
+
415
+ color: #505962;
416
+
417
+ }
418
+
419
+ .card-header span{
420
+
421
+ color: rgb(16, 78, 211);
422
+
423
+ margin: 0 20px;
424
+
425
+ }
426
+
427
+ .card-body span{
428
+
429
+ color: rgb(219, 43, 79);
430
+
431
+ margin: 0 20px;
432
+
433
+ }
434
+
435
+ /* contact */
436
+
437
+ .contact{
438
+
439
+ margin-top: 40px;
440
+
441
+ }
442
+
443
+ .contact-btn{
444
+
445
+ margin-bottom: 100px;
446
+
447
+ }
448
+
449
+ 以前質問して修正したものです。
450
+
69
- コード実行しようとするheader埋もれてmainが表示されません
451
+ htmlファイル画像を表示させようとすると画面収まらないサイズで表示されま
70
-
452
+
71
- 分かりづらかったら申訳なのでが、mainの背景画像とタイトルを表示させるにはどうすればよいでしょうか?
453
+ よろくお願しま