質問編集履歴

2

CSSに変更しました。よろしくお願いいたします。

2020/06/19 06:38

投稿

yukitur
yukitur

スコア9

test CHANGED
File without changes
test CHANGED
@@ -12,8 +12,6 @@
12
12
 
13
13
  <title>Dental Clinic</title>
14
14
 
15
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
16
-
17
15
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
18
16
 
19
17
  <link rel="stylesheet" href="main.css">
@@ -234,32 +232,6 @@
234
232
 
235
233
  </div>
236
234
 
237
- <footer>
238
-
239
- <div class="container">
240
-
241
- <div class="footer-nav">
242
-
243
- <i class="far fa-circle"></i><a href="./index.html">トップページ</a>
244
-
245
- <i class="far fa-circle"></i><a href="./clinic.html">医院紹介</a>
246
-
247
- <i class="far fa-circle"></i><a id="return" href="./service.html">診療案内</a>
248
-
249
- <i class="far fa-circle"></i><a href="./staff.html">院長・スタッフ紹介</a>
250
-
251
- <i class="far fa-circle"></i><a href="./access.html">アクセス</a>
252
-
253
- </div>
254
-
255
- <p class="tel"><span class="name">デンタル クリニック</span> 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</p>
256
-
257
- <p class="copyright">Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p>
258
-
259
- </div>
260
-
261
- </footer>
262
-
263
235
  </body>
264
236
 
265
237
  </html>
@@ -272,7 +244,7 @@
272
244
 
