swiper.js 反映されない

前提・実現したいこと

swiper.jsを使用するために、CDNを読み込み、実行したところ、上手く表示されませんでした。
Chromeで実行してみたところ、コンソールで警告として下記のメッセージが表示されました。

発生している問題・エラーメッセージ

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/swiper/swiper-bundle.min.css".

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="style.css">
7  <title>Document</title>
8  <link rel="preconnect" href="https://fonts.gstatic.com">
9  <link
10    href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&family=Quicksand:wght@400;500;700&display=swap"
11    rel="stylesheet" type="text/css">
12  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" type="text/css">
13</head>
14<body>
15  <nav class="nav1">
16    <img src="header_palmtop-assets/logo.png" alt="" class="kagu_logo_1">
17    <img src="header_palmtop-assets/line.png" alt="">
18  </nav>
19  <nav class="nav2">
20    <img src="header_desktop-assets/logo.png" alt="" class="kagu_logo_2">
21    <div class="nav2_flexbox">
22      <ul>
23        <li><a href="#">取扱い家具</a></li>
24        <li><a href="#">販売店・展示場一覧</a></li>
25        <li><a href="#">採用情報</a></li>
26        <li><a href="#">お知らせ</a></li>
27      </ul>
28      <div class="nav_store">
29        <a href="#">
30          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="21"
31            viewBox="0 0 20 21">
32            <image id="icon_store.svg" width="20" height="21"
33              xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAABpUlEQVQ4ja2UTUhVQRiGn6slQkSFuhBbBUJBYJHLsFy5aOW2TUHrNoH7tu1C2rQUF+HGyhaJq34uGBQIoqibiFr0o4RB/kDmE6PfocPlePMcemGYmTPzPfPOzHempn4FtoA68Ap4DKxSVeqI+lrddl+TKlVLcphZaQeeAeeA01UNtuTa28As0AN0/Q9g0lzUF6oCjxwAvA4cq8D7nD/DTD8rwpJ2Gh0mvQXOADdKwu4B3UXAtO0rAd4oATwFrDReSgasAX0lYEdjV0sHAZMulgD2Aq3AchFwOXKyTOqczWKLznAHWPiHwxTXD1yNcjm+LxUBiTPJj7XGAil4MC4tS601YBp4mvKw6BE4H4/E3egPqz/8q+/qE/V2zK3l4xsddgA3oz0e9TrwHHgDvADmgd3c1jvC5b6C3KnWw0N6xt4d4vm6pq5GTJrfs/fXxeBDdVd9oK6om+rJJrB2dV39oN5Xf6kTeeCsOhftW7HqpSbA3phzJ/ov1cU8cDQmPFI/xiUcbwJsU7+pX9Rx9bc6lgeeUKdi25/UoUOc4YD6PozM7N2D8gew5AKND8IlDwAAAABJRU5ErkJggg==" />
34          </svg>
35          <div>ONLINE STORE</div>
36        </a>
37      </div>
38      <div class="nav_enquiry">
39        <a href="#">
40          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="13"
41            viewBox="0 0 18 13">
42            <image id="icon_enquirry.svg" width="18" height="13"
43              xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAANCAYAAACkTj4ZAAAA+klEQVQoka2TMUpDQRRFj0HUkAWIpWAjYhO0t0iXxkKwC1hbaWUTsHUBFq5A0olLsAnEIG4glYLaaEBJIegJT+cHkeQnGC+8YeZx53B5w8yob0CJ6fQcIBPiFtgHehMiF4BTYBWo4bcO1Xu1pS4Fe0wtqk31Qd0IbyHRb4DNtL8GyjlJ1oFWShR3HoGjLNFWSlBUG2pP3RmSqqq+qhdqKfW21e5vUFTM7Vj9VOvpHP0D9UM9UQs//CNBWe2mZOfqmfqu7g3xfYFmc2bRADrAJTAPVICrUeY8UKgNrAFzwFOecRwo9DKBZ/D8UytLtAJ0/0hbjuV//hrc9QG2zAzNbF7H5AAAAABJRU5ErkJggg==" />
44          </svg>
45          <div>お問い合わせ</div>
46        </a>
47      </div>
48    </div>
49  </nav>
50
51  <div class="top">
52    <div class="swiper-container">
53      <div class="swiper-wrapper">
54        <div class="swiper-slide slide1"></div>
55        <div class="swiper-slide slide2"></div>
56        <div class="swiper-slide slide3"></div>
57      </div>
58    </div>
59    <p>自分らしさを<br>レイアウトする</p>
60    <ul class="slide_controll">
61      <li class="slide_controll_btn slide_now"></li>
62      <li class="slide_controll_btn"></li>
63      <li class="slide_controll_btn"></li>
64    </ul>
65  </div>
66
67
68  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
69  <script src="main.js"></script>
70</body>
71</html>

試したこと

ここにより詳細な情報を記載してください。

m.ts10806

2020/12/28 04:07

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2020/12/28 04:10

＞Resource interpreted as Stylesheet but transferred with MIME type text/plain: これはどこに表示された情報でしょうか。そのままコードをコピペでChromeで確認したところ、コンソールにもそのような内容は出ていませんでした。環境情報も含めてご提示ください。