質問編集履歴

3

画像の挿入

2020/04/26 08:29

投稿

takumi378
takumi378

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ ![イメージ説明](e50e2d5673e184910d08b67493f01cb4.jpeg)
2
+
1
3
  ```html
2
4
 
3
5
  <!DOCTYPE html>

2

cssコード

2020/04/26 08:29

投稿

takumi378
takumi378

スコア2

test CHANGED
File without changes
test CHANGED
@@ -132,6 +132,42 @@
132
132
 
133
133
  </section>
134
134
 
135
+ <section id="sns">
136
+
137
+ <div class="wrapper">
138
+
139
+ <div class="sns-box">
140
+
141
+ <h3 class="sub-title">Facebook</h3>
142
+
143
+ Facebookプラグイン
144
+
145
+ </div>
146
+
147
+
148
+
149
+ <div class="sns-box">
150
+
151
+ <h3 class="sub-title">Twitter</h3>
152
+
153
+ Twitterプラグイン
154
+
155
+ </div>
156
+
157
+
158
+
159
+ <div class="sns-box">
160
+
161
+ <h3 class="sub-title">YouTube</h3>
162
+
163
+ YouTubeプラグイン
164
+
165
+ </div>
166
+
167
+ </div>
168
+
169
+ </section>
170
+
135
171
 
136
172
 
137
173
 
@@ -150,143 +186,135 @@
150
186
 
151
187
  </html>
152
188
 
189
+ ```
190
+
191
+
192
+
153
193
  ```css
154
194
 
155
- #contact .page-title{
195
+ #contact {
196
+
156
-
197
+ background-image: url(../images/contact-bg.jpg);
198
+
157
- margin-top: 40px;
199
+ min-height: 100vh;
158
-
200
+
159
- }
201
+ }
202
+
160
-
203
+ form div {
204
+
161
- /* フォーム */
205
+ margin-bottom: 14px;
206
+
162
-
207
+ }
208
+
209
+ label {
210
+
211
+ font-size: 1.125rem;
212
+
213
+ margin-bottom: 10px;
214
+
215
+ display: block;
216
+
217
+ }
218
+
163
- input[type="text"],
219
+ input[type="text"],
164
-
220
+
165
- input[type="email"],
221
+ input[type="email"],
166
-
222
+
167
- textarea {
223
+ textarea {
224
+
168
-
225
+ background: rgba(255, 255, 255, .5);
226
+
227
+ border: 1px #fff solid;
228
+
229
+ border-radius: 5px;
230
+
169
- max-width: 100%;
231
+ padding: 10px ;
232
+
170
-
233
+ font-size: 1rem;
234
+
171
- }
235
+ }
172
-
173
- }
236
+
174
-
175
- .grid {
176
-
177
- display: grid;
178
-
179
- gap: 26px;
180
-
181
- grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) ;
182
-
183
- margin-top: 6%;
184
-
185
- margin-bottom: 50px;
237
+ input[type="text"],
186
-
187
- }
238
+
188
-
189
- .big-box {
190
-
191
- grid-column: 1 / 3;
239
+ input[type="email"] {
192
-
193
- grid-row: 1 / 3;
194
-
195
- }
196
-
197
- .big-box img {
198
-
199
- height: 94%;
200
240
 
201
241
  width: 100%;
202
242
 
203
- object-fit: cover;
243
+ max-width: 240px;
204
-
244
+
205
- }
245
+ }
206
-
207
- /*CONTACT */
208
-
209
- #contact {
210
-
211
- background-image: url(../images/contact-bg.jpg);
212
-
213
- min-height: 100vh;
214
-
215
- }
216
-
217
- form div {
218
-
219
- margin-bottom: 14px;
220
-
221
- }
222
-
223
- label {
224
-
225
- font-size: 1.125rem;
226
-
227
- margin-bottom: 10px;
228
-
229
- display: block;
230
-
231
- }
232
-
233
- input[type="text"],
234
-
235
- input[type="email"],
236
246
 
237
247
  textarea {
238
248
 
239
- background: rgba(255, 255, 255, .5);
240
-
241
- border: 1px #fff solid;
242
-
243
- border-radius: 5px;
244
-
245
- padding: 10px ;
246
-
247
- font-size: 1rem;
248
-
249
- }
250
-
251
- input[type="text"],
252
-
253
- input[type="email"] {
254
-
255
249
  width: 100%;
256
250
 
257
- max-width: 240px;
251
+ max-width: 480px;
252
+
258
-
253
+ height: 6rem;
254
+
255
+ }
256
+
257
+ input[type="submit"] {
258
+
259
+ border: none;
260
+
261
+ cursor: pointer;
262
+
263
+ line-height: 1;
264
+
259
- }
265
+ }
266
+
260
-
267
+ /* 店舗情報 */
268
+
269
+ #location {
270
+
271
+ padding: 4% 0;
272
+
273
+ }
274
+
275
+ #location .wrapper {
276
+
277
+ display: flex;
278
+
279
+ justify-content: space-between;
280
+
281
+ }
282
+
283
+ .location-info {
284
+
285
+ width: 22%;
286
+
287
+ }
288
+
289
+ .location-info {
290
+
291
+ padding: 12px 10px;
292
+
293
+ }
294
+
295
+ .location-map {
296
+
297
+ width: 74%;
298
+
299
+ }
300
+
261
- textarea {
301
+ iframe {
262
302
 
263
303
  width: 100%;
264
304
 
265
- max-width: 480px;
266
-
267
- height: 6rem;
268
-
269
- }
270
-
271
- input[type="submit"] {
272
-
273
- border: none;
274
-
275
- cursor: pointer;
276
-
277
- line-height: 1;
278
-
279
- }
305
+ }
280
-
306
+
281
- /* 店舗情報 */
307
+ /* SNS */
282
-
308
+
283
- #location {
309
+ #sns {
310
+
284
-
311
+ background: #FAF7F0;
312
+
285
- padding: 4% 0;
313
+ padding: 4% 0;
286
-
314
+
287
- }
315
+ }
288
-
316
+
289
- #location .wrapper {
317
+ #sns .wrapper {
290
318
 
291
319
  display: flex;
292
320
 
@@ -294,33 +322,25 @@
294
322
 
295
323
  }
296
324
 
297
- .location-info {
325
+ #sns .sub-title {
298
-
326
+
299
- width: 22%;
327
+ margin-bottom: 30px;
300
-
328
+
301
- }
329
+ }
302
-
303
- .location-info {
330
+
304
-
305
- padding: 12px 10px;
306
-
307
- }
308
-
309
- .location-map {
331
+ .sns-box {
310
-
311
- width: 74%;
332
+
312
-
313
- }
314
-
315
- iframe {
316
-
317
- width: 100%;
333
+ width: 30%;
318
334
 
319
335
  }
320
336
 
321
337
  ```
