質問編集履歴

1

初心者バッジ付けました。css追記しました。

2020/10/06 08:15

投稿

yamaneko0210
yamaneko0210

スコア2

test CHANGED
@@ -1 +1 @@
1
- ヘッダー高さを均一に※初心者ですみません
1
+ ヘッダー高さを均一にしたい
test CHANGED
@@ -1,4 +1,12 @@
1
+ ``````ここに言語を入力
2
+
3
+ ここに言語を入力
4
+
5
+ ```
6
+
7
+ コード
8
+
1
- ヘッダー右側(コードではheader-right)の4つの項目の高さを揃えようとすると、全体が動いてしまい
9
+ ```ヘッダー右側(コードではheader-right)の4つの項目の高さを揃えようとすると、全体が動いてしまい
2
10
 
3
11
  タイボグラフィーだけ少しずれてしまいます。
4
12
 
@@ -6,196 +14,836 @@
6
14
 
7
15
  ![イメージ説明](41372741e6a1d0bd435fd0abc907c0de.png)
8
16
 
9
- htmlとcss添付しています。
10
-
11
- ``` <body>
12
-
13
- <header>
14
-
15
- <div class="container">
16
-
17
- <div class="header-left">
18
-
19
- <h1><a href="#">write</a></h1>
20
-
21
- <p>書くためのテーマ</p>
22
-
23
-
24
-
25
-
26
-
27
- </div>
28
-
29
- <div class="header-right">
30
-
31
- <div class=header-nav>
32
-
33
- <ul class="gnav">
34
-
35
- <li><a href="#">ホーム<span class="fas fa-angle-down"></a>
36
-
37
- <ul>
38
-
39
- <li><a href="/">→カスタマイズ</a></li>
40
-
41
- </ul>
42
-
43
- </li>
44
-
45
- <li><a href="#">ページ<span class="fas fa-angle-down"></a>
46
-
47
- <ul>
48
-
49
- <li><a href="/">アイキャッチ画像なしのページ</li>
50
-
51
- <li><a href="/">ページ(全幅テンプレート)</li>
52
-
53
- </ul>
54
-
55
- </li>
56
-
57
- <li><a href="#">タイボグラフィー</a></li>
58
-
59
- <li><a href="#">お問い合わせ</a></li>
60
-
61
- </ul>
62
-
63
- </div>
64
-
65
-
66
-
67
- <div class="search-wrapper">
68
-
69
- <form action="">
70
-
71
- <input class="search" name="q" type="text" placeholder="検索..."/>
72
-
73
-
74
-
75
- </form>
76
-
77
-
78
-
79
- </div>
17
+ css添付しています。
18
+
19
+
20
+
21
+ ```/*
22
+
23
+ html5doctor.com Reset Stylesheet
24
+
25
+ v1.6.1
26
+
27
+ Last Updated: 2010-09-17
28
+
29
+ Author: Richard Clark - http://richclarkdesign.com
30
+
31
+ Twitter: @rich_clark
32
+
33
+ */
34
+
35
+
36
+
37
+ html, body, div, span, object, iframe,
38
+
39
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
40
+
41
+ abbr, address, cite, code,
42
+
43
+ del, dfn, em, img, ins, kbd, q, samp,
44
+
45
+ small, strong, sub, sup, var,
46
+
47
+ b, i,
48
+
49
+ dl, dt, dd, ol, ul, li,
50
+
51
+ fieldset, form, label, legend,
52
+
53
+ table, caption, tbody, tfoot, thead, tr, th, td,
54
+
55
+ article, aside, canvas, details, figcaption, figure,
56
+
57
+ footer, header, hgroup, menu, nav, section, summary,
58
+
59
+ time, mark, audio, video {
60
+
61
+ margin:0;
62
+
63
+ padding:0;
64
+
65
+ border:0;
66
+
67
+ outline:0;
68
+
69
+ font-size:100%;
70
+
71
+ vertical-align:baseline;
72
+
73
+ background:transparent;
74
+
75
+ }
76
+
77
+
78
+
79
+ body {
80
+
81
+ line-height:1;
82
+
83
+ }
84
+
85
+
86
+
87
+ article,aside,details,figcaption,figure,
88
+
89
+ footer,header,hgroup,menu,nav,section {
90
+
91
+ display:block;
92
+
93
+ }
94
+
95
+
96
+
97
+ nav ul {
98
+
99
+ list-style:none;
100
+
101
+ }
102
+
103
+
104
+
105
+ blockquote, q {
106
+
107
+ quotes:none;
108
+
109
+ }
110
+
111
+
112
+
113
+ blockquote:before, blockquote:after,
114
+
115
+ q:before, q:after {
116
+
117
+ content:'';
118
+
119
+ content:none;
120
+
121
+ }
122
+
123
+
124
+
125
+ a {
126
+
127
+ margin:0;
128
+
129
+ padding:0;
130
+
131
+ font-size:100%;
132
+
133
+ vertical-align:baseline;
134
+
135
+ background:transparent;
136
+
137
+ }
138
+
139
+
140
+
141
+ /* change colours to suit your needs */
142
+
143
+ ins {
144
+
145
+ background-color:#ff9;
146
+
147
+ color:#000;
148
+
149
+ text-decoration:none;
150
+
151
+ }
152
+
153
+
154
+
155
+ /* change colours to suit your needs */
156
+
157
+ mark {
158
+
159
+ background-color:#ff9;
160
+
161
+ color:#000;
162
+
163
+ font-style:italic;
164
+
165
+ font-weight:bold;
166
+
167
+ }
168
+
169
+
170
+
171
+ del {
172
+
173
+ text-decoration: line-through;
174
+
175
+ }
176
+
177
+
178
+
179
+ abbr[title], dfn[title] {
180
+
181
+ border-bottom:1px dotted;
182
+
183
+ cursor:help;
184
+
185
+ }
186
+
187
+
188
+
189
+ table {
190
+
191
+ border-collapse:collapse;
192
+
193
+ border-spacing:0;
194
+
195
+ }
196
+
197
+
198
+
199
+ /* change border colour to suit your needs */
200
+
201
+ hr {
202
+
203
+ display:block;
204
+
205
+ height:1px;
206
+
207
+ border:0;
208
+
209
+ border-top:1px solid #cccccc;
210
+
211
+ margin:1em 0;
212
+
213
+ padding:0;
214
+
215
+ }
216
+
217
+
218
+
219
+ input, select {
220
+
221
+ vertical-align:middle;
222
+
223
+ }
224
+
225
+ body {
226
+
227
+ font-size: 15px;
228
+
229
+ font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
230
+
231
+ line-height: 1.8;
232
+
233
+ }
234
+
235
+
236
+
237
+ a {
238
+
239
+ text-decoration: none;
240
+
241
+ color: #444444;
242
+
243
+ }
244
+
245
+
246
+
247
+ ul{
248
+
249
+ list-style: none;
250
+
251
+ }
252
+
253
+
254
+
255
+ header{
256
+
257
+ height: 152px;
258
+
259
+ margin-top: 50px;
260
+
261
+ width:100%;
262
+
263
+
264
+
265
+ }
266
+
267
+
268
+
269
+ .container{
270
+
271
+ width: 1040px;
272
+
273
+ margin: 0 auto;
274
+
275
+ }
276
+
277
+
278
+
279
+ .header-left{
280
+
281
+ float:left;
282
+
283
+ }
284
+
285
+ .header-left h1{
286
+
287
+ font-size: 36px;
288
+
289
+ line-height: 48px;
290
+
291
+
292
+
293
+ }
294
+
295
+ .header-left p{
296
+
297
+ font-size: 18px;
298
+
299
+ }
300
+
301
+
302
+
303
+ .header-right{
304
+
305
+ padding-top: 42px;
306
+
307
+ float:right;
308
+
309
+ }
310
+
311
+
312
+
313
+ .fas{
314
+
315
+ margin-left: 10px;
316
+
317
+ }
318
+
319
+
320
+
321
+ .gnav li{
322
+
323
+ float:left;
324
+
325
+ font-size: 16.88px;
326
+
327
+ padding:0 15px;
328
+
329
+ position: relative;
330
+
331
+
332
+
333
+ }
334
+
335
+
336
+
337
+ .gnav li ul{
338
+
339
+ position: absolute;
340
+
341
+ top:45px;
342
+
343
+ left: -5px;
344
+
345
+ height: 0;
346
+
347
+ visibility: hidden;
348
+
349
+ }
350
+
351
+ .gnav li a{
352
+
353
+ display: block;
354
+
355
+ padding-bottom: 14px;
356
+
357
+ }
358
+
359
+ .gnav li li{
360
+
361
+ width: 200px;
362
+
363
+ border: solid 1px #f0f0f0;
364
+
365
+ padding:10px 20px 0 20px;
366
+
367
+ box-shadow: 0.5px 0.5px #f0f0f0;
368
+
369
+ background-color: white;
370
+
371
+ opacity: 0;
372
+
373
+ transition: all 0.3s;
374
+
375
+ }
376
+
377
+ .gnav li:hover ul li{
378
+
379
+ visibility: visible;
380
+
381
+ opacity: 1;
382
+
383
+ }
384
+
385
+
386
+
387
+ .gnav li a:hover{
388
+
389
+ color: #c49029;
390
+
391
+ }
392
+
393
+
394
+
395
+ .gnav{
396
+
397
+ padding: 0 200px 0 0;
398
+
399
+ }
400
+
401
+
402
+
403
+
404
+
405
+ .search-wrapper{
406
+
407
+ height: 40px;
408
+
409
+ display: inline-block;
410
+
411
+ float: right;
412
+
413
+ position: relative;
414
+
415
+ }
416
+
417
+
418
+
419
+ .search{
420
+
421
+ height: 34px;
422
+
423
+ width: 0;
424
+
425
+ background: url(icons8-search-50.png) left center no-repeat;
426
+
427
+ background-size: 26px 26px;
428
+
429
+ padding-left: 30px;
430
+
431
+ font-size: 16px;
432
+
433
+ border: 1px solid #e0e0e0;
434
+
435
+ position: absolute;
436
+
437
+ right: 0;
438
+
439
+ top:-5px;
440
+
441
+ outline: none;
442
+
443
+ border: none;
444
+
445
+ cursor: pointer;
446
+
447
+ transition: 0.5s;
448
+
449
+
450
+
451
+ }
452
+
453
+
454
+
455
+ .search:focus{
456
+
457
+ width: 210px;
458
+
459
+ height: 34px;
460
+
461
+ border: 1px solid #e0e0e0;
462
+
463
+ background-color: white;
464
+
465
+ cursor: text;
466
+
467
+ }
468
+
469
+
470
+
471
+ .top-wrapper{
472
+
473
+ height: 780px;
474
+
475
+ background-color: pink;
476
+
477
+ }
478
+
479
+
480
+
481
+ .top-wrapper p{
482
+
483
+ font-size: 27px;
484
+
485
+ color: #777777;
486
+
487
+ padding-top: 90px;
488
+
489
+ }
490
+
491
+
492
+
493
+ .main-wrapper{
494
+
495
+ height: 1440px;
496
+
497
+ }
498
+
499
+
500
+
501
+ .main-wrapper .container{
502
+
503
+ border-bottom: 1px solid #ccc;
504
+
505
+ padding-bottom: 150px;
506
+
507
+ }
508
+
509
+
510
+
511
+ .date{
512
+
513
+ float: left;
514
+
515
+ margin-right: 220px;
516
+
517
+ font-size: 16.8px;
518
+
519
+ color: #999999;
520
+
521
+ padding-top: 10px;
522
+
523
+ opacity: 0.5;
524
+
525
+ }
526
+
527
+
528
+
529
+ .date:hover{
530
+
531
+ opacity: 1;
532
+
533
+ }
534
+
535
+
536
+
537
+ .textarea{
538
+
539
+ width: 700px;
540
+
541
+ display: inline-block;
542
+
543
+ }
544
+
545
+ .text-heading{
546
+
547
+ color: #111111;
548
+
549
+ font-size: 22.4px;
550
+
551
+ padding-bottom: 20px;
552
+
553
+ }
554
+
555
+
556
+
557
+ .text-heading a:hover{
558
+
559
+ color: #C49029;
560
+
561
+ }
562
+
563
+
564
+
565
+ .text{
566
+
567
+ font-size: 16.8px;
568
+
569
+ color: #666666;
570
+
571
+ }
572
+
573
+
574
+
575
+
576
+
577
+ .text-box{
578
+
579
+ padding-bottom: 60px;
580
+
581
+ }
582
+
583
+
584
+
585
+ .page-list li{
586
+
587
+ float: left;
588
+
589
+ font-size: 16.8px;
590
+
591
+ color: #777777;
592
+
593
+ display: inline-block;
594
+
595
+ border: 1px solid #ccc;
596
+
597
+ padding: 8px 18px;
598
+
599
+ margin-left: 6px;
600
+
601
+ opacity: 0.5;
602
+
603
+ }
604
+
605
+ .page-list li:hover{
606
+
607
+ opacity: 1;
608
+
609
+ }
610
+
611
+
612
+
613
+ .page-list{
614
+
615
+ margin-left: 320px;
616
+
617
+ }
618
+
619
+
620
+
621
+ .page-list .this{
622
+
623
+ background-color: #EEEEEE;
624
+
625
+ color: #333333;
626
+
627
+ opacity: 1;
628
+
629
+ }
630
+
631
+
632
+
633
+ .profile-wrapper{
634
+
635
+ height: 460px;
636
+
637
+ }
638
+
639
+
640
+
641
+ .profile-wrapper .container{
642
+
643
+ border-bottom: 1px solid #ccc;
644
+
645
+ height: 380px;
646
+
647
+ }
648
+
649
+
650
+
651
+ .photo{
652
+
653
+ border-radius: 50%;
654
+
655
+ width: 100px;
656
+
657
+ height: auto;
658
+
659
+ float: left;
660
+
661
+ }
662
+
663
+
664
+
665
+ .profile{
666
+
667
+ width: 300px;
668
+
669
+ float: left;
670
+
671
+ }
672
+
673
+
674
+
675
+ .profile-text{
676
+
677
+ color: #666666;
678
+
679
+ font-size: 16.8px;
680
+
681
+ width: 260px;
682
+
683
+ }
684
+
685
+
686
+
687
+ .profile-heading{
688
+
689
+ font-size: 19px;
690
+
691
+ padding: 20px 0 40px 20px;
692
+
693
+ display: inline-block;
694
+
695
+ }
696
+
697
+
698
+
699
+ .fab{
700
+
701
+ color: #666666;
702
+
703
+ padding-right: 10px;
704
+
705
+ opacity: 0.7;
706
+
707
+ }
708
+
709
+
710
+
711
+ .fab:hover{
712
+
713
+ opacity: 1;
714
+
715
+ transition: 0.5s;
716
+
717
+ }
718
+
719
+
720
+
721
+ .sub{
722
+
723
+ float: left;
724
+
725
+ width: 210px;
726
+
727
+ margin-left: 35px;
728
+
729
+ }
730
+
731
+
732
+
733
+ .sub-heading{
734
+
735
+ font-size: 14.4px;
736
+
737
+ padding-bottom: 35px;
738
+
739
+ }
740
+
741
+
742
+
743
+ .sub-text{
744
+
745
+ font-size: 15.8px;
746
+
747
+ color: #666666;
748
+
749
+ }
750
+
751
+
752
+
753
+ .sub li a{
754
+
755
+ font-size: 16.9px;
756
+
757
+ color: #666666;
758
+
759
+ text-decoration: underline;
760
+
761
+
762
+
763
+ }
764
+
765
+ .sub li a:hover{
766
+
767
+ color: #c49029;
768
+
769
+ }
770
+
771
+
772
+
773
+ .sub1 p{
774
+
775
+ font-size: 14.6px;
776
+
777
+ color: #666666;
778
+
779
+ padding-bottom: 10px;
780
+
781
+
782
+
783
+ }
784
+
785
+
786
+
787
+ .sub2 li{
788
+
789
+ padding-bottom: 10px;
790
+
791
+ }
792
+
793
+
794
+
795
+ .sub-input{
796
+
797
+ margin-top: 85px;
798
+
799
+ height: 40px;
800
+
801
+ width: 220px;
802
+
803
+ border: 1px solid #e0e0e0;
804
+
805
+ }
806
+
807
+
808
+
809
+ ::placeholder{
810
+
811
+ padding-left: 5px;
812
+
813
+ color: #777777
814
+
815
+ }
816
+
817
+
818
+
819
+ footer{
820
+
821
+ height: 115px;
822
+
823
+ }
824
+
825
+
826
+
827
+ .footer-icon{
828
+
829
+ float: left;
830
+
831
+ }
832
+
833
+
834
+
835
+ .footer-logo{
836
+
837
+ text-align: center;
838
+
839
+ color: #666666;
840
+
841
+ font-size: 15.8px;
842
+
843
+ }
844
+
845
+
80
846
 
