質問編集履歴

2

開発途中のサイトをアップロードしてURLを貼り付けました。

2021/07/16 11:32

投稿

taka_oct092018
taka_oct092018

スコア136

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,10 @@
10
10
 
11
11
 
12
12
 
13
+ https://portfolio04222020.web.fc2.com/content_01/root/content_01.html
14
+
15
+
16
+
13
17
  ```
14
18
 
15
19
  <!DOCTYPE html>

1

必要ない箇所を削除しました。

2021/07/16 11:32

投稿

taka_oct092018
taka_oct092018

スコア136

test CHANGED
File without changes
test CHANGED
@@ -140,229 +140,535 @@
140
140
 
141
141
  @charset "utf-8";
142
142
 
143
- /*
144
-
145
- Program name : ウェブサイト「会員登録」のCSS
146
-
147
- Program description : ウェブサイト「会員登録」の装飾を施す
148
-
149
- Author : 岡村卓
150
-
151
- Creation date : 2000/00/00
152
-
153
- Validation : W3C Markup Validation Service
154
-
155
- : W3C CSS Validation Service
156
-
157
- Quotation : 「だから、そのデザインはダメなんだ。」 香西睦 著
158
-
159
- Supplement : 1.
160
-
161
- : 2.
143
+
144
+
145
+ /* -------------------- 【HTML5 Reset Stylesheet ver1.6.1】 ここから↓ -------------------- */
146
+
147
+ html,
148
+
149
+ body,
150
+
151
+ div,
152
+
153
+ span,
154
+
155
+ object,
156
+
157
+ iframe,
158
+
159
+ h1,
160
+
161
+ h2,
162
+
163
+ h3,
164
+
165
+ h4,
166
+
167
+ h5,
168
+
169
+ h6,
170
+
171
+ p,
172
+
173
+ blockquote,
174
+
175
+ pre,
176
+
177
+ abbr,
178
+
179
+ address,
180
+
181
+ cite,
182
+
183
+ code,
184
+
185
+ del,
186
+
187
+ dfn,
188
+
189
+ em,
190
+
191
+ img,
192
+
193
+ ins,
194
+
195
+ kbd,
196
+
197
+ q,
198
+
199
+ samp,
200
+
201
+ small,
202
+
203
+ strong,
204
+
205
+ sub,
206
+
207
+ sup,
208
+
209
+ var,
210
+
211
+ b,
212
+
213
+ i,
214
+
215
+ dl,
216
+
217
+ dt,
218
+
219
+ dd,
220
+
221
+ ol,
222
+
223
+ ul,
224
+
225
+ li,
226
+
227
+ fieldset,
228
+
229
+ form,
230
+
231
+ label,
232
+
233
+ legend,
234
+
235
+ table,
236
+
237
+ caption,
238
+
239
+ tbody,
240
+
241
+ tfoot,
242
+
243
+ thead,
244
+
245
+ tr,
246
+
247
+ th,
248
+
249
+ td,
250
+
251
+ article,
252
+
253
+ aside,
254
+
255
+ canvas,
256
+
257
+ details,
258
+
259
+ figcaption,
260
+
261
+ figure,
262
+
263
+ footer,
264
+
265
+ header,
266
+
267
+ hgroup,
268
+
269
+ menu,
270
+
271
+ nav,
272
+
273
+ section,
274
+
275
+ summary,
276
+
277
+ time,
278
+
279
+ mark,
280
+
281
+ audio,
282
+
283
+ video {
284
+
285
+ background : transparent;
286
+
287
+ border : 0;
288
+
289
+ font-size : 100%;
290
+
291
+ margin : 0;
292
+
293
+ outline : 0;
294
+
295
+ padding : 0;
296
+
297
+ vertical-align : baseline;
298
+
299
+ }
300
+
301
+
302
+
303
+ body {
304
+
305
+ line-height: 1;
306
+
307
+ }
308
+
309
+
310
+
311
+ article,
312
+
313
+ aside,
314
+
315
+ details,
316
+
317
+ figcaption,
318
+
319
+ figure,
320
+
321
+ footer,
322
+
323
+ header,
324
+
325
+ hgroup,
326
+
327
+ menu,
328
+
329
+ nav,
330
+
331
+ section {
332
+
333
+ display : block;
334
+
335
+ }
336
+
337
+
338
+
339
+ nav ul {
340
+
341
+ list-style : none;
342
+
343
+ }
344
+
345
+
346
+
347
+ blockquote,
348
+
349
+ q {
350
+
351
+ quotes : none;
352
+
353
+ }
354
+
355
+
356
+
357
+ blockquote:before,
358
+
359
+ blockquote:after,
360
+
361
+ q:before,
362
+
363
+ q:after {
364
+
365
+ content : '';
366
+
367
+ content : none;
368
+
369
+ }
370
+
371
+
372
+
373
+ a {
374
+
375
+ background : transparent;
376
+
377
+ font-size : 100%;
378
+
379
+ margin : 0;
380
+
381
+ padding : 0;
382
+
383
+ vertical-align : baseline;
384
+
385
+ }
386
+
387
+
388
+
389
+ /* change colours to suit your needs */
390
+
391
+ ins {
392
+
393
+ background-color : #ff9;
394
+
395
+ color : #000;
396
+
397
+ text-decoration : none;
398
+
399
+ }
400
+
401
+
402
+
403
+ /* change colours to suit your needs */
404
+
405
+ mark {
406
+
407
+ background-color : #ff9;
408
+
409
+ color : #000;
410
+
411
+ font-style : italic;
412
+
413
+ font-weight : bold;
414
+
415
+ }
416
+
417
+
418
+
419
+ del {
420
+
421
+ text-decoration : line-through;
422
+
423
+ }
424
+
425
+
426
+
427
+ abbr[title],
428
+
429
+ dfn[title] {
430
+
431
+ border-bottom : 1px dotted;
432
+
433
+ cursor : help;
434
+
435
+ }
436
+
437
+
438
+
439
+ table {
440
+
441
+ border-collapse : collapse;
442
+
443
+ border-spacing : 0;
444
+
445
+ }
446
+
447
+
448
+
449
+ /* change border colour to suit your needs */
450
+
451
+ hr {
452
+
453
+ border-top : 1px solid #ccc;
454
+
455
+ border : 0;
456
+
457
+ display : block;
458
+
459
+ height : 1px;
460
+
461
+ margin : 1em 0;
462
+
463
+ padding : 0;
464
+
465
+ }
466
+
467
+
468
+
469
+ input,
470
+
471
+ select {
472
+
473
+ vertical-align : middle;
474
+
475
+ }
476
+
477
+ /* -------------------- 【HTML5 Reset Stylesheet ver1.6.1】 ここまで↑ -------------------- */
478
+
479
+
480
+
481
+
482
+
483
+
484
+
485
+ /* 【モバイルファーストによるCSSファイルの設計】 */
486
+
487
+ /* -------------------- 【ウェブサイト全体の共通箇所】 ここから↓ -------------------- */
488
+
489
+ /* 全ての要素にborder-boxを設定する */
490
+
491
+ *,
492
+
493
+ *:before,
494
+
495
+ *:after {
496
+
497
+ -moz-box-sizing : border-box;
498
+
499
+ -ms-box-sizing : border-box;
500
+
501
+ -o-box-sizing : border-box;
502
+
503
+ -webkit-box-sizing : border-box;
504
+
505
+ box-sizing : border-box;
506
+
507
+ }
508
+
509
+
510
+
511
+ /* CSS変数・色の設定 */
512
+
513
+ body {
514
+
515
+ --aqua : aqua;
516
+
517
+ --blk : black;
518
+
519
+ --blu : blue;
520
+
521
+ --brn : brown;
522
+
523
+ --facebook : #3b5998;
524
+
525
+ --fuchsia : fuchsia;
526
+
527
+ --gld : gold;
528
+
529
+ --googleplus : #dd4b39;
530
+
531
+ --gray : gray;
532
+
533
+ --grn : green;
534
+
535
+ --gry : gray;
536
+
537
+ --lime : lime;
538
+
539
+ --maroon : maroon;
540
+
541
+ --mvr : mediumvioletred;
542
+
543
+ --navy : navy;
544
+
545
+ --olive : olive;
546
+
547
+ --orn : orange;
548
+
549
+ --pnk : pink;
550
+
551
+ --ppl : purple;
552
+
553
+ --red : red;
554
+
555
+ --sil : silver;
556
+
557
+ --teal : teal;
558
+
559
+ --twitter : #1da1f2;
560
+
561
+ --wht : white;
562
+
563
+ --yel : yellow;
564
+
565
+ }
566
+
567
+
568
+
569
+ /* 背景色 */
570
+
571
+ body {
572
+
573
+ background-color : lightgray;
574
+
575
+ }
576
+
577
+
578
+
579
+ /* CSS変数・コンテンツ幅の設定 ここから↓ */
580
+
581
+ body {
582
+
583
+ --width-max : 100%;
584
+
585
+ --width-pc-01 : 80rem;
586
+
587
+ --width-pc-02 : 70rem;
588
+
589
+ --width-pc-03 : 93rem;
590
+
591
+ --width-sp-01 : 60rem;
592
+
593
+ --width-sp-02 : 58rem;
594
+
595
+ --width-tv-01 : 110rem;
596
+
597
+ --width-tv-02 : rem;
598
+
599
+ }
600
+
601
+
602
+
603
+ .width-max {
604
+
605
+ padding : 1rem;
606
+
607
+ width : var(--width-max);
608
+
609
+ }
610
+
611
+ /* CSS変数・コンテンツ幅の設定 ここまで↑ */
612
+
613
+
614
+
615
+ /* フォントの種類の設定 */
616
+
617
+ body {
618
+
619
+ font-family : 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
620
+
621
+ }
622
+
623
+
624
+
625
+ /* フォントサイズ ここから↓
626
+
627
+ 1(px) : .1(rem) : .093(vw)
628
+
629
+ 1(rem) : .926(vw) : 10(px)
630
+
631
+ 1(vw) : 10.8(px) : 1.08(rem)
632
+
633
+ 1rem : 10px : .926vw
162
634
 
163
635
  */
164
636
 
165
-
166
-
167
-
168
-
169
-
170
-
171
- /* -------------------- 【HTML5 Reset Stylesheet ver1.6.1】 ここから↓ -------------------- */
172
-
173
- html,
174
-
175
- body,
176
-
177
- div,
178
-
179
- span,
180
-
181
- object,
182
-
183
- iframe,
184
-
185
- h1,
186
-
187
- h2,
188
-
189
- h3,
190
-
191
- h4,
192
-
193
- h5,
194
-
195
- h6,
196
-
197
- p,
198
-
199
- blockquote,
200
-
201
- pre,
202
-
203
- abbr,
204
-
205
- address,
206
-
207
- cite,
208
-
209
- code,
210
-
211
- del,
212
-
213
- dfn,
214
-
215
- em,
216
-
217
- img,
218
-
219
- ins,
220
-
221
- kbd,
222
-
223
- q,
224
-
225
- samp,
226
-
227
- small,
228
-
229
- strong,
230
-
231
- sub,
232
-
233
- sup,
234
-
235
- var,
236
-
237
- b,
238
-
239
- i,
240
-
241
- dl,
242
-
243
- dt,
244
-
245
- dd,
246
-
247
- ol,
248
-
249
- ul,
250
-
251
- li,
252
-
253
- fieldset,
254
-
255
- form,
256
-
257
- label,
258
-
259
- legend,
260
-
261
- table,
262
-
263
- caption,
264
-
265
- tbody,
266
-
267
- tfoot,
637
+ :root {
268
-
269
- thead,
638
+
270
-
271
- tr,
272
-
273
- th,
274
-
275
- td,
276
-
277
- article,
278
-
279
- aside,
280
-
281
- canvas,
282
-
283
- details,
284
-
285
- figcaption,
286
-
287
- figure,
288
-
289
- footer,
290
-
291
- header,
292
-
293
- hgroup,
294
-
295
- menu,
296
-
297
- nav,
298
-
299
- section,
300
-
301
- summary,
302
-
303
- time,
304
-
305
- mark,
306
-
307
- audio,
308
-
309
- video {
310
-
311
- background : transparent;
312
-
313
- border : 0;
314
-
315
- font-size : 100%;
639
+ font-size : 62.5%;
316
-
317
- margin : 0;
640
+
318
-
319
- outline : 0;
320
-
321
- padding : 0;
322
-
323
- vertical-align : baseline;
324
-
325
- }
641
+ }
642
+
326
-
643
+ /* フォントサイズ ここまで↑ */
644
+
645
+
646
+
327
-
647
+ /* テキストの自動拡大を無効化 */
328
648
 
329
649
  body {
330
650
 
331
- line-height: 1;
651
+ -webkit-text-size-adjust : none;
652
+
332
-
653
+ text-size-adjust : none;
654
+
333
- }
655
+ }
656
+
657
+
658
+
334
-
659
+ /* ブラウザが挿入する余白を削除する */
660
+
335
-
661
+ body {
336
-
662
+
337
- article,
663
+ margin : 0;
338
-
339
- aside,
664
+
340
-
341
- details,
342
-
343
- figcaption,
344
-
345
- figure,
346
-
347
- footer,
348
-
349
- header,
350
-
351
- hgroup,
352
-
353
- menu,
354
-
355
- nav,
356
-
357
- section {
358
-
359
- display : block;
360
-
361
- }
665
+ }
666
+
667
+
668
+
362
-
669
+ /* リストマークを削除する */
363
-
364
-
670
+
365
- nav ul {
671
+ ul {
366
672
 
367
673
  list-style : none;
368
674
 
@@ -370,455 +676,263 @@
370
676
 
371
677
 
372
678
 
373
- blockquote,
374
-
375
- q {
376
-
377
- quotes : none;
378
-
379
- }
380
-
381
-
382
-
383
- blockquote:before,
384
-
385
- blockquote:after,
386
-
387
- q:before,
388
-
389
- q:after {
390
-
391
- content : '';
392
-
393
- content : none;
394
-
395
- }
396
-
397
-
398
-
399
- a {
400
-
401
- background : transparent;
402
-
403
- font-size : 100%;
404
-
405
- margin : 0;
406
-
407
- padding : 0;
408
-
409
- vertical-align : baseline;
410
-
411
- }
412
-
413
-
414
-
415
- /* change colours to suit your needs */
416
-
417
- ins {
418
-
419
- background-color : #ff9;
420
-
421
- color : #000;
422
-
423
- text-decoration : none;
424
-
425
- }
426
-
427
-
428
-
429
- /* change colours to suit your needs */
430
-
431
- mark {
432
-
433
- background-color : #ff9;
434
-
435
- color : #000;
436
-
437
- font-style : italic;
679
+ /* コンテンツ・ブロックのレイアウト */
680
+
681
+ [class|="block"] {
682
+
683
+ padding-left : 1em;
684
+
685
+ padding-right : 1em;
686
+
687
+ }
688
+
689
+
690
+
691
+ /* 画像 ここから↓ */
692
+
693
+ [class|="figure"] {
694
+
695
+ margin : 0;
696
+
697
+ }
698
+
699
+
700
+
701
+ [class|="fig"],
702
+
703
+ [class|="ph"] {
704
+
705
+ height : auto;
706
+
707
+ width : 100%;
708
+
709
+ }
710
+
711
+ /* 画像 ここまで↑ */
712
+
713
+ /* -------------------- 【ウェブサイト全体の共通箇所】 ここまで↑ -------------------- */
714
+
715
+
716
+
717
+
718
+
719
+
720
+
721
+ /* -------------------- 【スマートフォン向けの設定】 ここから↓ -------------------- */
722
+
723
+ /* -------------------- 【.htmlの設定】 ここから↓ -------------------- */
724
+
725
+ /* スマートフォン版:コンテンツ内側の画面幅 */
726
+
727
+ .width-01 {
728
+
729
+ max-width : var(--width-sp-02);
730
+
731
+ }
732
+
733
+
734
+
735
+ /* スマートフォン用フォントサイズの設定 */
736
+
737
+ body {
738
+
739
+ font-size : 1.4rem;
740
+
741
+ }
742
+
743
+
744
+
745
+ /* 【コンテンツ・ブロック .block-01 】 ここから↓ */
746
+
747
+
748
+
749
+ /* 見出し */
750
+
751
+ .h1-01 {
752
+
753
+ padding-top:1em;
754
+
755
+ padding-bottom:1em;
756
+
757
+ font-size: 120%;
758
+
759
+ }
760
+
761
+
762
+
763
+ /* フレックス .ctr-flex-01 ここから↓*/
764
+
765
+ .ctr-flex-01 {
766
+
767
+ display:flex;
768
+
769
+ background-color: var(--wht);
770
+
771
+ height:10rem;
772
+
773
+ }
774
+
775
+
776
+
777
+ .ctr-item-01 {
778
+
779
+ width:5rem;
780
+
781
+ }
782
+
783
+
784
+
785
+ .circle-01 {
786
+
787
+ background-color : orange;
788
+
789
+ border-radius : 50%;
790
+
791
+ height : 5rem;
792
+
793
+ margin-top:2.5rem;
794
+
795
+ margin-bottom:2.5rem;
796
+
797
+ position:relative;
798
+
799
+ }
800
+
801
+
802
+
803
+ .circle-inner-01 {
804
+
805
+ position:absolute;
806
+
807
+ font-family : "Times New Roman";
808
+
809
+ font-size : 100%;
438
810
 
439
811
  font-weight : bold;
440
812
 
441
- }
442
-
443
-
444
-
445
- del {
446
-
447
- text-decoration : line-through;
448
-
449
- }
450
-
451
-
452
-
453
- abbr[title],
454
-
455
- dfn[title] {
456
-
457
- border-bottom : 1px dotted;
458
-
459
- cursor : help;
460
-
461
- }
462
-
463
-
464
-
465
- table {
466
-
467
- border-collapse : collapse;
468
-
469
- border-spacing : 0;
470
-
471
- }
472
-
473
-
474
-
475
- /* change border colour to suit your needs */
476
-
477
- hr {
478
-
479
- border-top : 1px solid #ccc;
480
-
481
- border : 0;
482
-
483
- display : block;
484
-
485
- height : 1px;
486
-
487
- margin : 1em 0;
488
-
489
- padding : 0;
490
-
491
- }
492
-
493
-
494
-
495
- input,
496
-
497
- select {
498
-
499
- vertical-align : middle;
500
-
501
- }
502
-
503
- /* -------------------- 【HTML5 Reset Stylesheet ver1.6.1】 ここまで↑ -------------------- */
504
-
505
-
506
-
507
-
508
-
509
-
510
-
511
- /* 【モバイルファーストによるCSSファイルの設計】 */
512
-
513
- /* -------------------- 【ウェブサイト全体の共通箇所】 ここから↓ -------------------- */
514
-
515
- /* 全ての要素にborder-boxを設定する */
516
-
517
- *,
518
-
519
- *:before,
520
-
521
- *:after {
522
-
523
- -moz-box-sizing : border-box;
524
-
525
- -ms-box-sizing : border-box;
526
-
527
- -o-box-sizing : border-box;
528
-
529
- -webkit-box-sizing : border-box;
530
-
531
- box-sizing : border-box;
532
-
533
- }
534
-
535
-
536
-
537
- /* CSS変数・色の設定 */
538
-
539
- body {
540
-
541
- --aqua : aqua;
542
-
543
- --blk : black;
544
-
545
- --blu : blue;
546
-
547
- --brn : brown;
548
-
549
- --facebook : #3b5998;
550
-
551
- --fuchsia : fuchsia;
552
-
553
- --gld : gold;
554
-
555
- --googleplus : #dd4b39;
556
-
557
- --gray : gray;
558
-
559
- --grn : green;
560
-
561
- --gry : gray;
562
-
563
- --lime : lime;
564
-
565
- --maroon : maroon;
566
-
567
- --mvr : mediumvioletred;
568
-
569
- --navy : navy;
570
-
571
- --olive : olive;
572
-
573
- --orn : orange;
574
-
575
- --pnk : pink;
576
-
577
- --ppl : purple;
578
-
579
- --red : red;
580
-
581
- --sil : silver;
582
-
583
- --teal : teal;
584
-
585
- --twitter : #1da1f2;
586
-
587
- --wht : white;
588
-
589
- --yel : yellow;
590
-
591
- }
592
-
593
-
594
-
595
- /* 背景色 */
596
-
597
- body {
598
-
599
- background-color : lightgray;
600
-
601
- }
602
-
603
-
604
-
605
- /* CSS変数・コンテンツ幅の設定 ここから↓ */
606
-
607
- body {
608
-
609
- --width-max : 100%;
610
-
611
- --width-pc-01 : 80rem;
612
-
613
- --width-pc-02 : 70rem;
614
-
615
- --width-pc-03 : 93rem;
616
-
617
- --width-sp-01 : 60rem;
618
-
619
- --width-sp-02 : 58rem;
620
-
621
- --width-tv-01 : 110rem;
622
-
623
- --width-tv-02 : rem;
624
-
625
- }
626
-
627
-
628
-
629
- .width-max {
630
-
631
- padding : 1rem;
632
-
633
- width : var(--width-max);
634
-
635
- }
636
-
637
- /* CSS変数・コンテンツ幅の設定 ここまで↑ */
638
-
639
-
640
-
641
- /* フォントの種類の設定 */
642
-
643
- body {
644
-
645
- font-family : 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
646
-
647
- }
648
-
649
-
650
-
651
- /* フォントサイズ ここから↓
652
-
653
- 1(px) : .1(rem) : .093(vw)
654
-
655
- 1(rem) : .926(vw) : 10(px)
656
-
657
- 1(vw) : 10.8(px) : 1.08(rem)
658
-
659
- 1rem : 10px : .926vw
660
-
661
- */
662
-
663
- :root {
664
-
665
- font-size : 62.5%;
666
-
667
- }
668
-
669
- /* フォントサイズ ここまで↑ */
670
-
671
-
672
-
673
- /* テキストの自動拡大を無効化 */
674
-
675
- body {
676
-
677
- -webkit-text-size-adjust : none;
678
-
679
- text-size-adjust : none;
680
-
681
- }
682
-
683
-
684
-
685
- /* ブラウザが挿入する余白を削除する */
686
-
687
- body {
688
-
689
- margin : 0;
690
-
691
- }
692
-
693
-
694
-
695
- /* リストマークを削除する */
696
-
697
- ul {
698
-
699
- list-style : none;
700
-
701
- }
702
-
703
-
704
-
705
- /* コンテンツ・ブロックのレイアウト */
706
-
707
- [class|="block"] {
708
-
709
- padding-left : 1em;
710
-
711
- padding-right : 1em;
712
-
713
- }
714
-
715
-
716
-
717
- /* 画像 ここから↓ */
718
-
719
- [class|="figure"] {
720
-
721
- margin : 0;
722
-
723
- }
724
-
725
-
726
-
727
- [class|="fig"],
728
-
729
- [class|="ph"] {
730
-
731
- height : auto;
732
-
733
- width : 100%;
734
-
735
- }
736
-
737
- /* 画像 ここまで↑ */
738
-
739
- /* -------------------- 【ウェブサイト全体の共通箇所】 ここまで↑ -------------------- */
740
-
741
-
742
-
743
-
744
-
745
-
746
-
747
- /* -------------------- 【スマートフォン向けの設定】 ここから↓ -------------------- */
748
-
749
- /* -------------------- 【.htmlの設定】 ここから↓ -------------------- */
750
-
751
- /* スマートフォン版:コンテンツ内側の画面幅 */
752
-
753
- .width-01 {
754
-
755
- max-width : var(--width-sp-02);
756
-
757
- }
758
-
759
-
760
-
761
- /* スマートフォン用フォントサイズの設定 */
762
-
763
- body {
764
-
765
- font-size : 1.4rem;
766
-
767
- }
768
-
769
-
770
-
771
- /* 【コンテンツ・ブロック .block-01 】 ここから↓ */
772
-
773
-
774
-
775
- /* 見出し */
776
-
777
- .h1-01 {
778
-
779
- padding-top:1em;
780
-
781
- padding-bottom:1em;
782
-
783
- font-size: 120%;
784
-
785
- }
786
-
787
-
788
-
789
- /* フレックス .ctr-flex-01 ここから↓*/
790
-
791
- .ctr-flex-01 {
792
-
793
- display:flex;
794
-
795
- background-color: var(--wht);
813
+ line-height : 10rem;
814
+
815
+ text-align : center;
816
+
817
+ -webkit-transform : translate(-50%, -50%);
818
+
819
+ left : 50%;
820
+
821
+ position : absolute;
822
+
823
+ top : 50%;
824
+
825
+ transform : translate(-50%, -50%);
826
+
827
+ }
828
+
829
+
830
+
831
+ .ctr-item-02 {
832
+
833
+ /* position:relative; */
834
+
835
+ }
836
+
837
+
838
+
839
+ .p-01 {
796
840
 
797
841
  height:10rem;
798
842
 
843
+ /* position:absolute;
844
+
845
+ left:0;
846
+
847
+ top:0;
848
+
849
+ z-index:2; */
850
+
799
- }
851
+ }
800
-
801
-
802
-
852
+
853
+
854
+
803
- .ctr-item-01 {
855
+ .cake-01 {
804
-
856
+
805
- width:5rem;
857
+ height:10rem;
858
+
806
-
859
+ /* font-size:0;
860
+
861
+ z-index:1;
862
+
863
+ position:absolute;
864
+
865
+ right:0;
866
+
867
+ bottom:0; */
868
+
807
- }
869
+ }
870
+
808
-
871
+ /* フレックス .ctr-flex-01 ここまで↑ */
872
+
809
-
873
+ /* 【コンテンツ・ブロック .block-01 】 ここまで↑ */
874
+
810
-
875
+ /* -------------------- 【page-title.htmlの設定】 ここまで↑ -------------------- */
876
+
877
+ /* -------------------- 【スマートフォン向けの設定】 ここまで↑ -------------------- */
878
+
879
+
880
+
881
+
882
+
883
+
884
+
885
+ /* -------------------- 【タブレット向けの設定 画面幅が600px以上】 ここから↓ -------------------- */
886
+
887
+ @media (min-width : 600px) {
888
+
889
+ /* タブレット版:コンテンツ内側の画面幅 */
890
+
811
- .circle-01 {
891
+ .width-01 {
812
-
813
- background-color : orange;
892
+
814
-
815
- border-radius : 50%;
816
-
817
- height : 5rem;
818
-
819
- margin-top:2.5rem;
893
+ max-width : var();
894
+
820
-
895
+ }
896
+
897
+
898
+
899
+ .block-01 {
900
+
901
+ margin : 0;
902
+
903
+ }
904
+
905
+
906
+
907
+ /* タブレット用フォントサイズの設定 */
908
+
909
+ body {
910
+
821
- margin-bottom:2.5rem;
911
+ font-size : 1.7rem;
912
+
913
+ }
914
+
915
+ /* -------------------- 【page-title.html】の設定 ここから↓ -------------------- */
916
+
917
+ /* タブレット版 【コンテンツ・ブロック .bock-01】 ここから↓ */
918
+
919
+
920
+
921
+ /* タブレット版 【コンテンツ・ブロック .bock-01】 ここまで↑ */
922
+
923
+ /* -------------------- 【page-title.html】の設定 ここまで↑ -------------------- */
924
+
925
+ /* -------------------- 【タブレット向けの設定 画面幅が600px以上】 ここまで↑ -------------------- */
926
+
927
+
928
+
929
+
930
+
931
+ ```ここに言語を入力
932
+
933
+ 試してみたコード
934
+
935
+ .ctr-item-02 {
822
936
 
823
937
  position:relative;
824
938
 
@@ -826,63 +940,27 @@
826
940
 
827
941
 
828
942
 
829
- .circle-inner-01 {
943
+ .p-01 {
944
+
945
+ height:10rem;
830
946
 
831
947
  position:absolute;
832
948
 
833
- font-family : "Times New Roman";
834
-
835
- font-size : 100%;
836
-
837
- font-weight : bold;
838
-
839
- line-height : 10rem;
840
-
841
- text-align : center;
842
-
843
- -webkit-transform : translate(-50%, -50%);
844
-
845
- left : 50%;
949
+ left:0;
846
-
847
- position : absolute;
950
+
848
-
849
- top : 50%;
951
+ top:0;
850
-
952
+
851
- transform : translate(-50%, -50%);
953
+ z-index:2;
852
-
954
+
853
- }
955
+ }
854
-
855
-
856
-
857
- .ctr-item-02 {
956
+
858
-
859
- /* position:relative; */
957
+
860
-
861
- }
958
+
862
-
863
-
864
-
865
- .p-01 {
959
+ .cake-01 {
866
960
 
867
961
  height:10rem;
868
962
 
869
- /* position:absolute;
870
-
871
- left:0;
872
-
873
- top:0;
874
-
875
- z-index:2; */
876
-
877
- }
878
-
879
-
880
-
881
- .cake-01 {
882
-
883
- height:10rem;
884
-
885
- /* font-size:0;
963
+ font-size:0;
886
964
 
887
965
  z-index:1;
888
966
 
@@ -890,110 +968,6 @@
890
968
 
891
969
  right:0;
892
970
 
893
- bottom:0; */
894
-
895
- }
896
-
897
- /* フレックス .ctr-flex-01 ここまで↑ */
898
-
899
- /* 【コンテンツ・ブロック .block-01 】 ここまで↑ */
900
-
901
- /* -------------------- 【page-title.htmlの設定】 ここまで↑ -------------------- */
902
-
903
- /* -------------------- 【スマートフォン向けの設定】 ここまで↑ -------------------- */
904
-
905
-
906
-
907
-
908
-
909
-
910
-
911
- /* -------------------- 【タブレット向けの設定 画面幅が600px以上】 ここから↓ -------------------- */
912
-
913
- @media (min-width : 600px) {
914
-
915
- /* タブレット版:コンテンツ内側の画面幅 */
916
-
917
- .width-01 {
918
-
919
- max-width : var();
920
-
921
- }
922
-
923
-
924
-
925
- .block-01 {
926
-
927
- margin : 0;
928
-
929
- }
930
-
931
-
932
-
933
- /* タブレット用フォントサイズの設定 */
934
-
935
- body {
936
-
937
- font-size : 1.7rem;
938
-
939
- }
940
-
941
- /* -------------------- 【page-title.html】の設定 ここから↓ -------------------- */
942
-
943
- /* タブレット版 【コンテンツ・ブロック .bock-01】 ここから↓ */
944
-
945
-
946
-
947
- /* タブレット版 【コンテンツ・ブロック .bock-01】 ここまで↑ */
948
-
949
- /* -------------------- 【page-title.html】の設定 ここまで↑ -------------------- */
950
-
951
- /* -------------------- 【タブレット向けの設定 画面幅が600px以上】 ここまで↑ -------------------- */
952
-
953
-
954
-
955
-
956
-
957
- ```ここに言語を入力
958
-
959
- 試してみたコード
960
-
961
- .ctr-item-02 {
962
-
963
- position:relative;
964
-
965
- }
966
-
967
-
968
-
969
- .p-01 {
970
-
971
- height:10rem;
972
-
973
- position:absolute;
974
-
975
- left:0;
976
-
977
- top:0;
978
-
979
- z-index:2;
980
-
981
- }
982
-
983
-
984
-
985
- .cake-01 {
986
-
987
- height:10rem;
988
-
989
- font-size:0;
990
-
991
- z-index:1;
992
-
993
- position:absolute;
994
-
995
- right:0;
996
-
997
971
  bottom:0;
998
972
 
999
973
  }