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

質問編集履歴

5

コード追加

2020/05/28 09:29

投稿

tafuji12
tafuji12

スコア1

title CHANGED
File without changes
body CHANGED
@@ -87,6 +87,7 @@
87
87
 
88
88
  <
89
89
  ```
90
+
90
91
  ```CSS
91
92
 
92
93
  *{
@@ -250,6 +251,7 @@
250
251
  width: 23.8%;
251
252
  }
252
253
  ```
254
+ CSS追加とHTML書き換えたところ形は同じになりました。
253
255
  ```CSS
254
256
 
255
257
  .law {

4

コード追加

2020/05/28 09:29

投稿

tafuji12
tafuji12

スコア1

title CHANGED
File without changes
body CHANGED
@@ -250,6 +250,55 @@
250
250
  width: 23.8%;
251
251
  }
252
252
  ```
253
+ ```CSS
254
+
255
+ .law {
256
+ display: flex;
257
+ }
258
+
259
+ .law{
260
+ max-width: 1140px;
261
+ margin: 0 auto}
262
+ ```
263
+
264
+ ```HTML
265
+ <section class="section-features">
266
+ <div class="row">
267
+ <h2>Get food fast &mdash; not fast food.</h2>
268
+ <p class="long-copy">
269
+ Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
270
+ </p>
271
+ </div>
272
+
273
+ <div class="law">
274
+ <div class="col span-1-of-4">
275
+ <h3>Up to 365 days/year</h3>
276
+ <p>
277
+ Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
278
+ </p>
279
+ </div>
280
+ <div class="col span-1-of-4">
281
+ <h3>Ready in 20 minutes</h3>
282
+ <p>
283
+ You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
284
+ </p>
285
+ </div>
286
+ <div class="col span-1-of-4">
287
+ <h3>100% organic</h3>
288
+ <p>
289
+ All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
290
+ </p>
291
+ </div>
292
+ <div class="col span-1-of-4">
293
+ <h3>Order anything</h3>
294
+ <p>
295
+ We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
296
+ </div>
297
+ </div>
298
+
299
+
300
+ </section>
301
+ ```
253
302
  ### 試したこと
254
303
 
255
304
 

3

コード追加

2020/05/28 09:28

投稿

tafuji12
tafuji12

スコア1

title CHANGED
File without changes
body CHANGED
@@ -232,6 +232,24 @@
232
232
 
233
233
  }
234
234
  ```
235
+ grid css 全て入りませんでした。
236
+ ```
237
+ .span-4-of-4 {
238
+ width: 100%;
239
+ }
240
+
241
+ .span-3-of-4 {
242
+ width: 74.6%;
243
+ }
244
+
245
+ .span-2-of-4 {
246
+ width: 49.2%;
247
+ }
248
+
249
+ .span-1-of-4 {
250
+ width: 23.8%;
251
+ }
252
+ ```
235
253
  ### 試したこと
236
254
 
237
255
 

2

コードの追加

2020/05/28 09:05

投稿

tafuji12
tafuji12

スコア1

title CHANGED
File without changes
body CHANGED
@@ -8,8 +8,48 @@
8
8
 
9
9
  ### 該当のソースコード
10
10
  ```HTML
11
-
11
+ <html lang"en">
12
+ <head>
13
+ <link ref="stylesheet" type="text/css" href="vendors/css/normalize.css">
14
+ <link ref="stylesheet" type="text/css" href="vendors/css/grid.css">
15
+ <link rel="stylesheet" type=" text/css" href="resources/css/style.css">
16
+ <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
17
+ <title>Omnifood</title>
18
+
19
+ </head>
20
+ <body>
21
+ <header>
22
+ <nav>
23
+ <div class="row">
24
+ <img src="resources/img/logo-white.png" alt="Omnifood logo" class="logo">
25
+ <ul class="main-nav">
26
+ <li><a href="#">Food delivery</a></li>
27
+ <li><a href="#">How it works</a></li>
28
+ <li><a href="#">Our cities</a></li>
29
+ <li><a href="#">Sign up</a></li>
30
+ </ul>
31
+ </div>
32
+
33
+ </nav>
34
+ <div class="hero-text-box">
35
+ <h1>Goodbye junk food.<br> Hello super healthy meals.</h1>
36
+ <a class="btn btn-full" href="#">I'm hungry</a>
37
+ <a class="btn btn-ghost"href="#">Show me more</a>
38
+ </div>
39
+
40
+
41
+
42
+ </header>
43
+
44
+ <section class="section-features">
12
45
  <div class="row">
46
+ <h2>Get food fast &mdash; not fast food.</h2>
47
+ <p class="long-copy">
48
+ Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
49
+ </p>
50
+ </div>
51
+
52
+ <div class="row">
13
53
  <div class="col span-1-of-4">
14
54
  <h3>Up to 365 days/year</h3>
15
55
  <p>
@@ -35,15 +75,163 @@
35
75
  </div>
36
76
  </div>
37
77
 
78
+
79
+ </section>
80
+
81
+
82
+ </body>
83
+
84
+
85
+
86
+ </html>
87
+
88
+ <
38
89
  ```
39
90
  ```CSS
91
+
92
+ *{
93
+ margin: 0;
94
+ padding: 0;
95
+ box-sizing: border-box;
96
+ }
97
+
98
+ html{
99
+ background-color: #fff;
100
+ color: #555;
101
+ font-family :"Lato",'Arial',sans-serif;
102
+ font-weight: 300;
103
+ font-size: 20px;
104
+ text-rendering: optimizeLegibility;
105
+ }
106
+
107
+
108
+ /* ------------------------------------*/
109
+ /* REUSABLE COMPONENTS*/
110
+ /* ------------------------------------*/
111
+
112
+
113
+
114
+
40
115
  .row{
41
116
  max-width: 1140px;
42
117
  margin: 0 auto
43
- ```
44
118
 
