teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

CSSの変更

2020/08/29 04:09

投稿

takawork
takawork

スコア95

title CHANGED
File without changes
body CHANGED
@@ -60,123 +60,98 @@
60
60
  </html>
61
61
  ```
62
62
  ```
63
+ /* CSSのリセット */
64
+ * {
65
+ margin: 0;
66
+ padding: 0;
67
+ box-sizing: border-box;
68
+ outline: none;
69
+ font-family: 'Roboto', sans-serif;
70
+ }
71
+ /* ヘッダー */
63
72
  .header {
73
+ height: 60px;
64
- background:green;
74
+ background-color:#030201;
65
75
  }
66
- .navbar {
76
+ .logo {
77
+ height: 60px;
78
+ float: left;
67
- max-width: 1140px;
79
+ margin-left: 10px;
68
- margin: 0 auto;
69
- display: flex;
70
- justify-content: space-between;
71
- align-items: center;
72
80
  }
73
-
74
- .navbar ul{
81
+ .form {
75
- display: flex;
82
+ float: right;
83
+ padding:;
84
+ background-color: dimgrey;
76
- list-style: none;
85
+ margin-right: 20px;
86
+
77
87
  }
78
- .navbar li {
88
+ .form a{
89
+ color:white;
90
+ font-weight: bold;
79
- margin-left: 2rem;
91
+ line-height: 60px;
80
92
  }
81
- .navbar a {
82
- color: white;
83
- }
84
93
 
94
+ /* ナビゲーション */
95
+ /* メインビジュアル */
85
- .hero {
96
+ .mv {
97
+ max-width: 1140px;
86
- min-height: 503px;
98
+ height: 500px;
87
- background-image: url("../img/gorira.jpeg");
88
- background-size: cover;
99
+ background-color: #ABCDD6;
89
- display: flex;
100
+ display: flex;
90
- align-items: center;
91
- justify-content: center;
92
101
  }
93
-
94
- .lead {
102
+ .mv-left {
103
+ width:50%;
95
- color: white;
104
+ padding:20px;
96
- text-align: center;
97
105
  }
106
+ .mv-left h1 {
107
+ font-size:36px;
108
+ }
109
+ .mv-left-search p {
98
110
 
99
- .content {
100
- display: flex;
101
- max-width: 1140px;
102
- margin: 0 auto;
103
111
  }
104
- .main {
112
+ .mv-left-search span {
113
+ font-size:28px;
105
- flex: 5;
114
+ color:red;
115
+ font-weight: bold;
106
116
  }
107
- .main img {
117
+ .mv-right {
108
- width: 100%;
118
+ width:50%;
119
+ padding:20px;
109
120
  }
110
- .sidebar {
121
+ .japanMap {
111
- flex: 2;
122
+ height: 400px;
123
+ padding-top:30px;
112
124
  }
125
+ .map {
113
- .sidebar img {
126
+ position: relative;
114
- width: 50%;
115
127
  }
116
-
117
- .section {
128
+ .kyushu {
129
+ position: absolute;
130
+ top:100px;
118
- display: flex;
131
+ left: 20px;
119
132
  }
120
- .image {
133
+ .map-list {
134
+ box-sizing: border-box;
135
+ border:2px solid #ccc;
121
- flex: 2;
136
+ border-radius: 6px;
122
137
  }
123
- .desc {
138
+ .map-list a{
139
+ background-color: aliceblue;
140
+ display:flex;
124
- flex: 5;
141
+ width:66px;
125
- padding: 0 2rem;
142
+ height: 28px;
143
+ font-size:14px;
144
+ align-items: center;
145
+ justify-content: center;
146
+ font-weight: 700;
126
147
  }
127
-
128
- .section img {
148
+ .map-list li {
149
+ text-align: center;
129
- max-width: 100%;
150
+ list-style: none;
130
151
  }
131
152
 
132
- .footer {
133
- min-height: 200px;
134
- background-color: gray;
135
- display: flex;
136
- justify-content: center;
137
- align-items: center;
138
- color: white;
139
- margin-top: auto;
140
-
141
-
142
-
143
- }
144
153
 
145
- .h-100 {
146
- display: flex;
147
- flex-direction: column;
148
- min-height: 100vh;
149
- }
150
154
 
151
155
 
152
- @media(max-width: 768px){
153
- .navbar {
154
- flex-direction: column;
155
- }
156
- ul {
157
- flex-wrap: wrap;
158
- }
159
- .navbar img {
160
- margin: 1rem auto;
161
- }
162
156
 
163
- .content {
164
- flex-direction: column;
165
- }
166
-
167
- .section {
168
- flex-direction: column;
169
- }
170
- .desc {
171
- padding: 0;
172
- }
173
- .content, image {
174
- margin-right: 0;
175
- }
176
- }
177
-
178
-
179
-
180
-
181
-
182
157
  ```