質問編集履歴

2

書式の修正

2021/03/30 13:15

投稿

takuyakagawa
takuyakagawa

スコア2

test CHANGED
File without changes
test CHANGED
@@ -244,7 +244,9 @@
244
244
 
245
245
 
246
246
 
247
- ```CSS
247
+ ```css
248
+
249
+ ```
248
250
 
249
251
  body {
250
252
 

1

内容の追加

2021/03/30 13:15

投稿

takuyakagawa
takuyakagawa

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1 +1,709 @@
1
1
  CSSでFlexを使用した個所の文字が、Chromeのディベロッパーツールで画面サイズを(スマホサイズからパッドサイズ等に)変化させたときpx指定をしているのにも関わらず文字の大きさが変わる。Flexを使用していない箇所は文字サイズは変わらない。
2
+
3
+ ```HTML
4
+
5
+ <!DOCTYPE html>
6
+
7
+ <html lng="ja">
8
+
9
+ <head>
10
+
11
+ <meta charset="utf-8">
12
+
13
+ <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
14
+
15
+ <title>はにわマントレース</title>
16
+
17
+ <link rel="stylesheet" href="css/styles.css">
18
+
19
+ </head>
20
+
21
+ <body>
22
+
23
+ <header>
24
+
25
+ <p class="ue"></p>
26
+
27
+ <img src="siteTitle.png" class="dental">
28
+
29
+ <p class="tiiki">"地域に根付いた歯科医院"デンタル クリニック</p>
30
+
31
+ <div class="tel">
32
+
33
+ <img src="#">
34
+
35
+ <p>03-0000-0000</p>
36
+
37
+ </div>
38
+
39
+ <p class="reserve">予約受付時間 10:00~19:30 日祝 休診</p>
40
+
41
+ <div class="nav">
42
+
43
+ <ul>
44
+
45
+ <li>トップページ</br>
46
+
47
+ <span>HOME</span></li>
48
+
49
+ <li>医院紹介</br>
50
+
51
+ <span>CLINIC</span></li>
52
+
53
+ <li>診療案内</br>
54
+
55
+ <span>SERVICE</span></li>
56
+
57
+ <li>院長・スタッフ紹介</br>
58
+
59
+ <span>STAFF</span></li>
60
+
61
+ <li>アクセス</br>
62
+
63
+ <span>ACCESS</span></li>
64
+
65
+ </ul>
66
+
67
+ </div>
68
+
69
+ </header>
70
+
71
+ <img src="in01.jpg" class="in01">
72
+
73
+ </div>
74
+
75
+
76
+
77
+ <section class="new">
78
+
79
+ <p>新着情報</p>
80
+
81
+ <div class="info">
82
+
83
+ <p>2012年08月01日</p>
84
+
85
+ <p>
86
+
87
+ 【診療時間変更のお知らせ】長期休診の前日8月1</br>
88
+
89
+ 1日は、通常より1時間長く診療をすることにしま</br>
90
+
91
+ した。ご予約をお待ちしております。
92
+
93
+ </p>
94
+
95
+ </div>
96
+
97
+
98
+
99
+ <div class="info">
100
+
101
+ <p>2012年07月24日</p>
102
+
103
+ <p>
104
+
105
+ 【8月休診のお知らせ】8月12日~16日の間は</br>
106
+
107
+ 休診とさせていただきます。何卒よろしくお願い</br>
108
+
109
+ いたします。
110
+
111
+ </p>
112
+
113
+ </div>
114
+
115
+
116
+
117
+ <div class="info">
118
+
119
+ <p>2012年07月02日</p>
120
+
121
+ <p>
122
+
123
+ 【こどもデンタル教室のご案内】毎月第二土曜日</br>
124
+
125
+ に行っているこどもデンタル教室では、参加して</br>
126
+
127
+ くださるお子様を募集しております。
128
+
129
+ </p>
130
+
131
+ </div>
132
+
133
+
134
+
135
+ <div class="info">
136
+
137
+ <p>2012年06月20日</p>
138
+
139
+ <p>
140
+
141
+ 【7月休診日のお知らせ】7月は土日祝日以外の休</br>
142
+
143
+ 診日はありません。ご来院お待ちしております。
144
+
145
+ </p>
146
+
147
+ </div>
148
+
149
+ <div class="info">
150
+
151
+ <p>2012年06月01日</p>
152
+
153
+ <p>ホームページをリニューアルしました。</p>
154
+
155
+ </div>
156
+
157
+ </section>
158
+
159
+
160
+
161
+ <section class="menu">
162
+
163
+ <div class="common">
164
+
165
+ <p>一般歯科</p>
166
+
167
+ <ul>
168
+
169
+ <li><span>虫歯治療</span></li>
170
+
171
+ <li><span>歯周病治療</span></li>
172
+
173
+ <li><span>入れ歯</span></li>
174
+
175
+ <li><span>予防歯科</span></li>
176
+
177
+ </ul>
178
+
179
+ </div>
180
+
181
+
182
+
183
+ <div class="common">
184
+
185
+ <p>審美歯科</p>
186
+
187
+ <ul>
188
+
189
+ <li><span>ホワイトニング</span></li>
190
+
191
+ <li><span>オールセラミック</span></li>
192
+
193
+ <li><span>セラミックインレー</span></li>
194
+
195
+ <li><span>PMTC</span></li>
196
+
197
+ </ul>
198
+
199
+ </div>
200
+
201
+ </section>
202
+
203
+
204
+
205
+
206
+
207
+ <section>
208
+
209
+ <ul class="sitemap">
210
+
211
+ <li><span>トップページ</span></li>
212
+
213
+ <li><span>医院紹介</span></li>
214
+
215
+ <li><span>診療案内</span></li>
216
+
217
+ <li><span>院長・スタッフ紹介</span></li>
218
+
219
+ <li><span>アクセス</span></li>
220
+
221
+ </ul>
222
+
223
+ </section>
224
+
225
+
226
+
227
+ <div class="addres">
228
+
229
+ <p>デンタル クリニック</p>
230
+
231
+ <p>東京都新宿区市谷左内町21-13</p>
232
+
233
+ <p>TEL:03-0000-0000</p>
234
+
235
+ </div>
236
+
237
+
238
+
239
+ <footer>
240
+
241
+ Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.
242
+
243
+ </footer>
244
+
245
+
246
+
247
+ ```CSS
248
+
249
+ body {
250
+
251
+ margin:0;
252
+
253
+ background-color: seashell;
254
+
255
+ --mycolor: rgb(102, 209, 209);
256
+
257
+ }
258
+
259
+
260
+
261
+ header {
262
+
263
+ text-align: center;
264
+
265
+ }
266
+
267
+ /* 一番上の線 */
268
+
269
+ .ue {
270
+
271
+ height: 24px;
272
+
273
+ background-color: var(--mycolor);
274
+
275
+ margin:0;
276
+
277
+ padding: 0;
278
+
279
+ }
280
+
281
+
282
+
283
+ .dental {
284
+
285
+ width:650px;
286
+
287
+ }
288
+
289
+
290
+
291
+ header > p {
292
+
293
+ font-size: 26px;
294
+
295
+ }
296
+
297
+
298
+
299
+ .tiiki {
300
+
301
+ margin: 0;
302
+
303
+ font-size: 10px;
304
+
305
+ }
306
+
307
+ /* 電話番号 */
308
+
309
+ .tel {
310
+
311
+ display: flex;
312
+
313
+ justify-content: center;
314
+
315
+ align-items: center;
316
+
317
+ margin-top: 20px;
318
+
319
+ }
320
+
321
+
322
+
323
+ .tel img {
324
+
325
+ width: 48px;
326
+
327
+ height: 48px;
328
+
329
+ }
330
+
331
+
332
+
333
+ .tel p {
334
+
335
+ font-size: 70px;
336
+
337
+ margin: 0;
338
+
339
+ }
340
+
341
+
342
+
343
+ /* 予約のとこ */
344
+
345
+ .reserve {
346
+
347
+ border: 0.1px solid var(--mycolor);
348
+
349
+ margin: 0;
350
+
351
+ width: 500px;
352
+
353
+ margin: 0 auto;
354
+
355
+ padding: 20px 40px;
356
+
357
+ }
358
+
359
+
360
+
361
+ .nav {
362
+
363
+ /* background-color: tomato; */
364
+
365
+ width: 100%;
366
+
367
+ margin-top: 30px;
368
+
369
+ }
370
+
371
+
372
+
373
+ .nav ul {
374
+
375
+ display: flex;
376
+
377
+ flex-flow: row wrap;
378
+
379
+ align-items: flex-start;
380
+
381
+ width: 100%;
382
+
383
+ padding: 0;
384
+
385
+ }
386
+
387
+
388
+
389
+
390
+
391
+ .nav ul li {
392
+
393
+ width: 50%;
394
+
395
+ background-color: var(--mycolor);
396
+
397
+ list-style: none;
398
+
399
+ font-size: 36px;
400
+
401
+ font-weight: bold;
402
+
403
+ padding: 45px 0px;
404
+
405
+ border-radius: 4%;
406
+
407
+ color: white;
408
+
409
+ line-height: 40px;
410
+
411
+ }
412
+
413
+
414
+
415
+ .nav span {
416
+
417
+ font-size: 24px;
418
+
419
+ font-weight: bold;
420
+
421
+ }
422
+
423
+
424
+
425
+ .in01 {
426
+
427
+ width: calc(100% - 60px);
428
+
429
+ margin: 35px 30px 0 30px;
430
+
431
+ }
432
+
433
+
434
+
435
+
436
+
437
+ /* 新着情報 */
438
+
439
+
440
+
441
+ .new {
442
+
443
+ width: calc(100%-60px);
444
+
445
+ margin: 0px 30px;
446
+
447
+ padding-top: 80px;
448
+
449
+ padding-bottom: 100px;
450
+
451
+ background-color: white;
452
+
453
+ }
454
+
455
+
456
+
457
+
458
+
459
+ .new > p {
460
+
461
+ margin: 0 auto;
462
+
463
+ width: 88%;
464
+
465
+ font-size: 15px;
466
+
467
+ font-weight: bold;
468
+
469
+ border-bottom: var(--mycolor) solid 8px;
470
+
471
+ padding-bottom: 70px;
472
+
473
+ }
474
+
475
+
476
+
477
+ .info {
478
+
479
+ /* background-color: rosybrown; */
480
+
481
+ border-bottom: royalblue 1px solid;
482
+
483
+ border-bottom-style: dotted;
484
+
485
+ width: 88%;
486
+
487
+ margin: auto;
488
+
489
+ }
490
+
491
+
492
+
493
+ .info > p:nth-child(odd) {
494
+
495
+ padding-bottom: 60px;
496
+
497
+ padding-top: 40px;
498
+
499
+ font-weight: bold;
500
+
501
+ width: 100%;
502
+
503
+ font-size: 12px;
504
+
505
+ margin: 0 auto;
506
+
507
+ }
508
+
509
+
510
+
511
+
512
+
513
+
514
+
515
+ .info > p:nth-child(even) {
516
+
517
+ margin: auto;
518
+
519
+ padding-bottom: 30px;
520
+
521
+ width: 95%;
522
+
523
+ font-size: 13px;
524
+
525
+ }
526
+
527
+
528
+
529
+ /* メニュー */
530
+
531
+ .menu {
532
+
533
+ width: calc(100% - 60px);
534
+
535
+ margin: 100px auto;
536
+
537
+ }
538
+
539
+
540
+
541
+ .menu p {
542
+
543
+ background-color: var(--mycolor);
544
+
545
+ color: white;
546
+
547
+ padding: 20px 0 20px 40px;
548
+
549
+ margin: 0;
550
+
551
+ border-top-left-radius: 20px;
552
+
553
+ border-top-right-radius: 20px;
554
+
555
+ font-weight: bold;
556
+
557
+ }
558
+
559
+
560
+
561
+ .common {
562
+
563
+ background-color: white;
564
+
565
+ border:var(--mycolor) 1px solid;
566
+
567
+ border-top-left-radius: 20px;
568
+
569
+ border-top-right-radius: 20px;
570
+
571
+ margin-bottom: 60px;
572
+
573
+ padding-bottom: 50px;
574
+
575
+ }
576
+
577
+
578
+
579
+ .common ul {
580
+
581
+ width: 93%;
582
+
583
+ padding-left: 0;
584
+
585
+ margin: 0 auto;
586
+
587
+ }
588
+
589
+
590
+
591
+ .common li {
592
+
593
+ padding: 25px 0;
594
+
595
+ font-size: 14px;
596
+
597
+ border-bottom: solid var(--mycolor) 1px;
598
+
599
+ list-style: none;
600
+
601
+ font-weight: bold;
602
+
603
+ color: rgb(82, 107, 107);
604
+
605
+ }
606
+
607
+
608
+
609
+ .common span {
610
+
611
+ padding-left: 20px;
612
+
613
+ }
614
+
615
+
616
+
617
+ .common li::before {
618
+
619
+ content: "\025c6";
620
+
621
+ font-size: 14px;
622
+
623
+ color: var(--mycolor);
624
+
625
+ }
626
+
627
+
628
+
629
+ /* サイトマップ */
630
+
631
+ .sitemap {
632
+
633
+ margin: auto;
634
+
635
+ width: calc(100% - 60px);
636
+
637
+ background-color: rosybrown;
638
+
639
+ display: flex;
640
+
641
+ flex-wrap: wrap;
642
+
643
+ /* list-style: none; */
644
+
645
+ text-align: center;
646
+
647
+ justify-content: space-between;
648
+
649
+ padding-left: 0;
650
+
651
+ padding-bottom: 20px;
652
+
653
+ font-size: 24px;
654
+
655
+
656
+
657
+ }
658
+
659
+
660
+
661
+ .sitemap li {
662
+
663
+ width: auto;
664
+
665
+ margin: 0 50px;
666
+
667
+ padding-top: 20px;
668
+
669
+ /* padding-left: 50px; */
670
+
671
+ font-size: 100%;
672
+
673
+ color: white;
674
+
675
+ list-style: circle;
676
+
677
+ }
678
+
679
+
680
+
681
+ footer {
682
+
683
+ /* width: 50%; */
684
+
685
+ font-size: 36px;
686
+
687
+ }
688
+
689
+
690
+
691
+ /* for ipad */
692
+
693
+ @media screen and (min-width: 768px) and (max-width: 1024px) {
694
+
695
+
696
+
697
+ }
698
+
699
+
700
+
701
+ /* forPC */
702
+
703
+ @media screen and (min-width: 1024px) {
704
+
705
+
706
+
707
+ }
708
+
709
+ ```