質問編集履歴

3

Flexタグの認識まちがっておりました。リセットCSS追記致しました。全角の空白については本日、夜に確認してみます。(文字数がオーバーしたので、HTML、CSS一部消しました。)

2020/03/31 22:13

投稿

chair
chair

スコア25

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  加えて、position,transformプロパティを使わず埋める方法はあるのでしょうか?
8
8
 
9
- ご教授願います。
9
+ ご教授願います。(文字数がオーバーしたので、HTML、CSS一部消しました。)
10
10
 
11
11
  ![隙間ができる](24d066a0c92a490e65dfabb0f2d1c7d3.png)
12
12
 

2

Flexタグの認識まちがっておりました。リセットCSS追記致しました。全角の空白については本日、夜に確認してみます。(文字数がオーバーしたので、HTML、CSS一部消しました。)

2020/03/31 22:12

投稿

chair
chair

スコア25

test CHANGED
File without changes
test CHANGED
File without changes

1

Flexタグの認識まちがっておりました。リセットCSS追記致しました。全角の空白については本日、夜に確認してみます。(文字数がオーバーしたので、HTML、CSS一部消しました。)

2020/03/31 22:11

投稿

chair
chair

スコア25

test CHANGED
File without changes
test CHANGED
@@ -12,16 +12,12 @@
12
12
 
13
13
  ### 該当のソースコード
14
14
 
