質問編集履歴

4

コードを見やすくしました。

2019/08/29 16:55

投稿

neomana-39
neomana-39

スコア11

test CHANGED
File without changes
test CHANGED
@@ -6,11 +6,11 @@
6
6
 
7
7
  右がSafariでも表示されるもので、左のファイルが表示されません。
8
8
 
9
- GoogleChromeでは1枚目のように意図したものがちゃんと表示されます。
9
+ GoogleChromeでは意図したものがちゃんと表示されます。
10
-
10
+
11
- しかし同じファイルをSafariで開こうとすると2枚目のようになってしまいます。
11
+ しかし同じファイルをSafariで開こうとするとの下の画像のようになってしまいます。
12
-
13
- ![イメージ説明](febc7629d4f3d66330ae1396bbde8d85.png)
12
+
13
+
14
14
 
15
15
  ![イメージ説明](7a17f5e2046db3767b5d217468984a02.png)
16
16
 
@@ -18,338 +18,356 @@
18
18
 
19
19
 
20
20
 
21
- HTMLをマークダウン文法に変換するサイト()を利用して得たファイルの中身です。
22
-
23
-
24
-
25
- ・index2.html
26
-
27
-
28
-
29
- <meta charset="utf-8">
30
-
31
-
32
-
33
- <title>航空機</title>
34
-
35
-
36
-
37
- <link rel="stylesheet" href="stylesheet2.css"  stlye="" type="text/css">
38
-
39
-
40
-
41
- <link rel="stylesheet" href="responsive.css" style="" type="text/css">
42
-
43
-
44
-
45
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
46
-
47
-
48
-
49
- <div class="header">
50
-
51
- <div class="header-logo">[
52
-
53
-
54
-
55
- <font color="skyblue">
56
-
57
- 航空機
58
-
59
- </font>](https://www.boeing.com)&lt;/div&gt;
60
-
61
-
62
-
63
- <div class="header-list">
64
-
65
- [1. 航空機について](https://www.google.com)
66
-
67
- [1. 揚力について](https://www.yahoo.co.jp)
68
-
69
- [1. 抗力について](https://neomana39.hatenablog.com)
70
-
71
- [1. ジャンボジェット](http://www.boeing.com/commercial/747/)
72
-
73
- </div>
74
-
75
- </div> <span class="fa fa-bars"></span>
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
- <div class="top-wrapper">
86
-
87
- <div class="copy-container">
88
-
89
- 流体<span>力学</span>
90
-
91
- =================
92
-
93
-
94
-
95
- 航空機の飛ぶ仕組み
96
-
97
- ---------
98
-
99
- </div>
100
-
101
- </div>
102
-
103
-
104
-
105
- <div class="main">
106
-
107
- <div class="contents">
108
-
109
- ### 航空機について
110
-
111
-
112
-
113
- <div class="contents-item">[![](DSC_0039.jpg)
114
-
115
-
116
-
117
-
118
-
119
- Boeing B787-9](https://www.boeing.com)&lt;/div&gt;
120
-
121
-
122
-
123
- <div class="contents-item">[![](DSC_0141.jpg)
124
-
125
-
126
-
127
-
128
-
129
- Boeing B747-8 intercontinental](https://www.airbus.com)&lt;/div&gt;
130
-
131
- </div>
132
-
133
-
134
-
135
- <div class="container"><center><span class="btn message">[飛行機が好きだ!](https://www.boeing.com)&lt;/span&gt;&lt;/center&gt;&lt;/div&gt;
136
-
137
-
138
-
139
- <div class="contact-form">
140
-
141
- ### お問い合わせ
142
-
143
-
144
-
145
- メールアドレス<span>(必須)</span>
146
-
147
-
148
-
149
- <input>
150
-
151
-
152
-
153
- お問い合わせ内容<span>(必須)</span>
154
-
155
-
156
-
157
- <textarea></textarea>
158
-
159
-
160
-
161
- ※必須項目は必ずご入力ください[<input class="contact-submit" type="submit" value="送信">](mailto:neomana39@gmail.com)
162
-
163
- </div>
164
-
165
- </div>
166
-
167
-
168
-
169
- <div class="footer">
170
-
171
- <div class="footer-logo">航空機</div>
172
-
173
-
174
-
175
- <div class="footer-list">
176
-
177
- [1. 航空機について](https://www.google.com)
178
-
179
- [1. 揚力](https://www.boeing.com)
180
-
181
- [1. 抗力](https://www.airbus.com)
182
-
183
- </div>
184
-
185
- </div>
186
-
187
-
188
-
189
-
190
-
191
- ・test.html(Progate初級編の内容)
192
-
193
-
194
-
195
- <meta charset="utf-8">
196
-
197
-
198
-
199
- <title>Progate</title>
200
-
201
-
202
-
203
- <link rel="stylesheet" href="test.css">
204
-
205
-
206
-
207
- <div class="header">
208
-
209
- <div class="header-logo">Progate</div>
210
-
211
-
212
-
213
- <div class="header-list">
214
-
215
- * プログラミングとは
216
-
217
- * 学べるレッスン
218
-
219
- * お問い合わせ
220
-
221
- </div>
222
-
223
- </div>
224
-
225
-
226
-
227
- <div class="main">
228
-
229
- <div class="copy-container">
230
-
231
- HELLO WORLD<span>.</span>
232
-
233
- =========================
234
-
235
-
236
-
237
- プログラミングの世界へようこそ
238
-
239
- ---------------
240
-
241
- </div>
242
-
243
-
244
-
245
- <div class="contents">
246
-
247
- ### 学べるレッスン
248
-
249
-
250
-
251
- <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg)
252
-
253
-
254
-
255
-
256
-
257
- HTML & CSS</div>
258
-
259
-
260
-
261
- <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg)
262
-
263
-
264
-
265
-
266
-
267
- PHP</div>
268
-
269
-
270
-
271
- <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg)
272
-
273
-
274
-
275
-
276
-
277
- Ruby</div>
278
-
279
-
280
-
281
- <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg)
282
-
283
-
284
-
285
-
286
-
287
- Swift</div>
288
-
289
- </div>
290
-
291
-
292
-
293
- <div class="contact-form">
294
-
295
- ### お問い合わせ
296
-
297
-
298
-
299
- メールアドレス(必須)
300
-
301
-
302
-
303
- <!-- <input>要素を追加してください -->
304
-
305
-
306
-
307
- <input>
308
-
309
-
310
-
311
- お問い合わせ内容(必須)
312
-
313
-
314
-
315
- <!-- <textarea>要素を追加してください -->
316
-
317
-
318
-
319
- <textarea></textarea>
320
-
321
-
322
-
323
- ※必須項目は必ずご入力ください
324
-
325
-
326
-
327
- <!-- <input>要素を追加してくださ -->
328
-
329
-
330
-
331
- <input class="contact-submit" type="submit" value="送信">
332
-
333
- </div>
334
-
335
- </div>
336
-
337
-
338
-
339
- <div class="footer">
340
-
341
- <div class="footer-logo">Progate</div>
342
-
343
-
344
-
345
- <div class="footer-list">
346
-
347
- * 会社概要
348
-
349
- * 採用
350
-
351
- * お問い合わせ
352
-
353
- </div>
354
-
355
- </div>
21
+
22
+
23
+
24
+
25
+ ```HTML
26
+
27
+ <!DOCTYPE html>
28
+
29
+ <html>
30
+
31
+ <head>
32
+
33
+ <meta charset="utf-8">
34
+
35
+ <title>航空機</title>
36
+
37
+ <link rel="stylesheet" href="stylesheet2.css" stlye type="text/css">
38
+
39
+ <link rel="stylesheet" href="responsive.css" style type="text/css">
40
+
41
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
42
+
43
+ </head>
44
+
45
+
46
+
47
+ <body>
48
+
49
+ <div class="header">
50
+
51
+
52
+
53
+
54
+
55
+ <div class="header-logo"><a href="https://www.boeing.com" style="text-decoration:none;">
56
+
57
+ <span style="color:aqua">航空機</span>
58
+
59
+ </div></a>
60
+
61
+
62
+
63
+ <div class="header-list">
64
+
65
+ <ul>
66
+
67
+ <a href="https://www.google.com"><li>航空機について</li></a>
68
+
69
+ <a href="https://www.yahoo.co.jp"><li>揚力について</li></a>
70
+
71
+ <a href="https://neomana39.hatenablog.com"><li>抗力について</li></a>
72
+
73
+ <a href="http://www.boeing.com/commercial/747/"><li>ジャンボジェット</li></a>
74
+
75
+ </ul>
76
+
77
+ </div>
78
+
79
+
80
+
81
+ </div>
82
+
83
+ <a href="#" class="menu-icon">
84
+
85
+ <span class="fa fa-bars"></span>
86
+
87
+ </a>
88
+
89
+
90
+
91
+
92
+
93
+ <div class="top-wrapper">
94
+
95
+ <div class="copy-container">
96
+
97
+
98
+
99
+ <h1>流体<span>力学</span></h1>
100
+
101
+ <h2>航空機の飛ぶ仕組み</h2>
102
+
103
+
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+
110
+
111
+
112
+
113
+
114
+
115
+ <div class="main">
116
+
117
+
118
+
119
+
120
+
121
+ <div class="contents">
122
+
123
+ <h3 class="section-title">航空機について</h3>
124
+
125
+ <div class="contents-item">
126
+
127
+ <a href="https://www.boeing.com"><img src="DSC_0039.jpg" width="350" height="220">
128
+
129
+ <p>Boeing B787-9</p></a>
130
+
131
+ </div>
132
+
133
+ <div class="contents-item">
134
+
135
+ <a href="https://www.airbus.com"><img src="DSC_0141.jpg" width="350" height="220">
136
+
137
+ <p>Boeing B747-8 intercontinental</p></a>
138
+
139
+ </div>
140
+
141
+
142
+
143
+
144
+
145
+ </div>
146
+
147
+
148
+
149
+ <div class="container">
150
+
151
+ <center><span class="btn message"><a href="https://www.boeing.com">飛行機が好きだ!</a></span></center>
152
+
153
+ </div>
154
+
155
+ <div class="contact-form">
156
+
157
+ <h3 class="section-title">お問い合わせ</h3>
158
+
159
+ <p>メールアドレス<span>(必須)</span></p>
160
+
161
+
162
+
163
+ <input>
164
+
165
+
166
+
167
+ <p>お問い合わせ内容<span>(必須)</span></p>
168
+
169
+
170
+
171
+ <textarea></textarea>
172
+
173
+
174
+
175
+ <p>※必須項目は必ずご入力ください</p>
176
+
177
+
178
+
179
+ <a href="mailto:neomana39@gmail.com"><input class="contact-submit" type="submit" value="送信"></a>
180
+
181
+ </div>
182
+
183
+
184
+
185
+ </div>
186
+
187
+
188
+
189
+
190
+
191
+
192
+
193
+ <div class="footer">
194
+
195
+ <div class="footer-logo">航空機</div>
196
+
197
+ <div class="footer-list">
198
+
199
+ <ul>
200
+
201
+ <a href="https://www.google.com"><li>航空機について</li></a>
202
+
203
+ <a href="https://www.boeing.com"><li>揚力</li></a>
204
+
205
+ <a href="https://www.airbus.com"><li>抗力</li></a>
206
+
207
+ </ul>
208
+
209
+ </div>
210
+
211
+ </div>
212
+
213
+ </body>
214
+
215
+ </html>
216
+
217
+
218
+
219
+ ```
220
+
221
+
222
+
223
+ ```HTML
224
+
225
+ <!DOCTYPE html>
226
+
227
+ <html>
228
+
229
+ <head>
230
+
231
+ <meta charset="utf-8">
232
+
233
+ <title>Progate</title>
234
+
235
+ <link rel="stylesheet" href="test.css">
236
+
237
+ </head>
238
+
239
+ <body>
240
+
241
+ <div class="header">
242
+
243
+ <div class="header-logo">Progate</div>
244
+
245
+ <div class="header-list">
246
+
247
+ <ul>
248
+
249
+ <li>プログラミングとは</li>
250
+
251
+ <li>学べるレッスン</li>
252
+
253
+ <li>お問い合わせ</li>
254
+
255
+ </ul>
256
+
257
+ </div>
258
+
259
+ </div>
260
+
261
+
262
+
263
+ <div class="main">
264
+
265
+ <div class="copy-container">
266
+
267
+ <h1>HELLO WORLD<span>.</span></h1>
268
+
269
+ <h2>プログラミングの世界へようこそ</h2>
270
+
271
+ </div>
272
+
273
+
274
+
275
+ <div class="contents">
276
+
277
+ <h3 class="section-title">学べるレッスン</h3>
278
+
279
+ <div class="contents-item">
280
+
281
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
282
+
283
+ <p>HTML & CSS</p>
284
+
285
+ </div>
286
+
287
+ <div class="contents-item">
288
+
289
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
290
+
291
+ <p>PHP</p>
292
+
293
+ </div>
294
+
295
+ <div class="contents-item">
296
+
297
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
298
+
299
+ <p>Ruby</p>
300
+
301
+ </div>
302
+
303
+ <div class="contents-item">
304
+
305
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
306
+
307
+ <p>Swift</p>
308
+
309
+ </div>
310
+
311
+ </div>
312
+
313
+
314
+
315
+ <div class="contact-form">
316
+
317
+ <h3 class="section-title">お問い合わせ</h3>
318
+
319
+ <p>メールアドレス(必須)</p>
320
+
321
+ <!-- <input>要素を追加してください -->
322
+
323
+ <input>
324
+
325
+
326
+
327
+ <p>お問合わせ内容(必須)</p>
328
+
329
+ <!-- <textarea>要素を追加してください -->
330
+
331
+ <textarea></textarea>
332
+
333
+
334
+
335
+ <p>※必須項目は必ずご入力ください</p>
336
+
337
+ <!-- <input>要素を追加してください -->
338
+
339
+ <input class="contact-submit" type="submit" value="送信">
340
+
341
+
342
+
343
+ </div>
344
+
345
+ </div>
346
+
347
+
348
+
349
+ <div class="footer">
350
+
351
+ <div class="footer-logo">Progate</div>
352
+
353
+ <div class="footer-list">
354
+
355
+ <ul>
356
+
357
+ <li>会社概要</li>
358
+
359
+ <li>採用</li>
360
+
361
+ <li>お問い合わせ</li>
362
+
363
+ </ul>
364
+
365
+ </div>
366
+
367
+ </div>
368
+
369
+ </body>
370
+
371
+ </html>
372
+
373
+ ```

3

写真を追加しました。

2019/08/29 16:55

投稿

neomana-39
neomana-39

スコア11

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,13 @@
6
6
 
7
7
  右がSafariでも表示されるもので、左のファイルが表示されません。
8
8
 
9
-
9
+ GoogleChromeでは1枚目のように意図したものがちゃんと表示されます。
10
+
11
+ しかし同じファイルをSafariで開こうとすると2枚目のようになってしまいます。
12
+
13
+ ![イメージ説明](febc7629d4f3d66330ae1396bbde8d85.png)
14
+
15
+ ![イメージ説明](7a17f5e2046db3767b5d217468984a02.png)
10
16
 
11
17
  よろしくお願いします。
12
18
 

2

マークダウン文法の記述を質問本文に追加いたしました。

2019/08/29 16:41

投稿

neomana-39
neomana-39

スコア11

test CHANGED
File without changes
test CHANGED
@@ -9,3 +9,341 @@
9
9
 
10
10
 
11
11
  よろしくお願いします。
12
+
13
+
14
+
15
+ HTMLをマークダウン文法に変換するサイト()を利用して得たファイルの中身です。
16
+
17
+
18
+
19
+ ・index2.html
20
+
21
+
22
+
23
+ <meta charset="utf-8">
24
+
25
+
26
+
27
+ <title>航空機</title>
28
+
29
+
30
+
31
+ <link rel="stylesheet" href="stylesheet2.css"  stlye="" type="text/css">
32
+
33
+
34
+
35
+ <link rel="stylesheet" href="responsive.css" style="" type="text/css">
36
+
37
+
38
+
39
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
40
+
41
+
42
+
43
+ <div class="header">
44
+
45
+ <div class="header-logo">[
46
+
47
+
48
+
49
+ <font color="skyblue">
50
+
51
+ 航空機
52
+
53
+ </font>](https://www.boeing.com)&lt;/div&gt;
54
+
55
+
56
+
57
+ <div class="header-list">
58
+
59
+ [1. 航空機について](https://www.google.com)
60
+
61
+ [1. 揚力について](https://www.yahoo.co.jp)
62
+
63
+ [1. 抗力について](https://neomana39.hatenablog.com)
64
+
65
+ [1. ジャンボジェット](http://www.boeing.com/commercial/747/)
66
+
67
+ </div>
68
+
69
+ </div> <span class="fa fa-bars"></span>
70
+
71
+
72
+
73
+
74
+
75
+
76
+
77
+
78
+
79
+ <div class="top-wrapper">
80
+
81
+ <div class="copy-container">
82
+
83
+ 流体<span>力学</span>
84
+
85
+ =================
86
+
87
+
88
+
89
+ 航空機の飛ぶ仕組み
90
+
91
+ ---------
92
+
93
+ </div>
94
+
95
+ </div>
96
+
97
+
98
+
99
+ <div class="main">
100
+
101
+ <div class="contents">
102
+
103
+ ### 航空機について
104
+
105
+
106
+
107
+ <div class="contents-item">[![](DSC_0039.jpg)
108
+
109
+
110
+
111
+
112
+
113
+ Boeing B787-9](https://www.boeing.com)&lt;/div&gt;
114
+
115
+
116
+
117
+ <div class="contents-item">[![](DSC_0141.jpg)
118
+
119
+
120
+
121
+
122
+
123
+ Boeing B747-8 intercontinental](https://www.airbus.com)&lt;/div&gt;
124
+
125
+ </div>
126
+
127
+
128
+
129
+ <div class="container"><center><span class="btn message">[飛行機が好きだ!](https://www.boeing.com)&lt;/span&gt;&lt;/center&gt;&lt;/div&gt;
130
+
131
+
132
+
133
+ <div class="contact-form">
134
+
135
+ ### お問い合わせ
136
+
137
+
138
+
139
+ メールアドレス<span>(必須)</span>
140
+
141
+
142
+
143
+ <input>
144
+
145
+
146
+
147
+ お問い合わせ内容<span>(必須)</span>
148
+
149
+
150
+
151
+ <textarea></textarea>
152
+
153
+
154
+
155
+ ※必須項目は必ずご入力ください[<input class="contact-submit" type="submit" value="送信">](mailto:neomana39@gmail.com)
156
+
157
+ </div>
158
+
159
+ </div>
160
+
161
+
162
+
163
+ <div class="footer">
164
+
165
+ <div class="footer-logo">航空機</div>
166
+
167
+
168
+
169
+ <div class="footer-list">
170
+
171
+ [1. 航空機について](https://www.google.com)
172
+
173
+ [1. 揚力](https://www.boeing.com)
174
+
175
+ [1. 抗力](https://www.airbus.com)
176
+
177
+ </div>
178
+
179
+ </div>
180
+
181
+
182
+
183
+
184
+
185
+ ・test.html(Progate初級編の内容)
186
+
187
+
188
+
189
+ <meta charset="utf-8">
190
+
191
+
192
+
193
+ <title>Progate</title>
194
+
195
+
196
+
197
+ <link rel="stylesheet" href="test.css">
198
+
199
+
200
+
201
+ <div class="header">
202
+
203
+ <div class="header-logo">Progate</div>
204
+
205
+
206
+
207
+ <div class="header-list">
208
+
209
+ * プログラミングとは
210
+
211
+ * 学べるレッスン
212
+
213
+ * お問い合わせ
214
+
215
+ </div>
216
+
217
+ </div>
218
+
219
+
220
+
221
+ <div class="main">
222
+
223
+ <div class="copy-container">
224
+
225
+ HELLO WORLD<span>.</span>
226
+
227
+ =========================
228
+
229
+
230
+
231
+ プログラミングの世界へようこそ
232
+
233
+ ---------------
234
+
235
+ </div>
236
+
237
+
238
+
239
+ <div class="contents">
240
+
241
+ ### 学べるレッスン
242
+
243
+
244
+
245
+ <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg)
246
+
247
+
248
+
249
+
250
+
251
+ HTML & CSS</div>
252
+
253
+
254
+
255
+ <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg)
256
+
257
+
258
+
259
+
260
+
261
+ PHP</div>
262
+
263
+
264
+
265
+ <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg)
266
+
267
+
268
+
269
+
270
+
271
+ Ruby</div>
272
+
273
+
274
+
275
+ <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg)
276
+
277
+
278
+
279
+
280
+
281
+ Swift</div>
282
+
283
+ </div>
284
+
285
+
286
+
287
+ <div class="contact-form">
288
+
289
+ ### お問い合わせ
290
+
291
+
292
+
293
+ メールアドレス(必須)
294
+
295
+
296
+
297
+ <!-- <input>要素を追加してください -->
298
+
299
+
300
+
301
+ <input>
302
+
303
+
304
+
305
+ お問い合わせ内容(必須)
306
+
307
+
308
+
309
+ <!-- <textarea>要素を追加してください -->
310
+
311
+
312
+
313
+ <textarea></textarea>
314
+
315
+
316
+
317
+ ※必須項目は必ずご入力ください
318
+
319
+
320
+
321
+ <!-- <input>要素を追加してください -->
322
+
323
+
324
+
325
+ <input class="contact-submit" type="submit" value="送信">
326
+
327
+ </div>
328
+
329
+ </div>
330
+
331
+
332
+
333
+ <div class="footer">
334
+
335
+ <div class="footer-logo">Progate</div>
336
+
337
+
338
+
339
+ <div class="footer-list">
340
+
341
+ * 会社概要
342
+
343
+ * 採用
344
+
345
+ * お問い合わせ
346
+
347
+ </div>
348
+
349
+ </div>

1

日本語がおかしかったです。申し訳ございません。

2019/08/29 13:53

投稿

neomana-39
neomana-39

スコア11

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 同じhtmlファイルでもGoogleChromeでは開くきるのですが、Safariになると開くことができないものがあります。
1
+ 同じhtmlファイルでもGoogleChromeでは開くと意図通りの表示ないのですが、Safariになると開くことができないものがあります。
2
2
 
3
3
  また、以下のように開く前から若干表示方法が違っています。
4
4