322
338
 
339
+
340
+
341
+
342
+
323
- ```![イメージ説明](71fd31098fee8c903d38ee5fd2cee842.jpeg)![イメージ説明](e56386cd5e3e4b1ed4c4f569f5815d0a.jpeg)
343
+ ![イメージ説明](71fd31098fee8c903d38ee5fd2cee842.jpeg)![イメージ説明](e56386cd5e3e4b1ed4c4f569f5815d0a.jpeg)
324
344
 
325
345
 
326
346
 

1

コード挿入

2020/04/26 05:51

投稿

takumi378
takumi378

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,326 @@
1
- ![イメージ説明](71fd31098fee8c903d38ee5fd2cee842.jpeg)![イメージ説明](e56386cd5e3e4b1ed4c4f569f5815d0a.jpeg)
1
+ ```html
2
+
3
+ <!DOCTYPE html>
4
+
5
+ <html lang="ja">
6
+
7
+ <head>
8
+
9
+ <meta charset="UTF-8">
10
+
11
+ <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
12
+
13
+ <title>WCB Cafe-CONTACT</title>
14
+
15
+ <link rel="stylesheet" href="css/style.css">
16
+
17
+ <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
18
+
19
+ <link rel="stylesheet" href="htpps://fonts.googleapis.com/css?family=Philosopher">
20
+
21
+ <link rel="icon" type="image/png" href="images/favicon.png">
22
+
23
+
24
+
25
+ </head>
26
+
27
+ <body>
28
+
29
+ <div id="contact" class="big-bg">
30
+
31
+ <header class="page-header wrapper">
32
+
33
+ <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCB カフェホーム"></a></h1>
34
+
35
+ <nav>
36
+
37
+ <ul class="main-navi">
38
+
39
+ <li><a href="news.html">News</a></li>
40
+
41
+ <li><a href="menu.html">Menu</a></li>
42
+
43
+ <li><a href="contact.html">Contact</a></li>
44
+
45
+ </ul>
46
+
47
+ </nav>
48
+
49
+ </header>
50
+
51
+ <div class="wrapper">
52
+
53
+ <h2 class="page-title">Contact</h2>
54
+
55
+ <form action="#">
56
+
57
+ <div>
58
+
59
+ <label for="name">お名前</label>
60
+
61
+ <input type="text" id="name" name="your-name">
62
+
63
+ </div>
64
+
65
+
66
+
67
+ <div>
68
+
69
+ <label for="email">メールアドレス</label>
70
+
71
+ <input type="email" id="email" name="your-email">
72
+
73
+ </div>
74
+
75
+
76
+
77
+ <div>
78
+
79
+ <label for="message">メッセージ</label>
80
+
81
+ <textarea name="your-message" id="message"></textarea>
82
+
83
+ </div>
84
+
85
+
86
+
87
+ <input type="submit" class="button" value="送信">
88
+
89
+ </form>
90
+
91
+ </div>
92
+
93
+
94
+
95
+ </div>
96
+
97
+ <section id="location">
98
+
99
+ <div class="wrapper">
100
+
101
+ <div class="location-info">
102
+
103
+ <h3 class="sub-title">カフェ 東駅前店</h3>
104
+
105
+ <p>
106
+
107
+ 住所: 東京都〇〇区<br>
108
+
109
+ 〇〇〇〇〇〇〇 000-22-1<br>
110
+
111
+ 〇〇〇〇<br>
112
+
113
+ 電話: 03-1111-1111<br>
114
+
115
+ 営業時間: 10:00〜20:00<br>
116
+
117
+ 休日:水曜
118
+
119
+ </p>
120
+
121
+ </div><!--.location-info-->
122
+
123
+
124
+
125
+ <div class="location-map">
126
+
127
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.4471894579833!2d139.73466315064783!3d35.66598938010076!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b835942e165%3A0xb4897f1f4264c771!2z44CSMTA2LTAwMzIg5p2x5Lqs6YO95riv5Yy65YWt5pys5pyo77yS5LiB55uu77yU4oiS77yV!5e0!3m2!1sja!2sjp!4v1587871428542!5m2!1sja!2sjp" width="800" height="400" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
128
+
129
+ </div>
130
+
131
+ </div><!--wrapper-->
132
+
133
+ </section>
134
+
135
+
136
+
137
+
138
+
139
+ <footer>
140
+
141
+ <div class="wrapper">
142
+
143
+ <p><small>&copy; 2019 Manabox</small></p>
144
+
145
+ </div>
146
+
147
+ </footer>
148
+
149
+ </body>
150
+
151
+ </html>
152
+
153
+ ```css
154
+
155
+ #contact .page-title{
156
+
157
+ margin-top: 40px;
158
+
159
+ }
160
+
161
+ /* フォーム */
162
+
163
+ input[type="text"],
164
+
165
+ input[type="email"],
166
+
167
+ textarea {
168
+
169
+ max-width: 100%;
170
+
171
+ }
172
+
173
+ }
174
+
175
+ .grid {
176
+
177
+ display: grid;
178
+
179
+ gap: 26px;
180
+
181
+ grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) ;
182
+
183
+ margin-top: 6%;
184
+
185
+ margin-bottom: 50px;
186
+
187
+ }
188
+
189
+ .big-box {
190
+
191
+ grid-column: 1 / 3;
192
+
193
+ grid-row: 1 / 3;
194
+
195
+ }
196
+
197
+ .big-box img {
198
+
199
+ height: 94%;
200
+
201
+ width: 100%;
202
+
203
+ object-fit: cover;
204
+
205
+ }
206
+
207
+ /*CONTACT */
208
+
209
+ #contact {
210
+
211
+ background-image: url(../images/contact-bg.jpg);
212
+
213
+ min-height: 100vh;
214
+
215
+ }
216
+
217
+ form div {
218
+
219
+ margin-bottom: 14px;
220
+
221
+ }
222
+
223
+ label {
224
+
225
+ font-size: 1.125rem;
226
+
227
+ margin-bottom: 10px;
228
+
229
+ display: block;
230
+
231
+ }
232
+
233
+ input[type="text"],
234
+
235
+ input[type="email"],
236
+
237
+ textarea {
238
+
239
+ background: rgba(255, 255, 255, .5);
240
+
241
+ border: 1px #fff solid;
242
+
243
+ border-radius: 5px;
244
+
245
+ padding: 10px ;
246
+
247
+ font-size: 1rem;
248
+
249
+ }
250
+
251
+ input[type="text"],
252
+
253
+ input[type="email"] {
254
+
255
+ width: 100%;
256
+
257
+ max-width: 240px;
258
+
259
+ }
260
+
261
+ textarea {
262
+
263
+ width: 100%;
264
+
265
+ max-width: 480px;
266
+
267
+ height: 6rem;
268
+
269
+ }
270
+
271
+ input[type="submit"] {
272
+
273
+ border: none;
274
+
275
+ cursor: pointer;
276
+
277
+ line-height: 1;
278
+
279
+ }
280
+
281
+ /* 店舗情報 */
282
+
283
+ #location {
284
+
285
+ padding: 4% 0;
286
+
287
+ }
288
+
289
+ #location .wrapper {
290
+
291
+ display: flex;
292
+
293
+ justify-content: space-between;
294
+
295
+ }
296
+
297
+ .location-info {
298
+
299
+ width: 22%;
300
+
301
+ }
302
+
303
+ .location-info {
304
+
305
+ padding: 12px 10px;
306
+
307
+ }
308
+
309
+ .location-map {
310
+
311
+ width: 74%;
312
+
313
+ }
314
+
315
+ iframe {
316
+
317
+ width: 100%;
318
+
319
+ }
320
+
321
+ ```
322
+
323
+ ```![イメージ説明](71fd31098fee8c903d38ee5fd2cee842.jpeg)![イメージ説明](e56386cd5e3e4b1ed4c4f569f5815d0a.jpeg)
2
324
 
3
325
 
4
326