15
-
16
-
17
15
  ```HTML
18
16
 
19
17
  <!DOCTYPE html>
20
18
 
21
19
  <html>
22
20
 
23
-
24
-
25
21
  <head>
26
22
 
27
23
  <meta charset="utf-8">
@@ -36,164 +32,298 @@
36
32
 
37
33
  </head>
38
34
 
39
-
40
-
41
35
  <body>
42
36
 
43
- <header>
37
+ <!-- メインメニュースタート -->
44
-
45
- <div>
38
+
46
-
47
- <p class="description">“地域に根付いた歯科医院” デンタル クリニック</p>
39
+ <div class="main-menu">
40
+
48
-
41
+ <nav class="menu">
42
+
49
- <h1>
43
+ <ul>
50
-
51
- <a href="dentalclinic.html">
44
+
52
-
53
- <img class="sitetitle" src="https://haniwaman.com/sample/part3/template_08/common/images/siteTitle.png" alt="siteTitle.png">
45
+ <li><a class="menu-left" href="file:///C:/Users/U%E3%81%8D/OneDrive/MENTA/MENTA%E8%AA%B2%E9%A1%8C(dentalclinic)/index.html">トップページ<br><span>HOME</span></a></li>
46
+
54
-
47
+ <li><a href="file:///C:/Users/U%E3%81%8D/OneDrive/MENTA/MENTA%E8%AA%B2%E9%A1%8C(dentalclinic)/clinic.html">医院紹介<br><span>CLINIC</span></a></li>
48
+
49
+ <li><a href="">診療案内<br><span>SERVICE</span></a></li>
50
+
51
+ <li><a href="">院長・スタッフ紹介<br><span>STAFF</span></a></li>
52
+
53
+ <li><a class="menu-right" href="">アクセス<br><span>ACCESS</span></a></li>
54
+
55
+ </ul>
56
+
55
- </a>
57
+ </nav>
58
+
56
-
59
+ </div>
60
+
61
+ <!-- メインメニューラスト -->
62
+
63
+ <!-- メインflexboxスタート -->
64
+
65
+ <div class="main-wrapper">
66
+
67
+ <!-- 左メニュー上下flexboxスタート -->
68
+
69
+ <div class="side-menu-box">
70
+
71
+ <!-- 左のメニュー上側スタート -->
72
+
73
+ <div class="side-menu1">
74
+
75
+ <h2><span class="margin-15"></span>一般歯科</h2>
76
+
77
+ <ul>
78
+
79
+  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>虫歯治療</a></li>
80
+
81
+  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>歯周病治療</a></li>
82
+
83
+  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>入れ歯</a></li>
84
+
85
+  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>予防歯科</a></li>
86
+
57
- </h1>
87
+ </ul>
88
+
58
-
89
+ </div>
90
+
91
+ <!-- 左のメニュー上側ラスト -->
92
+
93
+ <!-- 左のメニュー下側スタート -->
94
+
95
+ <div class="side-menu2">
96
+
97
+ <h2><span class="margin-15"></span>審美歯科</h2>
98
+
99
+ <ul>
100
+
101
+   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>ホワイトニング</a></li>
102
+
103
+   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>オールセラミック</a></li>
104
+
105
+   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>セラミックインレー</a></li>
106
+
59
- <p class="tel"><span class="margin-15"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgTel.png"></span>03-0000-0000</p>
107
+   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>PMTC</a></li>
108
+
60
-
109
+ </ul>
110
+
111
+ </div>
112
+
61
- <p class="time">予約受付時間 10:00~19:30 <span>日祝 休診</span></p>
113
+ <!-- 左のメニュー下側ラスト -->
62
114
 
63
115
  </div>
64
116
 
65
- </header>
117
+ <!-- 左メニュー上下flexboxラスト -->
118
+
66
-
119
+ <!-- 画像と新着情報のflexboxスタート -->
120
+
121
+   <div class="mainImage-whatsNew-box">
122
+
67
- <!-- メインメニュースタート -->
123
+ <!-- メイン画像スタート -->
68
-
124
+
69
- <div class="main-menu">
125
+ <div class="mainImage">
126
+
70
-
127
+ <img src="https://haniwaman.com/sample/part3/template_08/common/images/in01.jpg" alt="mainImage">
128
+
129
+ </div>
130
+
131
+ <!-- メイン画像ラスト -->
132
+
133
+ <!-- 新着情報スタート -->
134
+
71
- <nav class="menu">
135
+ <div class="whatsNew">
136
+
72
-
137
+ <h2>新着情報</h2>
138
+
73
- <ul>
139
+ <ul>
74
-
75
- <li><a class="menu-left" href="file:///C:/Users/U%E3%81%8D/OneDrive/MENTA/MENTA%E8%AA%B2%E9%A1%8C(dentalclinic)/index.html">トップページ<br><span>HOME</span></a></li>
140
+
76
-
77
- <li><a href="file:///C:/Users/U%E3%81%8D/OneDrive/MENTA/MENTA%E8%AA%B2%E9%A1%8C(dentalclinic)/clinic.html">医院紹介<br><span>CLINIC</span></a></li>
141
+ <li><span>2020年08月01日</span>[診療時間変更のお知らせ]長期休診の前日8月11日は、通常より1時間長く診療することにしました。ご予約をお待ちしております。</li>
142
+
78
-
143
+ <li><span>2020年07月24日</span>[8月の休診のお知らせ]8月12日~16日の間は休診とさせていただきます。何卒よろしくお願いします。</li>
144
+
145
+ <li><span>2020年07月02日</span>[こどもデンタル教室のご案内]毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</li>
146
+
79
- <li><a href="">診療案内<br><span>SERVICE</span></a></li>
147
+ <li><span>2020年06月20日</span>[7月休診日のお知らせ]7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</li>
80
-
148
+
81
- <li><a href="">院長・スタッフ紹介<br><span>STAFF</span></a></li>
149
+ <li><span>2020年06月01日</span>ホームページをリニューアルしました。</li>
82
-
83
- <li><a class="menu-right" href="">アクセス<br><span>ACCESS</span></a></li>
150
+
84
-
85
- </ul>
151
+ </ul>
86
-
152
+
87
- </nav>
153
+ </div>
154
+
155
+ <!-- 新着情報ラスト -->
156
+
157
+ </div>
158
+
159
+ <!-- 画像と新着情報のflexboxラスト -->
88
160
 
89
161
  </div>
90
162
 
91
- <!-- メインメニューラスト -->
92
-
93
- <!-- メインflexboxスタート -->
94
-
95
- <div class="main-wrapper">
96
-
97
- <!-- 左メニュー上下flexboxスタート -->
98
-
99
- <div class="side-menu-box">
100
-
101
- <!-- 左のメニュー上側スタート -->
102
-
103
- <div class="side-menu1">
104
-
105
- <h2><span class="margin-15"></span>一般歯科</h2>
106
-
107
- <ul>
108
-
109
-  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>虫歯治療</a></li>
110
-
111
-  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>歯周病治療</a></li>
112
-
113
-  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>入れ歯</a></li>
114
-
115
-  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>予防歯科</a></li>
116
-
117
- </ul>
118
-
119
- </div>
120
-
121
- <!-- 左のメニュー上側ラスト -->
122
-
123
- <!-- 左のメニュー下側スタート -->
124
-
125
- <div class="side-menu2">
126
-
127
- <h2><span class="margin-15"></span>審美歯科</h2>
128
-
129
- <ul>
130
-
131
-   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>ホワイトニング</a></li>
132
-
133
-   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>オールセラミック</a></li>
134
-
135
-   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>セラミックインレー</a></li>
136
-
137
-   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>PMTC</a></li>
138
-
139
- </ul>
140
-
141
- </div>
142
-
143
- <!-- 左のメニュー下側ラスト -->
144
-
145
- </div>
146
-
147
- <!-- 左メニュー上下flexboxラスト -->
148
-
149
- <!-- 画像と新着情報のflexboxスタート -->
150
-
151
-   <div class="mainImage-whatsNew-box">
152
-
153
- <!-- メイン画像スタート -->
154
-
155
- <div class="mainImage">
156
-
157
- <img src="https://haniwaman.com/sample/part3/template_08/common/images/in01.jpg" alt="mainImage">
158
-
159
- </div>
160
-
161
- <!-- メイン画像ラスト -->
162
-
163
- <!-- 新着情報スタート -->
164
-
165
- <div class="whatsNew">
166
-
167
- <h2>新着情報</h2>
168
-
169
- <ul>
170
-
171
- <li><span>2020年08月01日</span>[診療時間変更のお知らせ]長期休診の前日8月11日は、通常より1時間長く診療することにしました。ご予約をお待ちしております。</li>
172
-
173
- <li><span>2020年07月24日</span>[8月の休診のお知らせ]8月12日~16日の間は休診とさせていただきます。何卒よろしくお願いします。</li>
174
-
175
- <li><span>2020年07月02日</span>[こどもデンタル教室のご案内]毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</li>
176
-
177
- <li><span>2020年06月20日</span>[7月休診日のお知らせ]7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</li>
178
-
179
- <li><span>2020年06月01日</span>ホームページをリニューアルしました。</li>
180
-
181
- </ul>
182
-
183
- </div>
184
-
185
- <!-- 新着情報ラスト -->
186
-
187
- </div>
188
-
189
- <!-- 画像と新着情報のflexboxラスト -->
190
-
191
- </div>
192
-
193
163
  <!-- メインflexboxラスト -->
194
164
 
195
165
  ```