273
245
  body {
274
246
 
275
- background-color: rgb(241, 240, 240);
247
+ background-color: #f1f0f0;
276
248
 
277
249
  border-top: 8px solid #71C9C7;
278
250
 
@@ -282,6 +254,32 @@
282
254
 
283
255
 
284
256
 
257
+ * {
258
+
259
+ -webkit-box-sizing: border-box;
260
+
261
+ box-sizing: border-box;
262
+
263
+ }
264
+
265
+
266
+
267
+ header {
268
+
269
+ margin: 0 auto;
270
+
271
+ width: 920px;
272
+
273
+ display: -webkit-box;
274
+
275
+ display: -ms-flexbox;
276
+
277
+ display: flex;
278
+
279
+ }
280
+
281
+
282
+
285
283
  .container {
286
284
 
287
285
  padding: 0;
@@ -292,19 +290,163 @@
292
290
 
293
291
 
294
292
 
293
+ .header-left {
294
+
295
+ padding-top: 60px;
296
+
297
+ float: left;
298
+
299
+ }
300
+
301
+
302
+
303
+ .header-right {
304
+
305
+ padding-top: 40px;
306
+
307
+ float: right;
308
+
309
+ }
310
+
311
+
312
+
313
+ .header-right p {
314
+
315
+ font-size: 10px;
316
+
317
+ }
318
+
319
+
320
+
321
+ .fa-phone {
322
+
323
+ font-size: 20px;
324
+
325
+ padding-right: 8px;
326
+
327
+ }
328
+
329
+
330
+
331
+ .reception-time {
332
+
333
+ border: 1px solid gray;
334
+
335
+ text-align: center;
336
+
337
+ padding: 5px;
338
+
339
+ }
340
+
341
+
342
+
343
+ .red {
344
+
345
+ color: red;
346
+
347
+ }
348
+
349
+
350
+
351
+ .nav {
352
+
353
+ clear: both;
354
+
355
+ border-radius: 0.5em;
356
+
357
+ font-weight: bold;
358
+
359
+ margin-bottom: 30px;
360
+
361
+ }
362
+
363
+
364
+
365
+ .nav a {
366
+
367
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
368
+
369
+ background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
370
+
371
+ border-left: 1px solid #99E1DF;
372
+
373
+ border-right: 1px solid #71C9C7;
374
+
375
+ padding: 15px 0;
376
+
377
+ text-align: center;
378
+
379
+ color: white;
380
+
381
+ text-decoration: none;
382
+
383
+ width: 20%;
384
+
385
+ line-height: 20px;
386
+
387
+ font-size: 14px;
388
+
389
+ }
390
+
391
+
392
+
393
+ .nav a:hover {
394
+
395
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc6c4), to(#9ce3e1));
396
+
397
+ background-image: linear-gradient(#6cc6c4 0%, #9ce3e1 100%);
398
+
399
+ opacity: 0.7;
400
+
401
+ }
402
+
403
+
404
+
405
+ .first {
406
+
407
+ border-top-left-radius: 0.5em;
408
+
409
+ border-bottom-left-radius: 0.5em;
410
+
411
+ }
412
+
413
+
414
+
415
+ .last {
416
+
417
+ border-top-right-radius: 0.5em;
418
+
419
+ border-bottom-right-radius: 0.5em;
420
+
421
+ }
422
+
423
+
424
+
425
+ .english {
426
+
427
+ font-size: 12px;
428
+
429
+ }
430
+
431
+
432
+
295
433
  .main-image {
296
434
 
297
435
  max-width: 100%;
298
436
 
299
437
  float: right;
300
438
 
439
+ }
440
+
441
+
442
+
301
- img {
443
+ .main-image img {
302
-
444
+
303
- float: right;
445
+ float: right;
304
-
446
+
305
- }
447
+ }
306
-
307
- }
448
+
449
+
308
450
 
309
451
  .main-wrapper {
310
452
 
@@ -316,18 +458,20 @@
316
458
 
317
459
  }
318
460
 
461
+
462
+
319
463
  .sideber {
320
464
 
321
465
  width: 260px;
322
466
 
323
467
  margin-right: 20px;
324
468
 
325
- float: left;
326
-
327
469
  position: relative;
328
470
 
329
471
  }
330
472
 
473
+
474
+
331
475
  .sideber-top {
332
476
 
333
477
  width: 100%;
@@ -344,49 +488,59 @@
344
488
 
345
489
  background-color: white;
346
490
 
491
+ }
492
+
493
+
494
+
347
- h6 {
495
+ .sideber-top h6 {
496
+
348
-
497
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
498
+
349
- background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
499
+ background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
350
-
500
+
351
- padding: 15px 15px;
501
+ padding: 15px 15px;
352
-
502
+
353
- font-weight: bold;
503
+ font-weight: bold;
354
-
504
+
355
- color: white;
505
+ color: white;
356
-
506
+
357
- border-top-left-radius: 0.4em;
507
+ border-top-left-radius: 0.4em;
358
-
508
+
359
- border-top-right-radius: 0.4em;
509
+ border-top-right-radius: 0.4em;
360
-
510
+
361
- }
511
+ }
362
-
512
+
513
+
514
+
363
- a {
515
+ .sideber-top a {
364
-
516
+
365
- display: block;
517
+ display: block;
366
-
518
+
367
- color: black;
519
+ color: black;
368
-
520
+
369
- text-decoration: none;
521
+ text-decoration: none;
370
-
522
+
371
- margin: 18px;
523
+ margin: 18px;
372
-
524
+
373
- font-size: 14px;
525
+ font-size: 14px;
374
-
526
+
375
- font-weight: bold;
527
+ font-weight: bold;
376
-
528
+
377
- border-bottom: 1px solid #71C9C7;
529
+ border-bottom: 1px solid #71C9C7;
378
-
530
+
379
- padding-bottom: 5px;
531
+ padding-bottom: 5px;
532
+
380
-
533
+ }
534
+
535
+
536
+
381
- &:hover {
537
+ .sideber-top a:hover {
382
-
538
+
383
- color: #71C9C7;
539
+ color: #71C9C7;
384
-
540
+
385
- }
541
+ }
386
-
387
- }
542
+
388
-
389
- }
543
+
390
544
 
391
545
  .fa-caret-down {
392
546
 
@@ -398,6 +552,8 @@
398
552
 
399
553
  }
400
554
 
555
+
556
+
401
557
  .sideber-buttom {
402
558
 
403
559
  width: 100%;
@@ -418,235 +574,165 @@
418
574
 
419
575
  background-color: white;
420
576
 
421
- h6 {
422
-
423
- background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
424
-
425
- padding: 15px 15px;
426
-
427
- font-weight: bold;
428
-
429
- color: white;
430
-
431
- border-top-left-radius: 0.4em;
432
-
433
- border-top-right-radius: 0.4em;
434
-
435
- }
436
-
437
- a {
438
-
439
- display: block;
440
-
441
- color: black;
442
-
443
- text-decoration: none;
444
-
445
- margin: 18px;
446
-
447
- font-size: 14px;
448
-
449
- font-weight: bold;
450
-
451
- border-bottom: 1px solid #71C9C7;
452
-
453
- padding-bottom: 5px;
454
-
455
- &:hover {
456
-
457
- color: violet;
458
-
459
- }
460
-
461
- }
462
-
463
- }
464
-
465
- .information {
466
-
467
- margin-top: 25px;
577
+ }
578
+
579
+
580
+
581
+ .sideber-buttom h6 {
582
+
583
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
584
+
585
+ background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
586
+
587
+ padding: 15px 15px;
588
+
589
+ font-weight: bold;
590
+
591
+ color: white;
592
+
593
+ border-top-left-radius: 0.4em;
594
+
595
+ border-top-right-radius: 0.4em;
596
+
597
+ }
598
+
599
+
600
+
601
+ .sideber-buttom a {
602
+
603
+ display: block;
604
+
605
+ color: black;
606
+
607
+ text-decoration: none;
608
+
609
+ margin: 18px;
610
+
611
+ font-size: 14px;
612
+
613
+ font-weight: bold;
614
+
615
+ border-bottom: 1px solid #71C9C7;
616
+
617
+ padding-bottom: 5px;
618
+
619
+ }
620
+
621
+
622
+
623
+ .sideber-buttom a:hover {
624
+
625
+ color: violet;
626
+
627
+ }
628
+
629
+
630
+
631
+ .date {
632
+
633
+ font-weight: bold;
634
+
635
+ padding-right: 30px;
636
+
637
+ white-space: nowrap;
638
+
639
+ }
640
+
641
+
642
+
643
+
644
+
645
+ .name {
646
+
647
+ font-weight: bold;
648
+
649
+ }
650
+
651
+
652
+
653
+ .inner {
654
+
655
+ margin: 0 20px;
656
+
657
+ }
658
+
659
+
660
+
661
+ .clinic {
662
+
663
+ width: 640px;
664
+
665
+ float: right;
666
+
667
+ background-color: white;
668
+
669
+ border: 2px solid #71C9C7;
670
+
671
+ border-radius: 0.5em;
672
+
673
+ -webkit-box-sizing: border-box;
674
+
675
+ box-sizing: border-box;
676
+
677
+ }
678
+
679
+
680
+
681
+ .clinic h5 {
682
+
683
+ font-weight: bold;
684
+
685
+ padding-top: 40px;
468
686
 
469
687
  padding-bottom: 30px;
470
688
 
689
+ padding-left: 20px;
690
+
691
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
692
+
693
+ background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
694
+
695
+ color: white;
696
+
697
+ border-top-left-radius: 0.3em;
698
+
699
+ border-top-right-radius: 0.3em;
700
+
701
+ }
702
+
703
+
704
+
705
+ .clinic h6 {
706
+
707
+ margin: 30px 0px;
708
+
709
+ padding-bottom: 15px;
710
+
711
+ font-weight: bold;
712
+
713
+ border-bottom: 3px solid #71C9C7;
714
+
715
+ }
716
+
717
+
718
+
719
+ .clinic p {
720
+
721
+ margin: 30px 10px;
722
+
471
723
  font-size: 13px;
472
724
 
473
- background-color: white;
474
-
475
- width: 640px;
476
-
477
- float: right;
478
-
479
- h6 {
480
-
481
- margin: 20px;
482
-
483
- padding-bottom: 10px;
484
-
485
- padding-left: 10px;
486
-
487
- font-weight: bold;
725
+ line-height: 24px;
488
-
489
- border-bottom: 3px solid #71C9C7;
726
+
490
-
491
- }
727
+ }
492
-
493
- }
728
+
494
-
495
- .date {
729
+
496
-
497
- font-weight: bold;
730
+
498
-
499
- padding-right: 30px;
731
+
500
-
501
- white-space: nowrap;
732
+
502
-
503
- }
733
+
504
-
505
- .info {
734
+
506
-
507
- display: flex;
735
+
508
-
509
- margin: 10px 20px;
510
-
511
- border-bottom: 2px dotted silver;
512
-
513
- }
514
-
515
- footer {
516
-
517
- width: 920px;
518
-
519
- margin: 0 auto;
520
-
521
- }
522
-
523
- .footer-nav {
524
-
525
- margin-top: 60px;
526
-
527
- // margin-bottom: 30px;
528
-
529
- background-color: #71C9C7;
530
-
531
- display: inline-block;
532
-
533
- padding: 5px 0;
534
-
535
- border-radius: 0.5em;
536
-
537
- width: 100%;
538
-
539
- a {
540
-
541
- color: white;
542
-
543
- font-size: 14px;
544
-
545
- }
546
-
547
- }
548
-
549
- .fa-circle {
550
-
551
- padding-left: 15px;
552
-
553
- padding-right: 10px;
554
-
555
- font-size: 14px;
556
-
557
- color: white;
558
-
559
- }
560
-
561
- .tel {
562
-
563
- text-align: right;
564
-
565
- font-size: 14px;
566
-
567
- border-bottom: 2px solid #71C9C7;
568
-
569
- // padding-bottom: 20px;
570
-
571
- padding: 15px 0;
572
-
573
- }
574
-
575
- .copyright {
576
-
577
- text-align: center;
578
-
579
- font-size: 13px;
580
-
581
- }
582
-
583
- .name {
584
-
585
- font-weight: bold;
586
-
587
- }
588
-
589
- .inner {
590
-
591
- margin: 0 20px;
592
-
593
- }
594
-
595
- .clinic {
596
-
597
- width: 640px;
598
-
599
- float: right;
600
-
601
- background-color: white;
602
-
603
- border: 2px solid #71C9C7;
604
-
605
- border-radius: 0.5em;
606
-
607
- h5 {
608
-
609
- font-weight: bold;
610
-
611
- padding-top: 40px;
612
-
613
- padding-bottom: 30px;
614
-
615
- padding-left: 20px;
616
-
617
- background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
618
-
619
- color: white;
620
-
621
- border-top-left-radius: 0.3em;
622
-
623
- border-top-right-radius: 0.3em;
624
-
625
- }
626
-
627
- h6 {
628
-
629
- margin: 30px 0px;
630
-
631
- padding-bottom: 15px;
632
-
633
- font-weight: bold;
634
-
635
- border-bottom: 3px solid #71C9C7;
636
-
637
- }
638
-
639
- p {
640
-
641
- margin: 30px 10px;
642
-
643
- font-size: 13px;
644
-
645
- line-height: 24px;
646
-
647
- }
648
-
649
- }
650
736
 
