質問編集履歴

1

CSSのコードを追加しました。

2022/05/27 03:34

投稿

Haruki
Haruki

スコア1

test CHANGED
File without changes
test CHANGED
@@ -24,17 +24,85 @@
24
24
  ```
25
25
 
26
26
  ```CSS
27
+ /* header */
28
+ header {
29
+ width:100%;
30
+ position: fixed;
31
+ height: 70px;
32
+ background-color:#e7f5fc;
33
+ box-sizing: border-box;
34
+ }
35
+
36
+
37
+ .header-container {
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: space-between;
41
+ padding: 0px 40px;
42
+ height:70px;
43
+ }
44
+
45
+ .header-logo {
46
+ font-family: 'ten-mincho-text',serif;
47
+ font-weight: 400;
48
+ font-style: normal;
49
+ font-size: 30px;
50
+ font-weight: bold;
51
+ line-height: 1.2;
52
+ margin-right: 20px;
53
+ letter-spacing: .05em;
54
+ }
55
+
56
+ .header-logo a {
57
+ color:#668451 ;
58
+ }
59
+
60
+ .gnav-item a {
61
+ font-family: shelby,sans-serif;
62
+ font-weight: 400;
63
+ font-style: normal;
64
+ font-size: 35px;
65
+ color: rgba(0, 0, 0, 0.659);
66
+ }
67
+
68
+ .gnav-item:hover {
69
+ background-color: #adce9775;
70
+ border-radius: 10px;
71
+ padding: 0px 5px;
72
+ }
73
+
74
+ .gnav-list {
75
+ display: flex;
76
+ }
77
+
78
+ .gnav-item:not(:last-child) {
79
+ margin-right: 35px;
80
+ }
81
+
82
+ .humberger {
83
+ display: none;
84
+ }
85
+
86
+ /* phone-header */
87
+ @media (max-width:760px){
27
- container {
88
+ container {
28
89
  width: 100%;
29
90
  }
30
91
 
31
- .header-logo {
92
+ .header-logo {
32
93
  text-align: center;
94
+ margin: 0;
95
+ padding-top: 10px;
33
96
  }
34
97
 
98
+ header {
99
+ height: 90px;
100
+ }
101
+
35
- .gnav {
102
+ .gnav {
36
103
  width: 100vh;
37
104
  padding: 0 20px;
105
+
38
106
  }
39
107
 
40
108
  ul.gnav-list{
@@ -56,4 +124,9 @@
56
124
  .gnav-item:not(:last-child) {
57
125
  margin-right: 20px;
58
126
  }
127
+
128
+
129
+ }
130
+
131
+
59
132
  ```