196
166
 
167
+ ```resetCSS
168
+
169
+ html, body, div, span, object, iframe,
170
+
171
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
172
+
173
+ abbr, address, cite, code,
174
+
175
+ del, dfn, em, img, ins, kbd, q, samp,
176
+
177
+ small, strong, sub, sup, var,
178
+
179
+ b, i,
180
+
181
+ dl, dt, dd, ol, ul, li,
182
+
183
+ fieldset, form, label, legend,
184
+
185
+ table, caption, tbody, tfoot, thead, tr, th, td,
186
+
187
+ article, aside, canvas, details, figcaption, figure,
188
+
189
+ footer, header, hgroup, menu, nav, section, summary,
190
+
191
+ time, mark, audio, video {
192
+
193
+ margin:0;
194
+
195
+ padding:0;
196
+
197
+ border:0;
198
+
199
+ outline:0;
200
+
201
+ font-size:100%;
202
+
203
+ vertical-align:baseline;
204
+
205
+ background:transparent;
206
+
207
+ }
208
+
209
+ body {
210
+
211
+ line-height:1;
212
+
213
+ }
214
+
215
+ article,aside,details,figcaption,figure,
216
+
217
+ footer,header,hgroup,menu,nav,section {
218
+
219
+ display:block;
220
+
221
+ }
222
+
223
+ nav ul {
224
+
225
+ list-style:none;
226
+
227
+ }
228
+
229
+ blockquote, q {
230
+
231
+ quotes:none;
232
+
233
+ }
234
+
235
+ blockquote:before, blockquote:after,
236
+
237
+ q:before, q:after {
238
+
239
+ content:'';
240
+
241
+ content:none;
242
+
243
+ }
244
+
245
+ a {
246
+
247
+ margin:0;
248
+
249
+ padding:0;
250
+
251
+ font-size:100%;
252
+
253
+ vertical-align:baseline;
254
+
255
+ background:transparent;
256
+
257
+ }
258
+
259
+ ins {
260
+
261
+ background-color:#ff9;
262
+
263
+ color:#000;
264
+
265
+ text-decoration:none;
266
+
267
+ }
268
+
269
+ mark {
270
+
271
+ background-color:#ff9;
272
+
273
+ color:#000;
274
+
275
+ font-style:italic;
276
+
277
+ font-weight:bold;
278
+
279
+ }
280
+
281
+ del {
282
+
283
+ text-decoration: line-through;
284
+
285
+ }
286
+
287
+ abbr[title], dfn[title] {
288
+
289
+ border-bottom:1px dotted;
290
+
291
+ cursor:help;
292
+
293
+ }
294
+
295
+ table {
296
+
297
+ border-collapse:collapse;
298
+
299
+ border-spacing:0;
300
+
301
+ }
302
+
303
+ hr {
304
+
305
+ display:block;
306
+
307
+ height:1px;
308
+
309
+ border:0;
310
+
311
+ border-top:1px solid #cccccc;
312
+
313
+ margin:1em 0;
314
+
315
+ padding:0;
316
+
317
+ }
318
+
319
+ input, select {
320
+
321
+ vertical-align:middle;
322
+
323
+ }
324
+
325
+ ```
326
+
197
327
  ```CSS
198
328
 
199
329
  body {
@@ -208,16 +338,12 @@
208
338
 
209
339
  }
210
340
 
211
-
212
-
213
341
  .margin-10 {
214
342
 
215
343
  margin-right: 10px;
216
344
 
217
345
  }
218
346
 
219
-
220
-
221
347
  .margin-15 {
222
348
 
223
349
  margin-right: 15px;
@@ -226,482 +352,358 @@
226
352
 
227
353
 
228
354
 
229
- /* headerスタート */
355
+ /* メインメニュースタート */
356
+
230
-
357
+ .menu ul {
358
+
359
+ display: flex;
360
+
361
+ justify-content: center;
362
+
363
+ padding-top: 18px;
364
+
365
+ }
366
+
231
- .description {
367
+ .menu ul li a {
368
+
232
-
369
+ display: block;
370
+
371
+ width: 182px;
372
+
373
+ background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
374
+
375
+ text-align: center;
376
+
233
- border-top: solid 8px #6CC6C4;
377
+ border: solid 1px #6CC6C4;
378
+
379
+ cursor: pointer;
380
+
381
+ padding: 20px 0px;
382
+
383
+ color: #FFFFFF;
384
+
385
+ text-decoration: none;
386
+
387
+ font-weight: 700;
388
+
389
+ font-size: 14px;
390
+
391
+ line-height: 15px;
392
+
393
+ }
394
+
395
+ .menu ul li a span {
234
396
 
235
397
  font-size: 10px;
236
398
 
237
- padding-left: 875px;
238
-
239
- padding-top: 15px;
240
-
241
- }
242
-
243
-
244
-
245
- .sitetitle {
246
-
247
- padding-top: 25px;
248
-
249
- padding-left: 171px;
399
+ line-height: 15px;
400
+
401
+ }
402
+
403
+ .menu ul li a:hover {
404
+
405
+ background: linear-gradient(rgb(108, 198, 196), rgb(156, 227, 225));
406
+
407
+ }
408
+
409
+ .menu-left {
410
+
411
+ border-top-left-radius: 6px;
412
+
413
+ border-bottom-left-radius: 6px;
414
+
415
+ }
416
+
417
+ .menu-right {
418
+
419
+ border-bottom-right-radius: 6px;
420
+
421
+ border-top-right-radius: 6px;
422
+
423
+ }
424
+
425
+ .main-menu p {
426
+
427
+ font-size: 10px;
428
+
429
+ margin-left: 175px;
430
+
431
+ }
432
+
433
+ /*メインメニューラスト*/
434
+
435
+ /* メインflexboxスタート */
436
+
437
+ .main-wrapper {
438
+
439
+ display: flex;
440
+
441
+ width: 920px;
442
+
443
+ margin: 0 auto;
444
+
445
+ margin-top: 20px;
446
+
447
+ }
448
+
449
+ /* メインflexboxラスト */
450
+
451
+ .side-menu-box {
452
+
453
+ display: flex;
454
+
455
+ flex-direction: column;
456
+
457
+ }
458
+
459
+ /*左メニュー上側スタート*/
460
+
461
+ .side-menu1 {
462
+
463
+ border: solid 1px #6CC6C4;
464
+
465
+ width: 260px;
466
+
467
+ border-top-right-radius: 6px;
468
+
469
+ border-top-left-radius: 6px;
470
+
471
+ background-color: #FFFFFF;
472
+
473
+ }
474
+
475
+ .side-menu1 h2 {
476
+
477
+ background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
478
+
479
+ color: #FFFFFF;
480
+
481
+ border-top-right-radius: 6px;
482
+
483
+ border-top-left-radius: 6px;
484
+
485
+ font-size: 16px;
486
+
487
+ padding: 10px 0px;
488
+
489
+ line-height: 22px;
490
+
491
+ }
492
+
493
+ .side-menu1 ul {
494
+
495
+ list-style: none;
496
+
497
+ padding-bottom: 20px;
498
+
499
+ margin-left: 15px;
500
+
501
+ }
502
+
503
+ .side-menu1 ul li a {
504
+
505
+ text-decoration: none;
506
+
507
+ color: #515151;
508
+
509
+ font-weight: 700;
510
+
511
+ font-size: 14px;
512
+
513
+ border-bottom: solid 1px #6CC6C4;
514
+
515
+ width: 234px;
516
+
517
+ display: block;
518
+
519
+ padding-bottom: 13px;
520
+
521
+ color: #595959;
522
+
523
+ }
524
+
525
+ .side-menu1 ul li a:hover {
526
+
527
+ color: #6cc6c4;
528
+
529
+ }
530
+
531
+ .side-menu1 ul li a img {
532
+
533
+ padding-left: 5px;
534
+
535
+ }
536
+
537
+ /* 左メニュー上側ラスト */
538
+
539
+ /* 左メニュー下側スタート */
540
+
541
+ .side-menu2 {
542
+
543
+ border: solid 1px #6CC6C4;
544
+
545
+ width: 260px;
546
+
547
+ border-top-right-radius: 6px;
548
+
549
+ border-top-left-radius: 6px;
550
+
551
+ background-color: #FFFFFF;
552
+
553
+ margin-top: 20px;
554
+
555
+ }
556
+
557
+ .side-menu2 h2 {
558
+
559
+ background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
560
+
561
+ color: #FFFFFF;
562
+
563
+ border-top-right-radius: 6px;
564
+
565
+ border-top-left-radius: 6px;
566
+
567
+ font-size: 16px;
568
+
569
+ padding: 10px 0px;
570
+
571
+ line-height: 22px;
572
+
573
+ }
574
+
575
+ .side-menu2 ul {
576
+
577
+ list-style: none;
578
+
579
+ padding-bottom: 20px;
580
+
581
+ margin-left: 15px;
582
+
583
+ }
584
+
585
+ .side-menu2 ul li a {
586
+
587
+ text-decoration: none;
588
+
589
+ color: #515151;
590
+
591
+ font-weight: 700;
592
+
593
+ font-size: 14px;
594
+
595
+ border-bottom: solid 1px #6CC6C4;
596
+
597
+ width: 234px;
598
+
599
+ display: block;
600
+
601
+ padding-bottom: 13px;
602
+
603
+ color: #595959;
604
+
605
+ }
606
+
607
+ .side-menu2 ul li a:hover {
608
+
609
+ color: #aec24c;
610
+
611
+ }
612
+
613
+ .side-menu2 ul li a img {
614
+
615
+ padding-left: 5px;
616
+
617
+ }
618
+
619
+ /* 左メニュー下側ラスト */
620
+
621
+ /* 画像と新着情報のflexboxスタート */
622
+
623
+ .mainImage-whatsNew-box {
624
+
625
+ display: flex;
626
+
627
+ flex-direction: column;
628
+
629
+ width: 640px;
630
+
631
+ }
632
+
633
+ /* 画像と新着情報のflexboxラスト */
634
+
635
+ /* メイン画像スタート */
636
+
637
+ .mainImage {
638
+
639
+ display: block;
640
+
641
+ }
642
+
643
+ /* メイン画像ラスト */
644
+
645
+ /* 新着情報スタート */
646
+
647
+ .whatsNew {
648
+
649
+ width: 600px;
650
+
651
+ background-color: #FFFFFF;
652
+
653
+ padding: 20px 20px 45px 20px;
654
+
655
+ margin-top: 10px;
656
+
657
+ }
658
+
659
+ .whatsNew h2 {
660
+
661
+ border-bottom: solid 3px #6CC6C4;
662
+
663
+ padding: 0 20px;
664
+
665
+ font-size: 16px;
666
+
667
+ font-weight: 700;
668
+
669
+ text-align: left;
670
+
671
+ line-height: 50px;
672
+
673
+ margin-bottom: 15px;
674
+
675
+ }
676
+
677
+ .whatsNew ul li {
678
+
679
+ font-size: 13px;
680
+
681
+ border-bottom: dotted 1px #CCCCCC;
682
+
683
+ list-style: none;
684
+
685
+ padding: 15px 0;
686
+
687
+ line-height: 20px;
688
+
689
+ }
690
+
691
+ .whatsNew ul li span {
692
+
693
+ font-weight: 700;
694
+
695
+ font-size: 13px;
696
+
697
+ padding-right: 31px;
698
+
699
+ line-height: 23px;
700
+
701
+ display: block;
250
702
 
251
703
  float: left;
252
704
 
253
705
  }
254
706
 
255
-
256
-
257
- .tel {
258
-
259
- font-size: 26px;
260
-
261
- padding-left: 870px;
262
-
263
- padding-top: 18px;
264
-
265
- }
266
-
267
-
268
-
269
- .time {
270
-
271
- font-size: 10px;
272
-
273
- border: solid 1px #D6D6D6;
274
-
275
- text-align: center;
276
-
277
- width: 222px;
278
-
279
- margin-left: 872px;
280
-
281
- margin-top: 10px;
282
-
283
- padding: 9px 0px;
284
-
285
- }
286
-
287
-
288
-
289
- .time span {
290
-
291
- color: #b22c00ed;
292
-
293
- }
294
-
295
-
296
-
297
- /* headerラスト */
298
-
299
- /* メインメニュースタート */
300
-
301
- .menu ul {
302
-
303
- display: flex;
304
-
305
- justify-content: center;
306
-
307
- padding-top: 18px;
308
-
309
- }
310
-
311
-
312
-
313
- .menu ul li a {
314
-
315
- display: block;
316
-
317
- width: 182px;
318
-
319
- background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
320
-
321
- text-align: center;
322
-
323
- border: solid 1px #6CC6C4;
324
-
325
- cursor: pointer;
326
-
327
- padding: 20px 0px;
328
-
329
- color: #FFFFFF;
330
-
331
- text-decoration: none;
332
-
333
- font-weight: 700;
334
-
335
- font-size: 14px;
336
-
337
- line-height: 15px;
338
-
339
- }
340
-
341
-
342
-
343
- .menu ul li a span {
344
-
345
- font-size: 10px;
346
-
347
- line-height: 15px;
348
-
349
- }
350
-
351
-
352
-
353
- .menu ul li a:hover {
354
-
355
- background: linear-gradient(rgb(108, 198, 196), rgb(156, 227, 225));
356
-
357
- }
358
-
359
-
360
-
361
- .menu-left {
362
-
363
- border-top-left-radius: 6px;
364
-
365
- border-bottom-left-radius: 6px;
366
-
367
- }
368
-
369
-
370
-
371
- .menu-right {
372
-
373
- border-bottom-right-radius: 6px;
374
-
375
- border-top-right-radius: 6px;
376
-
377
- }
378
-
379
-
380
-
381
- .main-menu p {
382
-
383
- font-size: 10px;
384
-
385
- margin-left: 175px;
386
-
387
- }
388
-
389
-
390
-
391
- /*メインメニューラスト*/
392
-
393
- /* メインflexboxスタート */
394
-
395
- .main-wrapper {
396
-
397
- display: flex;
398
-
399
- width: 920px;
400
-
401
- margin: 0 auto;
402
-
403
- margin-top: 20px;
404
-
405
- }
406
-
407
-
408
-
409
- /* メインflexboxラスト */
410
-
411
- .side-menu-box {
412
-
413
- display: flex;
414
-
415
- flex-direction: column;
416
-
417
- }
418
-
419
-
420
-
421
- /*左メニュー上側スタート*/
422
-
423
- .side-menu1 {
424
-
425
- border: solid 1px #6CC6C4;
426
-
427
- width: 260px;
428
-
429
- border-top-right-radius: 6px;
430
-
431
- border-top-left-radius: 6px;
432
-
433
- background-color: #FFFFFF;
434
-
435
- }
436
-
437
-
438
-
439
- .side-menu1 h2 {
440
-
441
- background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
442
-
443
- color: #FFFFFF;
444
-
445
- border-top-right-radius: 6px;
446
-
447
- border-top-left-radius: 6px;
448
-
449
- font-size: 16px;
450
-
451
- padding: 10px 0px;
452
-
453
- line-height: 22px;
454
-
455
- }
456
-
457
-
458
-
459
- .side-menu1 ul {
460
-
461
- list-style: none;
462
-
463
- padding-bottom: 20px;
464
-
465
- margin-left: 15px;
466
-
467
- }
468
-
469
-
470
-
471
- .side-menu1 ul li a {
472
-
473
- text-decoration: none;
474
-
475
- color: #515151;
476
-
477
- font-weight: 700;
478
-
479
- font-size: 14px;
480
-
481
- border-bottom: solid 1px #6CC6C4;
482
-
483
- width: 234px;
484
-
485
- display: block;
486
-
487
- padding-bottom: 13px;
488
-
489
- color: #595959;
490
-
491
- }
492
-
493
-
494
-
495
- .side-menu1 ul li a:hover {
496
-
497
- color: #6cc6c4;
498
-
499
- }
500
-
501
-
502
-
503
- .side-menu1 ul li a img {
504
-
505
- padding-left: 5px;
506
-
507
- }
508
-
509
-
510
-
511
- /* 左メニュー上側ラスト */
512
-
513
- /* 左メニュー下側スタート */
514
-
515
- .side-menu2 {
516
-
517
- border: solid 1px #6CC6C4;
518
-
519
- width: 260px;
520
-
521
- border-top-right-radius: 6px;
522
-
523
- border-top-left-radius: 6px;
524
-
525
- background-color: #FFFFFF;
526
-
527
- margin-top: 20px;
528
-
529
- }
530
-
531
-
532
-
533
- .side-menu2 h2 {
534
-
535
- background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196));
536
-
537
- color: #FFFFFF;
538
-
539
- border-top-right-radius: 6px;
540
-
541
- border-top-left-radius: 6px;
542
-
543
- font-size: 16px;
544
-
545
- padding: 10px 0px;
546
-
547
- line-height: 22px;
548
-
549
- }
550
-
551
-
552
-
553
- .side-menu2 ul {
554
-
555
- list-style: none;
556
-
557
- padding-bottom: 20px;
558
-
559
- margin-left: 15px;
560
-
561
- }
562
-
563
-
564
-
565
- .side-menu2 ul li a {
566
-
567
- text-decoration: none;
568
-
569
- color: #515151;
570
-
571
- font-weight: 700;
572
-
573
- font-size: 14px;
574
-
575
- border-bottom: solid 1px #6CC6C4;
576
-
577
- width: 234px;
578
-
579
- display: block;
580
-
581
- padding-bottom: 13px;
582
-
583
- color: #595959;
584
-
585
- }
586
-
587
-
588
-
589
- .side-menu2 ul li a:hover {
590
-
591
- color: #aec24c;
592
-
593
- }
594
-
595
-
596
-
597
- .side-menu2 ul li a img {
598
-
599
- padding-left: 5px;
600
-
601
- }
602
-
603
-
604
-
605
- /* 左メニュー下側ラスト */
606
-
607
- /* 画像と新着情報のflexboxスタート */
608
-
609
- .mainImage-whatsNew-box {
610
-
611
- display: flex;
612
-
613
- flex-direction: column;
614
-
615
- width: 640px;
616
-
617
- }
618
-
619
-
620
-
621
- /* 画像と新着情報のflexboxラスト */
622
-
623
- /* メイン画像スタート */
624
-
625
- .mainImage {
626
-
627
- display: block;
628
-
629
- }
630
-
631
-
632
-
633
- /* メイン画像ラスト */
634
-
635
- /* 新着情報スタート */
636
-
637
- .whatsNew {
638
-
639
- width: 600px;
640
-
641
- background-color: #FFFFFF;
642
-
643
- padding: 20px 20px 45px 20px;
644
-
645
- margin-top: 10px;
646
-
647
- }
648
-
649
-
650
-
651
- .whatsNew h2 {
652
-
653
- border-bottom: solid 3px #6CC6C4;
654
-
655
- padding: 0 20px;
656
-
657
- font-size: 16px;
658
-
659
- font-weight: 700;
660
-
661
- text-align: left;
662
-
663
- line-height: 50px;
664
-
665
- margin-bottom: 15px;
666
-
667
- }
668
-
669
-
670
-
671
- .whatsNew ul li {
672
-
673
- font-size: 13px;
674
-
675
- border-bottom: dotted 1px #CCCCCC;
676
-
677
- list-style: none;
678
-
679
- padding: 15px 0;
680
-
681
- line-height: 20px;
682
-
683
- }
684
-
685
-
686
-
687
- .whatsNew ul li span {
688
-
689
- font-weight: 700;
690
-
691
- font-size: 13px;
692
-
693
- padding-right: 31px;
694
-
695
- line-height: 23px;
696
-
697
- display: block;
698
-
699
- float: left;
700
-
701
- }
702
-
703
-
704
-
705
707
  /* 新着情報ラスト */
706
708
 
707
709
  ```