651
737
 
652
738
 

1

index.htmlは文字数が多かったので、clinic.htmlのみをのせてます

2020/06/19 06:38

投稿

yukitur
yukitur

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,140 +1,264 @@
1
- ```indexhtml
2
-
3
-
4
-
5
-
1
+ ```clinichtml
2
+
3
+ <!DOCTYPE html>
4
+
5
+ <html lang="ja">
6
+
7
+ <head>
8
+
9
+ <meta charset="UTF-8">
10
+
11
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
+
13
+ <title>Dental Clinic</title>
14
+
15
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
16
+
17
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
18
+
19
+ <link rel="stylesheet" href="main.css">
20
+
21
+ <link rel="stylesheet" href="resposive.css">
22
+
23
+ </head>
24
+
25
+ <body>
26
+
27
+ <header>
28
+
29
+ <div class="container">
30
+
31
+ <div class="header-left">
32
+
33
+ <img src="https://haniwaman.com/sample/part3/template_08/common/images/siteTitle.png" alt="クリニックの画像">
34
+
35
+ </div>
36
+
37
+ <div class="header-right" >
38
+
39
+ <p>”地域に根付いた歯科医院”デンタル クリニック</p>
40
+
41
+ <h4><i class="fa fa-phone" aria-hidden="true"></i>03-0000-0000</h4>
42
+
43
+ <p class="reception-time">予約受付時間&nbsp;10:00~19:30&nbsp;<span class="red">日祝</span>&nbsp;<span class="red">休診</span></p>
44
+
45
+ </div>
46
+
47
+ <div class="nav">
48
+
49
+ <a class="first" href="./index.html">トップページ<br><span class="english">HOME</span></a>
50
+
51
+ <a href="./clinic.html">医院紹介<br><span class="english">CLINIC</span></a>
52
+
53
+ <a href="./service.html">診療案内<br><span class="english">SERVICE</span></a>
54
+
55
+ <a href="./staff.html">院長・スタッフ紹介<br><span class="english">STAFF</span></a>
56
+
57
+ <a class="last" href="./access.html">アクセス<br><span class="english">ACCESS</span></a>
58
+
59
+ </div>
60
+
61
+ <p style="font-size: 10px;"><a href="./index.html">トップページ</a>>医院紹介</p>
62
+
63
+ </div>
64
+
65
+ </header>
6
66
 
7
67
  <div class="main-wrapper">
8
68
 
9
69
  <div class="container">
