質問編集履歴

3

2021/07/28 02:45

投稿

nob_0112
nob_0112

スコア5

test CHANGED
File without changes
test CHANGED
@@ -618,6 +618,232 @@
618
618
 
619
619
  ```
620
620
 
621
- コード
621
+ ```html
622
+
623
+ <!doctype html>
624
+
625
+
626
+
627
+ <html lang="ja">
628
+
629
+ <head>
630
+
631
+ <meta chaset="UTF-8">
632
+
633
+ <title>WCB Cafe-NEWS</title>
634
+
635
+ <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
636
+
637
+ <meta name="viewport" content="width=device-width, initial-scale=1">
638
+
639
+ <link rel="stylesheet"href="https://unpkg.com/ress/dist/ress.min.css">
640
+
641
+ <link href="css/style.css" rel="stylesheet">
642
+
643
+ </head>
644
+
645
+
646
+
647
+ <body>
648
+
649
+ <div id="news" class="big-bg">
650
+
651
+ <header class="page-header wrapper">
652
+
653
+ <h1><a href="index.html"><img class="logo" src="image/logo.svg"alt="WCBカフェホーム"></a></h1>
654
+
655
+ <nav>
656
+
657
+ <ul class="main-nav">
658
+
659
+ <li><a href="news.html">news</a></li>
660
+
661
+ <li><a href="menu.html">Menu</a></li>
662
+
663
+ <li><a href="contact.html">contact</a></li>
664
+
665
+ </ul>
666
+
667
+ </nav>
668
+
669
+ </header>
670
+
671
+ <div class="wrapper">
672
+
673
+ <h2 class="page-title">News</h2>
674
+
675
+ </div><!-- /.wrapper-->
676
+
677
+ </div><!-- /#home-->
678
+
679
+ <div class="news-contents wrapper">
680
+
681
+ <article>
682
+
683
+ <header class="post-info">
684
+
685
+ <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
686
+
687
+ <p class="post-date">3/30<span>2019</span></p>
688
+
689
+ <p class="post-cat">カテゴリー:お店の紹介</p>
690
+
691
+ </header>
692
+
693
+ <img src="image/wall.jpg" alt="店内の様子">
694
+
695
+ <p>
696
+
697
+ 体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
698
+
699
+ おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
700
+
701
+ 体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
702
+
703
+ おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
704
+
705
+ </p>
706
+
707
+ <p>
708
+
709
+ 体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
710
+
711
+ おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
712
+
713
+ 体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
714
+
715
+ おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
716
+
717
+ 体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
718
+
719
+ おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
720
+
721
+ </p>
722
+
723
+ <p>体に優しい自然食を提供する、WCB CAFE。</p>
724
+
725
+  </article>
726
+
727
+
728
+
729
+ <aside>
730
+
731
+ <h3 class="sub-title">カテゴリー</h3>
732
+
733
+ <ul class="sub-menu">
734
+
735
+ <li><a href="#">お店の紹介</a></li>
736
+
737
+ <li><a href="#">期間限定メニュー</a></li>
738
+
739
+ <li><a href="#">イベント</a></li>
740
+
741
+ <li><a href="#">お客様との会話</a></li>
742
+
743
+ </ul>
744
+
745
+ <h3 class="sub-title">このお店について</h3>
746
+
747
+ <p>
748
+
749
+ 体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
750
+
751
+ おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
752
+
753
+ </p>
754
+
755
+ </aside>
756
+
757
+ <div class="ad">
758
+
759
+ <img src="image/banner.jpg" alt="新メニュー登場">
760
+
761
+ </div>
762
+
763
+ </div><!-- /.news-contents-->
764
+
765
+ <footer>
766
+
767
+ <div class="wrapper">
768
+
769
+ <p><small>&copy;2019 Manabox</small></p>
770
+
771
+ </div>
772
+
773
+ </footer>
774
+
775
+ </body>
776
+
777
+ </html>
778
+
779
+
622
780
 