119
+ }
45
120
 
121
+ /* --------HEADINGS--------*/
46
122
 
123
+
124
+ h1{
125
+ margin-top:0;
126
+ margin-bottom: 20px;
127
+ color: #fff;
128
+ font-size: 240%;
129
+ font-weight: 300;
130
+ text-transform: uppercase;
131
+ letter-spacing: 1px;
132
+ word-spacing: 4px
133
+
134
+ }
135
+
136
+
137
+ /* --------BUTTONS--------*/
138
+
139
+ .btn:link,
140
+ .btn:visited{
141
+ padding: 10px 30px;
142
+ display: inline-block;
143
+ font-weight: 300;
144
+ text-decoration: :none;
145
+ border-radius:200px;
146
+ transition:background-color 0.2s, border 0.2s, color 0.2s;
147
+ }
148
+
149
+ .btn-full:link,
150
+ .btn-full:visited{
151
+ background-color: #e67e22;
152
+ border: 1px solid #e67e22;
153
+ color:#fff;
154
+ margin-right: 15px;
155
+
156
+ }
157
+ .btn-ghost:link,
158
+ .btn-ghost:visited{
159
+ border: 1px solid #e67e22;
160
+ color:#e67e22;
161
+
162
+ }
163
+ .btn:hover,
164
+ .btn:active{
165
+ background-color: #cf6d17;
166
+ }
167
+
168
+ .btn-full:hover,
169
+ .btn-full:active{
170
+ border: 1px solid #cf6d17;
171
+ }
172
+ .btn-ghost:hover,
173
+ .btn-ghost:active{
174
+ border: 1px solid #cf6d17;
175
+ color:#fff;}
176
+
177
+
178
+
179
+ /* ------------------------------------*/
180
+ /* HEADE*/
181
+ /* ------------------------------------*/
182
+
183
+
184
+
185
+ header{
186
+ background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url(img/hero.jpg);
187
+ background-size: cover;
188
+ background-position: center;
189
+ height: 100vh
190
+ }
191
+
192
+ .hero-text-box{
193
+ position:absolute;
194
+ width: 1140px;
195
+ top: 50%;
196
+ left: 50%;
197
+ transform: translate(-50%,-50%);
198
+ }
199
+
200
+ .logo{
201
+ height: 100px;
202
+ width: auto;
203
+ float: left;
204
+ margin-top: 20px;
205
+
206
+ }
207
+
208
+ .main-nav{
209
+ float: right;
210
+ list-style: none;
211
+ }
212
+
213
+ .main-nav li{
214
+ display: inline-block;
215
+ margin-left: 40px;
216
+ margin-top: 55px;
217
+ }
218
+
219
+ .main-nav li a:link,
220
+ .main-nav li a:visited{
221
+ padding:8px 0;
222
+ color: #fff;
223
+ text-decoration:none;
224
+ text-transform: uppercase;
225
+ font-size; 90%;
226
+ border-bottom: 2px solid transparent;
227
+ transition: 0.2s;
228
+ }
229
+ .main-nav li a:hover,
230
+ .main-nav li a:active {
231
+ border-bottom: 2px solid #e67e22;
232
+
233
+ }
234
+ ```
47
235
  ### 試したこと
48
236
 
49
237
 

1

コードの記載、および画像挿入

2020/05/28 08:07

投稿

tafuji12
tafuji12

スコア1

title CHANGED
File without changes
body CHANGED
@@ -7,22 +7,43 @@
7
7
  参考にしている動画ではこの表記で横一列の表?になっている
8
8
 
9
9
  ### 該当のソースコード
10
- HTML
10
+ ```HTML
11
+
11
- <div class="row">
12
+ <div class="row">
12
13
  <div class="col span-1-of-4">
13
- <h1>aa</h1>
14
+ <h3>Up to 365 days/year</h3>
15
+ <p>
16
+ Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
17
+ </p>
14
18
  </div>
15
19
  <div class="col span-1-of-4">
16
- <h1>aa</h1>
20
+ <h3>Ready in 20 minutes</h3>
21
+ <p>
22
+ You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
23
+ </p>
17
24
  </div>
18
25
  <div class="col span-1-of-4">
19
- <h1>aa</h1>
26
+ <h3>100% organic</h3>
27
+ <p>
28
+ All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
29
+ </p>
20
30
  </div>
21
31
  <div class="col span-1-of-4">
22
- <h1>aa</h1>
32
+ <h3>Order anything</h3>
33
+ <p>
34
+ We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
23
35
  </div>
24
36
  </div>
37
+
38
+ ```
39
+ ```CSS
40
+ .row{
41
+ max-width: 1140px;
42
+ margin: 0 auto
43
+ ```
25
44
 
45
+
46
+
26
47
  ### 試したこと
27
48
 
28
49
 
@@ -31,4 +52,8 @@
31
52
 
32
53
  https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/learn/lecture/2619774?start=360#overview
33
54
 
34
- 動画URL
55
+ 動画URL
56
+
57
+ ![イメージ説明](f85d5658f42b56afffa4b5b364c494c8.png) 動画
58
+
59
+ ![イメージ説明](479c734f2d6948ac5532cdca14db905a.png) 私(Get... の部分が2行になってしまいます)