10
70
 
11
- <div class="main-image">
71
+ <div class="sideber">
72
+
12
-
73
+ <div class="sideber-top">
74
+
75
+ <h6>一般歯科</h6>
76
+
77
+ <a href="#"><i class="fas fa-caret-down"></i>虫歯治療</a>
78
+
13
- <img src="https://haniwaman.com/sample/part3/template_08/common/images/in01.jpg" alt="サンプルです">
79
+ <a href="#"><i class="fas fa-caret-down"></i>歯周病治療</a>
80
+
81
+ <a href="#"><i class="fas fa-caret-down"></i>入れ歯</a>
82
+
83
+ <a href="#"><i class="fas fa-caret-down"></i>予防歯科</a>
84
+
85
+ </div>
86
+
87
+ <div class="sideber-buttom">
88
+
89
+ <h6>審美歯科</h6>
90
+
91
+ <a href="#"><i class="fas fa-caret-down"></i>ホワイトニング</a>
92
+
93
+ <a href="#"><i class="fas fa-caret-down"></i>オールセラミック</a>
94
+
95
+ <a href="#"><i class="fas fa-caret-down"></i>セラミックインレー</a>
96
+
97
+ <a href="#"><i class="fas fa-caret-down"></i>PMTC</a>
98
+
99
+ </div>
14
100
 
15
101
  </div>
16
102
 
17
- <div class="information">
103
+ <div class="clinic">
18
-
104
+
19
- <h6>新着情報</h6>
105
+ <h5>医院紹介</h5>
20
-
106
+
21
- <div class="info">
107
+ <div class="inner">
22
-
108
+
23
- <div class="date">
109
+ <h6>診療コンセプト</h6>
110
+
24
-
111
+ <p><span class="care">予防の大切さを知ってもらう</span><br><br>
112
+
113
+ 毎月行っている「こどもデンタル教室」では、お子さんたちに虫歯や口腔内の疾患の予防を指導しています。<br><br>
114
+
115
+
116
+
117
+ 正しい歯磨きのやり方、しっかり噛むことでどのような効果があるのか、進行した虫歯の恐ろしさなど…大人の方にも是非聞いていただきたい内容です。<br><br>
118
+
119
+
120
+
121
+ お子さんたちは真剣に内容に取り組んでくれています。検診の際に歯の一本一本をチェックして、「お家で実践してくれている。保護者の方も協力してくださっているのだな」と成果を垣間見ることができます。<br><br>
122
+
123
+
124
+
125
+ こういった取り組みの始まりは、一時期のお子さんたちの虫歯の増加が発端になっています。<br><br>
126
+
127
+
128
+
129
+ 医院に通ってくださるお子さんや、検診で伺った小学校の児童さんの歯の状態が非常によくなかったのです。原因は様々だと思いますが、正しく予防さえできればすぐに改善できるのはわかりました。皆さん、知らないだけなのです。<br><br>
130
+
131
+
132
+
133
+ 以前は歯医者さんに対して「痛いことをされる怖いところ」だと思われていましたが、今では少し変わってきて「痛くならないようにしてくれるところ」だと思っていただけているみたいです。<br><br>
134
+
135
+
136
+
137
+ 教室を始めて、顔を出してくださるお子さんは少しずつ増えてきました。今では翌月の予約がすぐに埋まってしまうようなありがたい状態です。<br><br>
138
+
139
+
140
+
141
+ 一も二もなく、まずは予防することです。<br><br>
142
+
143
+
144
+
145
+ 虫歯になっても削ってしまえば済むことでは?と思われる方も少なくありませんが、歯は大切な臓器です。減らしたり失ったりすることはよいことではありません。<br><br>
146
+
147
+
148
+
149
+ 歯医者さんは、歯を大切にする方法を教えるところに変わっていくべきなのです。<br><br>
150
+
151
+
152
+
153
+ 私たちは、予防するという医療を地域に根付かせていきたいと日々努力しています。</p>
154
+
25
- <p>2012年08月01日</p>
155
+ <h6>休診・診療案内</h6>
156
+
157
+ <table class="accept" border="1">
158
+
159
+ <tr bgcolor="#D1D1D1">
160
+
161
+ <th></th>
162
+
163
+ <th>月</th>
164
+
165
+ <th>火</th>
166
+
167
+ <th>水</th>
168
+
169
+ <th>木</th>
170
+
171
+ <th>金</th>
172
+
173
+ </tr>
174
+
175
+ <tr>
176
+
177
+ <td>午前</td>
178
+
179
+ <td class="none">・</td>
180
+
181
+ <td class="none">・</td>
182
+
183
+ <td class="none">・</td>
184
+
185
+ <td class="none">・</td>
186
+
187
+ <td class="none">・</td>
188
+
189
+ </tr>
190
+
191
+ <tr>
192
+
193
+ <td>午後</td>
194
+
195
+ <td class="none">・</td>
196
+
197
+ <td class="none">・</td>
198
+
199
+ <td>午後診療</td>
200
+
201
+ <td class="none">・</td>
202
+
203
+ <td class="none">・</td>
204
+
205
+ </tr>
206
+
207
+ </table>
208
+
209
+ <p><span class="name">休診日</span>&nbsp; 土日祝日・水曜日午後休診<br><br>
210
+
211
+
212
+
213
+ <span class="name">診療時間</span>&nbsp; 午前&nbsp; 9:00~13:00 / 午後&nbsp; 14:00~19:00 <br>
214
+
215
+ <br>
216
+
217
+
218
+
219
+ 当院では、ご予約の患者さんを優先して診察しております。<br>
220
+
221
+ ご来院の際は、ぜひご予約をお願いいたします。<br><br>
222
+
223
+
224
+
225
+ ご予約はお電話で<br>
226
+
227
+ 03-0000-0000</p>
26
228
 
27
229
  </div>
28
230
 