81
847
  コード
82
848
 
83
849
  ```
84
-
85
- ```
86
-
87
- .header-right{
88
-
89
- padding-top: 42px;
90
-
91
- float:right;
92
-
93
- }
94
-
95
-
96
-
97
- .fas{
98
-
99
- margin-left: 10px;
100
-
101
- }
102
-
103
-
104
-
105
- .gnav li{
106
-
107
- float:left;
108
-
109
- font-size: 16.88px;
110
-
111
- padding:0 15px;
112
-
113
- position: relative;
114
-
115
-
116
-
117
- }
118
-
119
-
120
-
121
- .gnav li ul{
122
-
123
- position: absolute;
124
-
125
- top:45px;
126
-
127
- left: -5px;
128
-
129
- height: 0;
130
-
131
- visibility: hidden;
132
-
133
- }
134
-
135
- .gnav li a{
136
-
137
- display: block;
138
-
139
- padding-bottom: 14px;
140
-
141
- }
142
-
143
- .gnav li li{
144
-
145
- width: 200px;
146
-
147
- border: solid 1px #f0f0f0;
148
-
149
- padding:10px 20px 0 20px;
150
-
151
- box-shadow: 0.5px 0.5px #f0f0f0;
152
-
153
- background-color: white;
154
-
155
- opacity: 0;
156
-
157
- transition: all 0.3s;
158
-
159
- }
160
-
161
- .gnav li:hover ul li{
162
-
163
- visibility: visible;
164
-
165
- opacity: 1;
166
-
167
- }
168
-
169
-
170
-
171
- .gnav li a:hover{
172
-
173
- color: #c49029;
174
-
175
- }
176
-
177
-
178
-
179
- .gnav{
180
-
181
- padding: 0 200px 0 0;
182
-
183
- }
184
-
185
-
186
-
187
-
188
-
189
- .search-wrapper{
190
-
191
- height: 40px;
192
-
193
- display: inline-block;
194
-
195
- float: right;
196
-
197
- position: relative;
198
-
199
- コード
200
-
201
- ```