623
781
  ```
782
+
783
+ ```html
784
+
785
+ <!doctype html>
786
+
787
+
788
+
789
+ <html lang="ja">
790
+
791
+ <head>
792
+
793
+ <meta chaset="UTF-8">
794
+
795
+ <title>WCB Cafe</title>
796
+
797
+ <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
798
+
799
+ <meta name="viewport" content="width=device-width, initial-scale=1">
800
+
801
+ <link rel="stylesheet"href="https://unpkg.com/ress/dist/ress.min.css">
802
+
803
+ <link href="css/style.css" rel="stylesheet">
804
+
805
+ </head>
806
+
807
+
808
+
809
+ <body>
810
+
811
+ <div id="home" class="big-bg">
812
+
813
+ <header class="page-header wrapper">
814
+
815
+ <h1><a href="index.html"><img class="logo" src="image/logo.svg"alt="WCBカフェホーム"></a></h1>
816
+
817
+ <nav>
818
+
819
+ <ul class="main-nav">
820
+
821
+ <li><a href="news.html">news</a></li>
822
+
823
+ <li><a href="menu.html">Menu</a></li>
824
+
825
+ <li><a href="contact.html">contact</a></li>
826
+
827
+ </ul>
828
+
829
+ </nav>
830
+
831
+ </header>
832
+
833
+ <div class="home-content wrapper">
834
+
835
+ <h2 class="page-title">We'll Make Your Day</h2>
836
+
837
+ <p>おしゃれなカフェで癒されてみませんか?無添加の食材で体の中からリフレッシュ。</p>
838
+
839
+ <a class="button" href="menu.html">メニューを見る</a>
840
+
841
+ </div><!-- /.home-content -->
842
+
843
+ <div><!-- /#home-->
844
+
845
+ </body>
846
+
847
+ </html>
848
+
849
+ ```

2

2021/07/28 02:45

投稿

nob_0112
nob_0112

スコア5

test CHANGED
File without changes
test CHANGED
@@ -1,77 +1,623 @@
1
+ ```
2
+
3
+ <!doctype html>
4
+
5
+
6
+
7
+ <html lang="ja">
8
+
9
+ <head>
10
+
11
+ <meta chaset="UTF-8">
12
+
13
+ <title>WCB Cafe-MENU</title>
14
+
15
+ <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
16
+
17
+ <meta name="viewport" content="width=device-width, initial-scale=1">
18
+
19
+ <link rel="stylesheet"href="https://unpkg.com/ress/dist/ress.min.css">
20
+
21
+ <link href="css/style.css" rel="stylesheet">
22
+
23
+ </head>
24
+
25
+
26
+
27
+ <body>
28
+
29
+ <div id="menu" class="big-bg">
30
+
31
+ <header class="page-header wrapper">
32
+
33
+ <h1><a href="index.html"><img class="logo" src="image/logo.svg"alt="WCBカフェホーム"></a></h1>
34
+
35
+ <nav>
36
+
37
+ <ul class="main-nav">
38
+
39
+ <li><a href="news.html">news</a></li>
40
+
41
+ <li><a href="menu.html">Menu</a></li>
42
+
43
+ <li><a href="contact.html">contact</a></li>
44
+
45
+ </ul>
46
+
47
+ </nav>
48
+
49
+ </header>
50
+
51
+ <div class="menu-content wrapper">
52
+
53
+ <h2 class="page-title">Menu</h2>
54
+
55
+ <p>
56
+
57
+ 体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
58
+
59
+ おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒してください。
60
+
61
+ </p>
62
+
63
+ </div><!-- /.menu-content -->
64
+
65
+ </div><!-- /#menu -->
66
+
67
+
68
+
69
+
70
+
71
+ <footer>
72
+
73
+ <div class="wrapper">
74
+
75
+ <p><small>&copy;2019 Manabox</small></p>
76
+
77
+ </div>
78
+
79
+ </footer>
80
+
81
+ </body>
82
+
83
+ </html>
84
+
85
+ ```css**ボールドテキスト**
86
+
87
+
88
+
89
+ ```
90
+
91
+ @charset "UTF-8";
92
+
1
- ``html
93
+ html{
94
+
95
+ font-size: 100%;
96
+
97
+ }
98
+
99
+ body{
100
+
101
+ font-family:"Yu Gothic Medium";
102
+
103
+ color: #432;
104
+
105
+ }
106
+
107
+ a{
108
+
109
+ text-decoration: none;
110
+
111
+ }
112
+
113
+ img{
114
+
115
+ max-width: 100%;
116
+
117
+ }
118
+
119
+ .logo{
120
+
121
+ width:210px;
122
+
123
+ margin-top:14px;
124
+
125
+ }
126
+
127
+ .main-nav{
128
+
129
+ display: flex;
130
+
131
+ font-size:1.25rem;
132
+
133
+ text-transform: uppercase;
134
+
135
+ margin-top: 34px;
136
+
137
+ list-style: none;
138
+
139
+ }
140
+
141
+ .main-nav li{
142
+
143
+ margin-left: 36px;
144
+
145
+ }
146
+
147
+ .main-nav a {
148
+
149
+ color:#432;
150
+
151
+ }
152
+
153
+ .main-nav a:hover{
154
+
155
+ color:#0bd;
156
+
157
+ }
158
+
159
+ .page-header{
160
+
161
+ display: flex;
162
+
163
+ justify-content:space-between;
164
+
165
+ }
166
+
167
+ .wrapper{
168
+
169
+ max-width:1100px
170
+
171
+ margin:0 auto;
172
+
173
+ padding: 0 4%;
174
+
175
+ }
176
+
177
+ /*home
178
+
179
+ ----------------------*/
180
+
181
+ .home-content{
182
+
183
+ text-align: center;
184
+
185
+ margin-top: 10%;
186
+
187
+ }
188
+
189
+ .home-content p{
190
+
191
+ font-size:1.125rem;
192
+
193
+ margin: 10px 0 42px;
194
+
195
+ }
196
+
197
+ .page-title{
198
+
199
+ font-size:5rem;
200
+
201
+ font-family:'Philosopher',serif;
202
+
203
+ text-transform:uppercase;
204
+
205
+ font-weight:normal;
206
+
207
+ }
208
+
209
+ .button{
210
+
211
+ font-size:1.375rem;
212
+
213
+ background: #0bd;
214
+
215
+ color:#fff;
216
+
217
+ border-radius: 5px;
218
+
219
+ padding: 18px 32px;
220
+
221
+ }
222
+
223
+ .button:hover{
224
+
225
+ background: #0090aa;
226
+
227
+ }
228
+
229
+ .big-bg{
230
+
231
+ background-size: cover;
232
+
233
+ background-position: center top;
234
+
235
+ background-repeat: no-repeat;
236
+
237
+ }
238
+
239
+ #home{
240
+
241
+ background-image: url(../image/main-bg.jpg);
242
+
243
+ min-height:100vh;
244
+
245
+ }
246
+
247
+ #news{
248
+
249
+ background-image: url(../image/news-bg.jpg);
250
+
251
+ height:270px;
252
+
253
+ margin-bottom:40px;
254
+
255
+ }
256
+
257
+ #news .page-title{
258
+
259
+ text-align: center;
260
+
261
+ }
262
+
263
+ footer{
264
+
265
+ background:#432;
266
+
267
+ text-align:center;
268
+
269
+ padding:26px 0;
270
+
271
+ }
272
+
273
+ footer p{
274
+
275
+ color:#fff;
276
+
277
+ font-size:0.875rem;
278
+
279
+ }
280
+
281
+ article{
282
+
283
+ width:74%;
284
+
285
+ }
286
+
287
+ aside{
288
+
289
+ width:22%;
290
+
291
+ }
292
+
293
+ .news-contents{
294
+
295
+ display:flex;
296
+
297
+ justify-content: space-between;
298
+
299
+ margin-bottom:50px;
300
+
301
+ }
302
+
303
+ .post-info{
304
+
305
+ position:relative;
306
+
307
+ padding-top:4px;
308
+
309
+ margin-bottom:40px;
310
+
311
+ }
312
+
313
+ .post-date{
314
+
315
+ background:#0bd;
316
+
317
+ border-radius:50%;
318
+
319
+ color:#fff;
320
+
321
+ width:100px;
322
+
323
+ height:100px;
324
+
325
+ font-size:1.625rem;
326
+
327
+ text-align:center;
328
+
329
+ position: absolute;
330
+
331
+ top:0;
332
+
333
+ padding-top:10px;
334
+
335
+ }
336
+
337
+ .post-date span{
338
+
339
+ font-size:1rem;
340
+
341
+ border-top:1px rgba(255,255,255,.5)solid ;
342
+
343
+ padding-top:6px;
344
+
345
+ display: block;
346
+
347
+ width:60%;
348
+
349
+ margin:0 auto;
350
+
351
+ }
352
+
353
+ .post-title{
354
+
355
+ font-family:"Yu Mincho",serif;
356
+
357
+ font-size:2rem;
358
+
359
+ font-weight:normal;
360
+
361
+ }
362
+
363
+ .post-title,
364
+
365
+ .post-cat{
366
+
367
+ margin-left:120px;
368
+
369
+ }
370
+
371
+ article img{
372
+
373
+ margin-bottom:20px;
374
+
375
+ }
376
+
377
+ article p{
378
+
379
+ margin-bottom:1rem;
380
+
381
+ }
382
+
383
+ .sub-title{
384
+
385
+ font-size:1.375rem;
386
+
387
+ padding:0 8px 8px;
388
+
389
+ border-bottom:2px #0bd solid;
390
+
391
+ font-weight:normal;
392
+
393
+ }
394
+
395
+ aside p{
396
+
397
+ padding: 12px 10px;
398
+
399
+ }
400
+
401
+ .sub-menu{
402
+
403
+ margin-bottom:60px;
404
+
405
+ list-style:none;
406
+
407
+ }
408
+
409
+ .sub-menu li{
410
+
411
+ border-bottom:1px #ddd solid;
412
+
413
+ }
414
+
415
+ .sub-menu a{
416
+
417
+ color:#432;
418
+
419
+ padding:10px;
420
+
421
+ display:block;
422
+
423
+ }
424
+
425
+ .sub-menu a:hover{
426
+
427
+ color:#0bd;
428
+
429
+ }
430
+
431
+ @media(max-width:600px) {
432
+
433
+ h1{
434
+
435
+ color:#0Bd;
436
+
437
+ }
438
+
439
+ }
440
+
441
+ /*モバイル版
442
+
443
+ --------------------------*/
444
+
445
+ @media(max-width:600px) {
446
+
447
+ .page-title{
448
+
449
+ font-size:2.5rem;
450
+
451
+ }
452
+
453
+ /*header*/
454
+
455
+ .main-nav{
456
+
457
+ font-size:1rem;
458
+
459
+ margin-top:10PX;
460
+
461
+ }
462
+
463
+ .main-nav li{
464
+
465
+ margin:0 20px;
466
+
467
+ }
468
+
469
+ .home-content{
470
+
471
+ margin-top:20%;
472
+
473
+ }
474
+
475
+ .page-header{
476
+
477
+ flex-direction:column;
478
+
479
+ align-items: center;
480
+
481
+ }
482
+
483
+ .news-contents{
484
+
485
+ flex-direction: column;
486
+
487
+ }
488
+
489
+ article,
490
+
491
+ aside{
492
+
493
+ width:100%;
494
+
495
+ }
496
+
497
+ #news page-title{
498
+
499
+ margin-top:30px;
500
+
501
+ }
502
+
503
+ aside{
504
+
505
+ margin-top: 60px;
506
+
507
+ }
508
+
509
+ .post-info{
510
+
511
+ margin-bottom: 30px;
512
+
513
+ }
514
+
515
+ .post-date{
516
+
517
+ width:70px;
518
+
519
+ height:70px;
520
+
521
+ font-size:1rem;
522
+
523
+ }
524
+
525
+ .post-date span{
526
+
527
+ font-size:0.875rem;
528
+
529
+ padding-top:2px;
530
+
531
+ }
532
+
533
+ .post-title{
534
+
535
+ font-size:1.375rem;
536
+
537
+ }
538
+
539
+ .post-cat{
540
+
541
+ font-size:0.875rem;
542
+
543
+ margin-top:10px;
544
+
545
+ }
546
+
547
+ .post-title,
548
+
549
+ .post-cat{
550
+
551
+ margin-left: 80px;
552
+
553
+ }
554
+
555
+ .menu-content{
556
+
557
+ margin-top:20%;
558
+
559
+ }
560
+
561
+ }
562
+
563
+ article{
564
+
565
+ width:60%;
566
+
567
+ order:2;
568
+
569
+ }
570
+
571
+ aside{
572
+
573
+ width:22%;
574
+
575
+ order:3;
576
+
577
+ }
578
+
579
+ .ad{
580
+
581
+ order:1;
582
+
583
+ }
584
+
585
+
586
+
587
+ /* Menu -------------------------------------- */
588
+
589
+ #menu {
590
+
591
+ background-image: url(../image/menu-bg.jpg);
592
+
593
+ min-height: 100vh;
594
+
595
+ }
596
+
597
+ .menu-content {
598
+
599
+ max-width:560px;
600
+
601
+ margin-top: 10%;
602
+
603
+ }
604
+
605
+ .menu-content .page-title{
606
+
607
+ text-align:center;
608
+
609
+ }
610
+
611
+ .menu-content p {
612
+
613
+ font-size: 1.125rem;
614
+
615
+ margin: 10px 0 0;
616
+
617
+ }
618
+
619
+ ```
2
620
 
3
621
  コード
4
622
 
5
623
  ```