29
- <div class="content">
30
-
31
- <p>診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</p>
32
-
33
- </div>
34
-
35
- </div>
36
-
37
- <div class="info">
38
-
39
- <div class="date">
40
-
41
- <p>2012年07月24日</p>
42
-
43
- </div>
44
-
45
- <div class="content">
46
-
47
- <p>【8月の休診のお知らせ】8月12日~16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</p>
48
-
49
- </div>
50
-
51
- </div>
52
-
53
- <div class="info">
54
-
55
- <div class="date">
56
-
57
- <p>2012年07月02日</p>
58
-
59
- </div>
60
-
61
- <div class="content">
62
-
63
- <p>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。。</p>
64
-
65
- </div>
66
-
67
- </div>
68
-
69
- <div class="info">
70
-
71
- <div class="date">
72
-
73
- <p>2012年06月20日</p>
74
-
75
- </div>
76
-
77
- <div class="content">
78
-
79
- <p>【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</p>
80
-
81
- </div>
82
-
83
- </div>
84
-
85
- <div class="info">
86
-
87
- <div class="date">
88
-
89
- <p>2012年06月01日</p>
90
-
91
- </div>
92
-
93
- <div class="content">
94
-
95
- <p>ホームページをリニューアルしました。</p>
96
-
97
- </div>
98
-
99
- </div>
100
-
101
231
  </div>
102
232
 
103
- <div class="sideber">
104
-
105
- <div class="sideber-top">
106
-
107
- <h6>一般歯科</h6>
108
-
109
- <a href="#"><i class="fas fa-caret-down"></i>虫歯治療</a>
110
-
111
- <a href="#"><i class="fas fa-caret-down"></i>歯周病治療</a>
112
-
113
- <a href="#"><i class="fas fa-caret-down"></i>入れ歯</a>
114
-
115
- <a href="#"><i class="fas fa-caret-down"></i>予防歯科</a>
116
-
117
- </div>
233
+ </div>
118
-
119
- <div class="sideber-buttom">
234
+
120
-
121
- <h6>審美歯科</h6>
122
-
123
- <a href="#"><i class="fas fa-caret-down"></i>ホワイトニング</a>
124
-
125
- <a href="#"><i class="fas fa-caret-down"></i>オールセラミック</a>
126
-
127
- <a href="#"><i class="fas fa-caret-down"></i>セラミックインレー</a>
128
-
129
- <a href="#"><i class="fas fa-caret-down"></i>PMTC</a>
130
-
131
- </div>
235
+ </div>
236
+
237
+ <footer>
238
+
239
+ <div class="container">
240
+
241
+ <div class="footer-nav">
242
+
243
+ <i class="far fa-circle"></i><a href="./index.html">トップページ</a>
244
+
245
+ <i class="far fa-circle"></i><a href="./clinic.html">医院紹介</a>
246
+
247
+ <i class="far fa-circle"></i><a id="return" href="./service.html">診療案内</a>
248
+
249
+ <i class="far fa-circle"></i><a href="./staff.html">院長・スタッフ紹介</a>
250
+
251
+ <i class="far fa-circle"></i><a href="./access.html">アクセス</a>
132
252
 
133
253
  </div>
134
254
 
255
+ <p class="tel"><span class="name">デンタル クリニック</span> 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</p>
256
+
257
+ <p class="copyright">Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p>
258
+
135
259
  </div>
136
260
 
137
- </div>
261
+ </footer>
138
262
 
139
263
  </body>
140
264
 
@@ -144,551 +268,395 @@
144
268
 
