常連

ここに質問の内容を詳しく書いてください。

### 発生している問題・エラーメッセージ

```
初心者です。今制作しているWebサイトにレスポンシブデザインを反映させたいのですが、
viewportやメディアクエリを記入しても何も反応がありません。
ひとまず、画面だけでも各メデイアに対応できるものを作りたいのですが、お手上げ状態です。
メディアクエリはCSSの一番下に記述があります。どうぞご教授よろしくお願いいたします。

```


### 該当のソースコード

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/responsive.css">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700&display=swap&subset=japanese,latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/animate.css">
    <script src="css/wow.min.js"></script>
</head>

<body>
    <div id="wrapper">
     <header>
    　<nav>
        <div class="inner flex">
            <div class="logo">
                <img src="img/logo/logo.png" alt="bg photo">
            </div>
            <div class="menu">
                <ul class="flex">
                    <li class="zero"><a href="">Card</a></li>
                    <li class="first"><a href="">News</a></li>
                    <li class="second"><a href="">Price</a></li>
                    <li class="third"><a href="">Access</a></li>
                    <li class="fourth"><a href="">Contact</a></li>
                    </ul>
                </div>
            </div>
    　  </nav>
     </header>
    
     <div class="swiper-container">
        <div class="image">

            <div class="swiper-wrapper">
              <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>
                <button>お問い合わせ</button> 
                </div>
            <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>  
                <button>お問い合わせ</button> 
            </div>
            <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>  
                <button>お問い合わせ</button> 
            </div>
            <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>  
                <button>お問い合わせ</button> 
            </div>
            <div class=swiper-slide>
                <img src="img/mainvisual/mainvisual.png" alt="main photo">
                <span class="text1">一番伝えたいことを書く</span>
                <span class="text2">リードリードリード</span>  
                <button>お問い合わせ</button> 
            </div>

            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"><img src="img/arrow/arrow-prev.png"></div>
            <div class="swiper-button-next"><img src="img/arrow/arrow-next.png"></div>
          </div>
        </div> 

    </div>
```

### 該当のソースコード

```CSS
body {
  position:relative;
  width: 100%;
  text-align: center;
  
#wrapper {
position:relative;
width: 1366px;
height: 700px;
margin: auto;
text-align: left;
font-family:'Lato','Noto Sans JP',"sans-serif";
}

header {
position: absolute;
top: 0px;
left: 0px;
width: 1366px;
height: 100px;
background: #3F51B5 0% 0% no-repeat padding-box;
opacity: 1;
z-index: 2;
}


.logo img {
  position: absolute;
  top: 31px;
  left: 140px;
  width: 200px;
  height: 39px;
  background: transparent url('img/logo/logo.png');
  opacity: 1;
  }

.flex {
  display: flex;
}
  

li {
position: absolute;
list-style: none;
top: 0x;
font: bold 16px/26px Lato;
letter-spacing: 0;
color: #FFFFFF;
opacity: 1;
&.zero {
    left: 882px;
    width: 35px;
    height: 21px;
}
&.first {
    left: 947px;
    width: 41px;
    height: 21px;
}
&.second {
    left: 1018px;
    width: 38px;
    height: 21px;
}
&.third {
    left: 1086px;
    width: 52px;
    height: 21px;
}
&.fourth {
    left: 1168px;
    height: 21px;
    width: 58px;
    height: 21px;
}
}


.image {
  top: 0px;
  left: 0px;
  width: 1366px;
  height: 700px;
  background: transparent url('img/mainvisual.png') 0% 0% no-repeat padding-box;
  opacity: 1;
  backdrop-filter: blur(undefined);
  -webkit-backdrop-filter: blur(undefined);
  z-index:0;
}

.text1 {
      position: absolute;
      top: 237px;
      left: 309px;
      width: 748px;
      height: 87px;
      text-align: center;
      font: Bold 68px/108px Noto Sans JP;
      letter-spacing: 0;
      color: #333333;
      opacity: 1;   
      z-index: 10;
}

.text2 {
  position: absolute;
  top: 346px;
  left: 512px;
  width: 342px;
  height: 49px;
  font: Bold 38px/61px Noto Sans JP;
  letter-spacing: 0;
  color: #333333;
  opacity: 1;
  z-index: 10;
}

button {
  position: absolute;
  top: 479px;
  left: 488px;
  width: 390px;
  height: 83px;
  font: Bold 38px/61px Noto Sans JP;
  color: #FFFFFF;
  background: #3F51B5 0% 0% no-repeat padding-box;
  border-radius: 12px;
  letter-spacing: 0;
  opacity: 1;
  z-index: 10;
}

.swiper-pagination-bullet {
  position:relative;
  top:-10px;
  width: 16px; /* 幅 */
  height: 16px; /* 高さ */
  letter-spacing:12px;
  background: #FFF; /* 色：FFF緑 */
  opacity: 1; /* 半透明（デフォルトでは0.2） */
}

.swiper-pagination-bullet-active {
  width: 16px; /* 幅 */
  height: 16px; /* 高さ */
  letter-spacing:12px;
  background: #3F51B5 0% 0% no-repeat padding-box;; /* 色：黄色 */
  opacity: 1; /* 不透明 */
}

  .swiper-button-next::after, .swiper-button-prev::after {
    content: none !important;
  }

  .swiper-button-prev {
    position:absolute;
    left:158px;
    background-image: url("img/arrow/arrow-prev.png") no-repeat center center / contain;
    
  }

  .swiper-button-next {
    position:absolute;
    left: 1132px;
    background-image: url("img/arrow/arrow-next.png") no-repeat center center / contain;
  }

// 以下メディアクエリの記述

@media screen and (min-width:480px ) and (max-width:599px ) { 
  #wrapper{
    width: 100%;
  }
}
 
@media screen and (min-width:600px ) and (max-width:959px ) {
  #wrapper{
    width: 100%;
  } 
}
 
@media screen and (min-width:960px ) and (max-width:1279px ) {
  #wrapper{
    width: 100%;
  }
}

@media screen and (min-width:1280px) {
  #wrapper{
    width: 100%;
  }
}
}
```



### 試したこと
Progateとこちらのサイトを参照しながら記述をしてみました。
https://seolaboratory.jp/89410/

### 補足情報（FW/ツールのバージョンなど）

	@@ -1 +1 @@
1	- レスポンシブデザインが反省されない
1	+ レスポンシブデザインが反映されない

質問編集履歴