6
-
7
- 【index】
8
-
9
- <!doctype html>```ここに言語を入力
10
-
11
- コード
12
-
13
- ```
14
-
15
- <html lang="ja">
16
-
17
- <head>
18
-
19
- <meta chaset="UTF-8">
20
-
21
- <title>WCB Cafe</title>
22
-
23
- <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
24
-
25
- <meta name="viewport" content="width=device-width, initial-scale=1">
26
-
27
- <link rel="stylesheet"href="https://unpkg.com/ress/dist/ress.min.css">
28
-
29
- <link href="css/style.css" rel="stylesheet">
30
-
31
- </head>
32
-
33
-
34
-
35
- <body>
36
-
37
- <div id="home" class="big-bg">
38
-
39
- <header class="page-header wrapper">
40
-
41
- <h1><a href="index.html"><img class="logo" src="image/logo.svg"alt="WCBカフェホーム"></a></h1>
42
-
43
- <nav>
44
-
45
- <ul class="main-nav">
46
-
47
- <li><a href="news.html">news</a></li>
48
-
49
- <li><a href="menu.html">Menu</a></li>
50
-
51
- <li><a href="contact.html">contact</a></li>
52
-
53
- </ul>
54
-
55
- </nav>
56
-
57
- </header>
58
-
59
- <div class="home-content wrapper">
60
-
61
- <h2 class="page-title">We'll Make Your Day</h2>
62
-
63
- <p>おしゃれなカフェで癒されてみませんか?無添加の食材で体の中からリフレッシュ。</p>
64
-
65
- <a class="button" href="menu.html">メニューを見る</a>
66
-
67
- </div><!-- /.home-content -->
68
-
69
- <div><!-- /#home-->
70
-
71
- </body>
72
-
73
- </html>
74
-
75
-
76
-
77
- 【】

1

2021/07/28 02:42

投稿

nob_0112
nob_0112

スコア5

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,11 @@
6
6
 
7
7
  【index】
8
8
 
9
- <!doctype html>
9
+ <!doctype html>```ここに言語を入力
10
+
11
+ コード
12
+
13
+ ```
10
14
 
11
15
  <html lang="ja">
12
16