145
269
  ```
146
270
 
147
- ```clinichtml
148
-
149
-
150
-
151
- <div class="clinic">
152
-
153
- <h5>医院紹介</h5>
154
-
155
- <div class="inner">
156
-
157
- <h6>診療コンセプト</h6>
158
-
159
- <p><span class="care">予防の大切さを知ってもらう</span><br><br>
160
-
161
- 毎月行っている「こどもデンタル教室」では、お子さんたちに虫歯や口腔内の疾患の予防を指導しています。<br><br>
162
-
163
-
164
-
165
- 正しい歯磨きのやり方、しっかり噛むことでどのような効果があるのか、進行した虫歯の恐ろしさなど…大人の方にも是非聞いていただきたい内容です。<br><br>
166
-
167
-
168
-
169
- お子さんたちは真剣に内容に取り組んでくれています。検診の際に歯の一本一本をチェックして、「お家で実践してくれている。保護者の方も協力してくださっているのだな」と成果を垣間見ることができます。<br><br>
170
-
171
-
172
-
173
- こういった取り組みの始まりは、一時期のお子さんたちの虫歯の増加が発端になっています。<br><br>
174
-
175
-
176
-
177
- 医院に通ってくださるお子さんや、検診で伺った小学校の児童さんの歯の状態が非常によくなかったのです。原因は様々だと思いますが、正しく予防さえできればすぐに改善できるのはわかりました。皆さん、知らないだけなのです。<br><br>
178
-
179
-
180
-
181
- 以前は歯医者さんに対して「痛いことをされる怖いところ」だと思われていましたが、今では少し変わってきて「痛くならないようにしてくれるところ」だと思っていただけているみたいです。<br><br>
182
-
183
-
184
-
185
- 教室を始めて、顔を出してくださるお子さんは少しずつ増えてきました。今では翌月の予約がすぐに埋まってしまうようなありがたい状態です。<br><br>
186
-
187
-
188
-
189
- 一も二もなく、まずは予防することです。<br><br>
190
-
191
-
192
-
193
- 虫歯になっても削ってしまえば済むことでは?と思われる方も少なくありませんが、歯は大切な臓器です。減らしたり失ったりすることはよいことではありません。<br><br>
194
-
195
-
196
-
197
- 歯医者さんは、歯を大切にする方法を教えるところに変わっていくべきなのです。<br><br>
198
-
199
-
200
-
201
- 私たちは、予防するという医療を地域に根付かせていきたいと日々努力しています。</p>
202
-
203
- <h6>休診日・診療案内</h6>
204
-
205
- <table class="accept" border="1">
206
-
207
- <tr bgcolor="#D1D1D1">
208
-
209
- <th></th>
210
-
211
- <th>月</th>
212
-
213
- <th>火</th>
214
-
215
- <th>水</th>
216
-
217
- <th>木</th>
218
-
219
- <th>金</th>
220
-
221
- </tr>
222
-
223
- <tr>
224
-
225
- <td>午前</td>
226
-
227
- <td class="none">・</td>
228
-
229
- <td class="none">・</td>
230
-
231
- <td class="none">・</td>
232
-
233
- <td class="none">・</td>
234
-
235
- <td class="none">・</td>
236
-
237
- </tr>
238
-
239
- <tr>
240
-
241
- <td>午後</td>
242
-
243
- <td class="none">・</td>
244
-
245
- <td class="none">・</td>
246
-
247
- <td>午後診療</td>
248
-
249
- <td class="none">・</td>
250
-
251
- <td class="none">・</td>
252
-
253
- </tr>
254
-
255
- </table>
256
-
257
- <p><span class="name">休診日</span>&nbsp; 土日祝日・水曜日午後休診<br><br>
258
-
259
-
260
-
261
- <span class="name">診療時間</span>&nbsp; 午前&nbsp; 9:00~13:00 / 午後&nbsp; 14:00~19:00 <br>
262
-
263
- <br>
264
-
265
-
266
-
267
- 当院では、ご予約の患者さんを優先して診察しております。<br>
268
-
269
- ご来院の際は、ぜひご予約をお願いいたします。<br><br>
270
-
271
-
272
-
273
- ご予約はお電話で<br>
274
-
275
- 03-0000-0000</p>
276
-
277
- </div>
278
-
279
- </div>
280
-
281
- </div>
282
-
283
- </div>
284
-
285
-
286
-
287
- </body>
288
-
289
- </html>
271
+ ```css
272
+
273
+ body {
274
+
275
+ background-color: rgb(241, 240, 240);
276
+
277
+ border-top: 8px solid #71C9C7;
278
+
279
+ margin: 0 auto;
280
+
281
+ }
282
+
283
+
284
+
285
+ .container {
286
+
287
+ padding: 0;
288
+
289
+ margin: 0 auto;
290
+
291
+ }
292
+
293
+
294
+
295
+ .main-image {
296
+
297
+ max-width: 100%;
298
+
299
+ float: right;
300
+
301
+ img {
302
+
303
+ float: right;
304
+
305
+ }
306
+
307
+ }
308
+
309
+ .main-wrapper {
310
+
311
+ width: 920px;
312
+
313
+ margin: 0 auto;
314
+
315
+ text-align: left;
316
+
317
+ }
318
+
319
+ .sideber {
320
+
321
+ width: 260px;
322
+
323
+ margin-right: 20px;
324
+
325
+ float: left;
326
+
327
+ position: relative;
328
+
329
+ }
330
+
331
+ .sideber-top {
332
+
333
+ width: 100%;
334
+
335
+ height: 250px;
336
+
337
+ margin-right: 20px;
338
+
339
+ border: 2px solid #71C9C7;
340
+
341
+ border-top-right-radius: 0.5em;
342
+
343
+ border-top-left-radius: 0.5em;
344
+
345
+ background-color: white;
346
+
347
+ h6 {
348
+
349
+ background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
350
+
351
+ padding: 15px 15px;
352
+
353
+ font-weight: bold;
354
+
355
+ color: white;
356
+
357
+ border-top-left-radius: 0.4em;
358
+
359
+ border-top-right-radius: 0.4em;
360
+
361
+ }
362
+
363
+ a {
364
+
365
+ display: block;
366
+
367
+ color: black;
368
+
369
+ text-decoration: none;
370
+
371
+ margin: 18px;
372
+
373
+ font-size: 14px;
374
+
375
+ font-weight: bold;
376
+
377
+ border-bottom: 1px solid #71C9C7;
378
+
379
+ padding-bottom: 5px;
380
+
381
+ &:hover {
382
+
383
+ color: #71C9C7;
384
+
385
+ }
386
+
387
+ }
388
+
389
+ }
390
+
391
+ .fa-caret-down {
392
+
393
+ padding-right: 5px;
394
+
395
+ font-size: 16px;
396
+
397
+ color: #71C9C7;
398
+
399
+ }
400
+
401
+ .sideber-buttom {
402
+
403
+ width: 100%;
404
+
405
+ height: 250px;
406
+
407
+ margin-top: 25px;
408
+
409
+ margin-right: 20px;
410
+
411
+ margin-bottom: 100px;
412
+
413
+ border: 2px solid #71C9C7;
414
+
415
+ border-top-right-radius: 0.5em;
416
+
417
+ border-top-left-radius: 0.5em;
418
+
419
+ background-color: white;
420
+
421
+ h6 {
422
+
423
+ background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
424
+
425
+ padding: 15px 15px;
426
+
427
+ font-weight: bold;
428
+
429
+ color: white;
430
+
431
+ border-top-left-radius: 0.4em;
432
+
433
+ border-top-right-radius: 0.4em;
434
+
435
+ }
436
+
437
+ a {
438
+
439
+ display: block;
440
+
441
+ color: black;
442
+
443
+ text-decoration: none;
444
+
445
+ margin: 18px;
446
+
447
+ font-size: 14px;
448
+
449
+ font-weight: bold;
450
+
451
+ border-bottom: 1px solid #71C9C7;
452
+
453
+ padding-bottom: 5px;
454
+
455
+ &:hover {
456
+
457
+ color: violet;
458
+
459
+ }
460
+
461
+ }
462
+
463
+ }
464
+
465
+ .information {
466
+
467
+ margin-top: 25px;
468
+
469
+ padding-bottom: 30px;
470
+
471
+ font-size: 13px;
472
+
473
+ background-color: white;
474
+
475
+ width: 640px;
476
+
477
+ float: right;
478
+
479
+ h6 {
480
+
481
+ margin: 20px;
482
+
483
+ padding-bottom: 10px;
484
+
485
+ padding-left: 10px;
486
+
487
+ font-weight: bold;
488
+
489
+ border-bottom: 3px solid #71C9C7;
490
+
491
+ }
492
+
493
+ }
494
+
495
+ .date {
496
+
497
+ font-weight: bold;
498
+
499
+ padding-right: 30px;
500
+
501
+ white-space: nowrap;
502
+
503
+ }
504
+
505
+ .info {
506
+
507
+ display: flex;
508
+
509
+ margin: 10px 20px;
510
+
511
+ border-bottom: 2px dotted silver;
512
+
513
+ }
514
+
515
+ footer {
516
+
517
+ width: 920px;
518
+
519
+ margin: 0 auto;
520
+
521
+ }
522
+
523
+ .footer-nav {
524
+
525
+ margin-top: 60px;
526
+
527
+ // margin-bottom: 30px;
528
+
529
+ background-color: #71C9C7;
530
+
531
+ display: inline-block;
532
+
533
+ padding: 5px 0;
534
+
535
+ border-radius: 0.5em;
536
+
537
+ width: 100%;
538
+
539
+ a {
540
+
541
+ color: white;
542
+
543
+ font-size: 14px;
544
+
545
+ }
546
+
547
+ }
548
+
549
+ .fa-circle {
550
+
551
+ padding-left: 15px;
552
+
553
+ padding-right: 10px;
554
+
555
+ font-size: 14px;
556
+
557
+ color: white;
558
+
559
+ }
560
+
561
+ .tel {
562
+
563
+ text-align: right;
564
+
565
+ font-size: 14px;
566
+
567
+ border-bottom: 2px solid #71C9C7;
568
+
569
+ // padding-bottom: 20px;
570
+
571
+ padding: 15px 0;
572
+
573
+ }
574
+
575
+ .copyright {
576
+
577
+ text-align: center;
578
+
579
+ font-size: 13px;
580
+
581
+ }
582
+
583
+ .name {
584
+
585
+ font-weight: bold;
586
+
587
+ }
588
+
589
+ .inner {
590
+
591
+ margin: 0 20px;
592
+
593
+ }
594
+
595
+ .clinic {
596
+
597
+ width: 640px;
598
+
599
+ float: right;
600
+
601
+ background-color: white;
602
+
603
+ border: 2px solid #71C9C7;
604
+
605
+ border-radius: 0.5em;
606
+
607
+ h5 {
608
+
609
+ font-weight: bold;
610
+
611
+ padding-top: 40px;
612
+
613
+ padding-bottom: 30px;
614
+
615
+ padding-left: 20px;
616
+
617
+ background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
618
+
619
+ color: white;
620
+
621
+ border-top-left-radius: 0.3em;
622
+
623
+ border-top-right-radius: 0.3em;
624
+
625
+ }
626
+
627
+ h6 {
628
+
629
+ margin: 30px 0px;
630
+
631
+ padding-bottom: 15px;
632
+
633
+ font-weight: bold;
634
+
635
+ border-bottom: 3px solid #71C9C7;
636
+
637
+ }
638
+
639
+ p {
640
+
641
+ margin: 30px 10px;
642
+
643
+ font-size: 13px;
644
+
645
+ line-height: 24px;
646
+
647
+ }
648
+
649
+ }
290
650
 
291
651
 
292
652
 
293
653
  ```
