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

質問編集履歴

4

データファイルの内容

2021/03/05 05:51

投稿

ryouhei-inamoto
ryouhei-inamoto

スコア2

title CHANGED
File without changes
body CHANGED
@@ -352,4 +352,7 @@
352
352
  })(document);
353
353
  </script>
354
354
  </head>
355
- ```
355
+ ```
356
+
357
+ データファイルの内容
358
+ ![イメージ説明](6722dd4d488a10f163fe05a6e1bf6409.png)

3

htmlのheadを追加

2021/03/05 05:51

投稿

ryouhei-inamoto
ryouhei-inamoto

スコア2

title CHANGED
File without changes
body CHANGED
@@ -320,4 +320,36 @@
320
320
  font-size:30px;
321
321
  margin-right: 20px;
322
322
  }
323
+ ```
324
+
325
+ ```htmlのhead
326
+ <head>
327
+ <meta charset="UTF-8">
328
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
329
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
330
+ <title>エイエム建設コンサルタント</title>
331
+ <link rel="stylesheet" href="https://use.typekit.net/hbd1ema.css">
332
+ <link rel="preconnect" href="https://fonts.gstatic.com">
333
+ <link rel="preconnect" href="https://fonts.gstatic.com">
334
+ <link href="https://fonts.googleapis.com/css2family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">
335
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap" rel="stylesheet">
336
+ <link rel="stylesheet" href="https://use.typekit.net/hbd1ema.css">
337
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
338
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
339
+ <link rel="stylesheet" href="style.css">
340
+ <link rel="stylesheet" href="style.css.map">
341
+ <link rel="stylesheet" href="style.scss">
342
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
343
+ <script src="jquery.bgswitcher.js"></script>
344
+ <script>
345
+ (function(d) {
346
+ var config = {
347
+ kitId: 'fof6kzf',
348
+ scriptTimeout: 3000,
349
+ async: true
350
+ },
351
+ h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
352
+ })(document);
353
+ </script>
354
+ </head>
323
355
  ```

2

html・cssファイルのコードを提示

2021/03/05 05:03

投稿

ryouhei-inamoto
ryouhei-inamoto

スコア2

title CHANGED
File without changes
body CHANGED
@@ -142,4 +142,182 @@
142
142
  at j (jquery.js:3099)
143
143
  at Object.fireWith [as resolveWith] (jquery.js:3211)
144
144
  at Function.ready (jquery.js:3417)
145
- at HTMLDocument.I (jquery.js:3433)
145
+ at HTMLDocument.I (jquery.js:3433)
146
+
147
+ htmlファイル
148
+ ```html
149
+ <header>
150
+ <div class="top-header">
151
+ <div class="header-icon">
152
+ <img src="image/company-icon.png" alt="会社のアイコン">
153
+ <p class="header-text">株式会社</p>
154
+ <p class="header-text2">エイエム建設<br class="sp-ber">コンサルタント</p>
155
+ </div>
156
+ <div class="tel-number">
157
+ <p>tel. 0852-24-8682</p>
158
+ </div>
159
+ <div class="menu-icon">
160
+ <p><a href="#"><i class="fas fa-bars"></i></a></p>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="nav-top">
165
+ <ul>
166
+ <li><a class=”current” href=”#”>ホーム</a></li>
167
+ <li><a href=”#”>会社概要</a></li>
168
+ <li><a href=”#”>事業内容</a></li>
169
+ <li><a href=”#”>有資格者</a></li>
170
+ <li><a href=”#”>採用方法</a></li>
171
+ <li><a href="#">お問い合わせ</a></li>
172
+ </ul>
173
+ </div>
174
+
175
+ <div class="nav-top-sp">
176
+ <div class="close"><i class="far fa-window-close"></i></div>
177
+ <ul>
178
+ <li><a class=”current” href=”#”>ホーム</a></li>
179
+ <li><a href=”#”>会社概要</a></li>
180
+ <li><a href=”#”>事業内容</a></li>
181
+ <li><a href=”#”>有資格者</a></li>
182
+ <li><a href=”#”>採用方法</a></li>
183
+ <li><a href="#">お問い合わせ</a></li>
184
+ </ul>
185
+ </div>
186
+ </header>
187
+ ```
188
+
189
+ ```css
190
+ header {
191
+ height: 70vh;
192
+ width: 100vw;
193
+ font-family: "Heisei Kaku Gothic Std";
194
+ position: relative;
195
+ -webkit-box-sizing: border-box;
196
+ box-sizing: border-box;
197
+ background-position: center center;
198
+ background-size: cover;
199
+ }
200
+
201
+ .fadein2{
202
+ opacity:1;
203
+ left:0;
204
+ }
205
+
206
+ .header-icon{
207
+ background-color:white;
208
+ position:absolute;
209
+ top:0;
210
+ left:0;
211
+ padding: 1.25em 2.17em 1.5em;
212
+ color: rgb(22, 22, 22);
213
+ text-align: center;
214
+ width: 10.51rem;
215
+ height: 10.51rem;
216
+ letter-spacing:0.1px;
217
+ img{
218
+ text-align: center;
219
+ margin-bottom: 10px;
220
+ }
221
+ p{
222
+ margin-bottom: 0;
223
+ }
224
+ }
225
+
226
+ .header-text{
227
+ font-size:0.75rem;
228
+ font-weight: 500;
229
+ line-height:1.1875em;
230
+ }
231
+
232
+ .header-text2{
233
+ font-size:0.875rem;
234
+ font-weight: 700;
235
+ line-height:1.3125em;
236
+ }
237
+
238
+ .tel-number{
239
+ float:right;
240
+ font-size: 0.875rem;
241
+ font-weight: 700;
242
+ color: rgb(77, 77, 77);
243
+ letter-spacing:0.2em;
244
+ margin-top:2.0625em;
245
+ margin-right:3.75em ;
246
+ }
247
+
248
+ .menu-icon{
249
+ display:none;
250
+ font-size: 80px;
251
+ float: right;
252
+ margin-right: 10px;
253
+ a{
254
+ color:black;
255
+ }
256
+ }
257
+
258
+ /*ナビゲーションバー*/
259
+
260
+
261
+ .nav-top{
262
+ text-align: center;
263
+ position:absolute;
264
+ background-color: rgba(41, 41, 41,0.4);
265
+ width: 100%;
266
+ bottom:0;
267
+ display:inline-block;
268
+ height: 85px;
269
+ line-height:85px;
270
+ z-index:10000;
271
+ }
272
+ .nav-top ul{
273
+ margin: 0 ;
274
+ padding: 0 ;
275
+ }
276
+ .nav-top ul li{
277
+ list-style: none;
278
+ display: inline-block;
279
+ width: 10%;
280
+ font-family: "Heisei Kaku Gothic Std";
281
+ font-size:0.875rem;
282
+ font-weight: 700;
283
+ letter-spacing:0.1em;
284
+ line-height:19px;
285
+ &:hover{
286
+ opacity:0.6;
287
+ }
288
+ }
289
+ .nav-top ul li a{
290
+ text-decoration: none;
291
+ display:inline;
292
+ color:rgb(255, 255, 255);
293
+ }
294
+
295
+
296
+ .nav-top-sp {
297
+ background-color: white;
298
+ display:none;
299
+ height:450px;
300
+ position: fixed;
301
+ width: 100%;
302
+ z-index:10000;
303
+ ul{
304
+ width: 90%;
305
+ margin: 0 auto;
306
+ margin-top: 20px;
307
+ }
308
+ li{
309
+ margin-bottom: 20px;
310
+ }
311
+ a{
312
+ color:black;
313
+ font-size:30px;
314
+ font-weight: 600;
315
+ }
316
+ }
317
+
318
+ .close{
319
+ float:right;
320
+ font-size:30px;
321
+ margin-right: 20px;
322
+ }
323
+ ```

1

エラーメッセージ・実行ログを追加

2021/03/05 04:20

投稿

ryouhei-inamoto
ryouhei-inamoto

スコア2

title CHANGED
File without changes
body CHANGED
@@ -131,4 +131,15 @@
131
131
  });
132
132
  }
133
133
  });
134
- ```
134
+ ```
135
+
136
+ エラーメッセージ
137
+ > Uncaught TypeError: $(...).bgSwitcher is not a function
138
+
139
+ 実行ログ
140
+ > Uncaught TypeError: $(...).bgSwitcher is not a function
141
+ at HTMLDocument.<anonymous> (script.js:2)
142
+ at j (jquery.js:3099)
143
+ at Object.fireWith [as resolveWith] (jquery.js:3211)
144
+ at Function.ready (jquery.js:3417)
145
+ at HTMLDocument.I (jquery.js:3433)