294
654
 
295
- ```css
296
-
297
- body {
298
-
299
- background-color: rgb(241, 240, 240);
300
-
301
- border-top: 8px solid #71C9C7;
302
-
303
- margin: 0 auto;
304
-
305
- }
306
-
307
-
308
-
309
- .container {
310
-
311
- padding: 0;
312
-
313
- margin: 0 auto;
314
-
315
- }
316
-
317
-
318
-
319
- .main-image {
320
-
321
- max-width: 100%;
322
-
323
- float: right;
324
-
325
- img {
326
-
327
- float: right;
328
-
329
- }
330
-
331
- }
332
-
333
- .main-wrapper {
334
-
335
- width: 920px;
336
-
337
- margin: 0 auto;
338
-
339
- text-align: left;
340
-
341
- }
342
-
343
- .sideber {
344
-
345
- width: 260px;
346
-
347
- margin-right: 20px;
348
-
349
- float: left;
350
-
351
- position: relative;
352
-
353
- }
354
-
355
- .sideber-top {
356
-
357
- width: 100%;
358
-
359
- height: 250px;
360
-
361
- margin-right: 20px;
362
-
363
- border: 2px solid #71C9C7;
364
-
365
- border-top-right-radius: 0.5em;
366
-
367
- border-top-left-radius: 0.5em;
368
-
369
- background-color: white;
370
-
371
- h6 {
372
-
373
- background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
374
-
375
- padding: 15px 15px;
376
-
377
- font-weight: bold;
378
-
379
- color: white;
380
-
381
- border-top-left-radius: 0.4em;
382
-
383
- border-top-right-radius: 0.4em;
384
-
385
- }
386
-
387
- a {
388
-
389
- display: block;
390
-
391
- color: black;
392
-
393
- text-decoration: none;
394
-
395
- margin: 18px;
396
-
397
- font-size: 14px;
398
-
399
- font-weight: bold;
400
-
401
- border-bottom: 1px solid #71C9C7;
402
-
403
- padding-bottom: 5px;
404
-
405
- &:hover {
406
-
407
- color: #71C9C7;
408
-
409
- }
410
-
411
- }
412
-
413
- }
414
-
415
- .fa-caret-down {
416
-
417
- padding-right: 5px;
418
-
419
- font-size: 16px;
420
-
421
- color: #71C9C7;
422
-
423
- }
424
-
425
- .sideber-buttom {
426
-
427
- width: 100%;
428
-
429
- height: 250px;
430
-
431
- margin-top: 25px;
432
-
433
- margin-right: 20px;
434
-
435
- margin-bottom: 100px;
436
-
437
- border: 2px solid #71C9C7;
438
-
439
- border-top-right-radius: 0.5em;
440
-
441
- border-top-left-radius: 0.5em;
442
-
443
- background-color: white;
444
-
445
- h6 {
446
-
447
- background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
448
-
449
- padding: 15px 15px;
450
-
451
- font-weight: bold;
452
-
453
- color: white;
454
-
455
- border-top-left-radius: 0.4em;
456
-
457
- border-top-right-radius: 0.4em;
458
-
459
- }
460
-
461
- a {
462
-
463
- display: block;
464
-
465
- color: black;
466
-
467
- text-decoration: none;
468
-
469
- margin: 18px;
470
-
471
- font-size: 14px;
472
-
473
- font-weight: bold;
474
-
475
- border-bottom: 1px solid #71C9C7;
476
-
477
- padding-bottom: 5px;
478
-
479
- &:hover {
480
-
481
- color: violet;
482
-
483
- }
484
-
485
- }
486
-
487
- }
488
-
489
- .information {
490
-
491
- margin-top: 25px;
492
-
493
- padding-bottom: 30px;
494
-
495
- font-size: 13px;
496
-
497
- background-color: white;
498
-
499
- width: 640px;
500
-
501
- float: right;
502
-
503
- h6 {
504
-
505
- margin: 20px;
506
-
507
- padding-bottom: 10px;
508
-
509
- padding-left: 10px;
510
-
511
- font-weight: bold;
512
-
513
- border-bottom: 3px solid #71C9C7;
514
-
515
- }
516
-
517
- }
518
-
519
- .date {
520
-
521
- font-weight: bold;
522
-
523
- padding-right: 30px;
524
-
525
- white-space: nowrap;
526
-
527
- }
528
-
529
- .info {
530
-
531
- display: flex;
532
-
533
- margin: 10px 20px;
534
-
535
- border-bottom: 2px dotted silver;
536
-
537
- }
538
-
539
- footer {
540
-
541
- width: 920px;
542
-
543
- margin: 0 auto;
544
-
545
- }
546
-
547
- .footer-nav {
548
-
549
- margin-top: 60px;
550
-
551
- // margin-bottom: 30px;
552
-
553
- background-color: #71C9C7;
554
-
555
- display: inline-block;
556
-
557
- padding: 5px 0;
558
-
559
- border-radius: 0.5em;
560
-
561
- width: 100%;
562
-
563
- a {
564
-
565
- color: white;
566
-
567
- font-size: 14px;
568
-
569
- }
570
-
571
- }
572
-
573
- .fa-circle {
574
-
575
- padding-left: 15px;
576
-
577
- padding-right: 10px;
578
-
579
- font-size: 14px;
580
-
581
- color: white;
582
-
583
- }
584
-
585
- .tel {
586
-
587
- text-align: right;
588
-
589
- font-size: 14px;
590
-
591
- border-bottom: 2px solid #71C9C7;
592
-
593
- // padding-bottom: 20px;
594
-
595
- padding: 15px 0;
596
-
597
- }
598
-
599
- .copyright {
600
-
601
- text-align: center;
602
-
603
- font-size: 13px;
604
-
605
- }
606
-
607
- .name {
608
-
609
- font-weight: bold;
610
-
611
- }
612
-
613
- .inner {
614
-
615
- margin: 0 20px;
616
-
617
- }
618
-
619
- .clinic {
620
-
621
- width: 640px;
622
-
623
- float: right;
624
-
625
- background-color: white;
626
-
627
- border: 2px solid #71C9C7;
628
-
629
- border-radius: 0.5em;
630
-
631
- h5 {
632
-
633
- font-weight: bold;
634
-
635
- padding-top: 40px;
636
-
637
- padding-bottom: 30px;
638
-
639
- padding-left: 20px;
640
-
641
- background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
642
-
643
- color: white;
644
-
645
- border-top-left-radius: 0.3em;
646
-
647
- border-top-right-radius: 0.3em;
648
-
649
- }
650
-
651
- h6 {
652
-
653
- margin: 30px 0px;
654
-
655
- padding-bottom: 15px;
656
-
657
- font-weight: bold;
658
-
659
- border-bottom: 3px solid #71C9C7;
660
-
661
- }
662
-
663
- p {
664
-
665
- margin: 30px 10px;
666
-
667
- font-size: 13px;
668
-
669
- line-height: 24px;
670
-
671
- }
672
-
673
- }
674
-
675
-
676
-
677
- ```
678
-
679
- ![![イメージ説明](099f267524263b6a7c01b52a0acac3f8.png)
680
-
681
655
  ![イメージ説明](bea665c34f4fc06ccb45d0cc385e1122.png)
682
656
 
683
657
 
684
658
 
685
- sideberの部分を左上に移動させたいのですが、float:left;を使うとclinic.htmlの部分は右上に移動するのですが、index.htmlでは左上に移動しません。
686
-
687
- 逆にsideberのfloatをなくすと、index.htmlでは左上に移動するのに対し、clinic.htmlでは右上に移動しません。
688
-
689
-
690
-
691
- 互い違いってします。
659
+ 医院紹介の部分を右上って行きたす。
692
660
 
693
661
 
694
662
 
@@ -700,4 +668,4 @@
700
668
 
701
669
 
702
670
 
703
- 文字数が多いので不要な部分はカットしてます
671
+