Q&A
もっと小さいコードで試してみては。
画面サイズで背景色変えるとか。
ここに質問の内容を詳しく書いてください。
発生している問題・エラーメッセージ
初心者です。今制作しているWebサイトにレスポンシブデザインを反映させたいのですが、 viewportやメディアクエリを記入しても何も反応がありません。 ひとまず、画面だけでも各メデイアに対応できるものを作りたいのですが、お手上げ状態です。 メディアクエリはCSSの一番下に記述があります。どうぞご教授よろしくお願いいたします。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="css/responsive.css"> 7 <title>Document</title> 8 <link rel="stylesheet" href="css/style.css"> 9 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 10 <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700&display=swap&subset=japanese,latin-ext" rel="stylesheet"> 11 <link rel="stylesheet" href="css/swiper.css"> 12 <link rel="stylesheet" href="css/animate.css"> 13 <script src="css/wow.min.js"></script> 14</head> 15 16<body> 17 <div id="wrapper"> 18 <header> 19 <nav> 20 <div class="inner flex"> 21 <div class="logo"> 22 <img src="img/logo/logo.png" alt="bg photo"> 23 </div> 24 <div class="menu"> 25 <ul class="flex"> 26 <li class="zero"><a href="">Card</a></li> 27 <li class="first"><a href="">News</a></li> 28 <li class="second"><a href="">Price</a></li> 29 <li class="third"><a href="">Access</a></li> 30 <li class="fourth"><a href="">Contact</a></li> 31 </ul> 32 </div> 33 </div> 34 </nav> 35 </header> 36 37 <div class="swiper-container"> 38 <div class="image"> 39 40 <div class="swiper-wrapper"> 41 <div class=swiper-slide> 42 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 43 <span class="text1">一番伝えたいことを書く</span> 44 <span class="text2">リードリードリード</span> 45 <button>お問い合わせ</button> 46 </div> 47 <div class=swiper-slide> 48 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 49 <span class="text1">一番伝えたいことを書く</span> 50 <span class="text2">リードリードリード</span> 51 <button>お問い合わせ</button> 52 </div> 53 <div class=swiper-slide> 54 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 55 <span class="text1">一番伝えたいことを書く</span> 56 <span class="text2">リードリードリード</span> 57 <button>お問い合わせ</button> 58 </div> 59 <div class=swiper-slide> 60 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 61 <span class="text1">一番伝えたいことを書く</span> 62 <span class="text2">リードリードリード</span> 63 <button>お問い合わせ</button> 64 </div> 65 <div class=swiper-slide> 66 <img src="img/mainvisual/mainvisual.png" alt="main photo"> 67 <span class="text1">一番伝えたいことを書く</span> 68 <span class="text2">リードリードリード</span> 69 <button>お問い合わせ</button> 70 </div> 71 72 </div> 73 <div class="swiper-pagination"></div> 74 <div class="swiper-button-prev"><img src="img/arrow/arrow-prev.png"></div> 75 <div class="swiper-button-next"><img src="img/arrow/arrow-next.png"></div> 76 </div> 77 </div> 78 79 </div>
該当のソースコード
CSS
1body { 2 position:relative; 3 width: 100%; 4 text-align: center; 5 6#wrapper { 7position:relative; 8width: 1366px; 9height: 700px; 10margin: auto; 11text-align: left; 12font-family:'Lato','Noto Sans JP',"sans-serif"; 13} 14 15header { 16position: absolute; 17top: 0px; 18left: 0px; 19width: 1366px; 20height: 100px; 21background: #3F51B5 0% 0% no-repeat padding-box; 22opacity: 1; 23z-index: 2; 24} 25 26 27.logo img { 28 position: absolute; 29 top: 31px; 30 left: 140px; 31 width: 200px; 32 height: 39px; 33 background: transparent url('img/logo/logo.png'); 34 opacity: 1; 35 } 36 37.flex { 38 display: flex; 39} 40 41 42li { 43position: absolute; 44list-style: none; 45top: 0x; 46font: bold 16px/26px Lato; 47letter-spacing: 0; 48color: #FFFFFF; 49opacity: 1; 50&.zero { 51 left: 882px; 52 width: 35px; 53 height: 21px; 54} 55&.first { 56 left: 947px; 57 width: 41px; 58 height: 21px; 59} 60&.second { 61 left: 1018px; 62 width: 38px; 63 height: 21px; 64} 65&.third { 66 left: 1086px; 67 width: 52px; 68 height: 21px; 69} 70&.fourth { 71 left: 1168px; 72 height: 21px; 73 width: 58px; 74 height: 21px; 75} 76} 77 78 79.image { 80 top: 0px; 81 left: 0px; 82 width: 1366px; 83 height: 700px; 84 background: transparent url('img/mainvisual.png') 0% 0% no-repeat padding-box; 85 opacity: 1; 86 backdrop-filter: blur(undefined); 87 -webkit-backdrop-filter: blur(undefined); 88 z-index:0; 89} 90 91.text1 { 92 position: absolute; 93 top: 237px; 94 left: 309px; 95 width: 748px; 96 height: 87px; 97 text-align: center; 98 font: Bold 68px/108px Noto Sans JP; 99 letter-spacing: 0; 100 color: #333333; 101 opacity: 1; 102 z-index: 10; 103} 104 105.text2 { 106 position: absolute; 107 top: 346px; 108 left: 512px; 109 width: 342px; 110 height: 49px; 111 font: Bold 38px/61px Noto Sans JP; 112 letter-spacing: 0; 113 color: #333333; 114 opacity: 1; 115 z-index: 10; 116} 117 118button { 119 position: absolute; 120 top: 479px; 121 left: 488px; 122 width: 390px; 123 height: 83px; 124 font: Bold 38px/61px Noto Sans JP; 125 color: #FFFFFF; 126 background: #3F51B5 0% 0% no-repeat padding-box; 127 border-radius: 12px; 128 letter-spacing: 0; 129 opacity: 1; 130 z-index: 10; 131} 132 133.swiper-pagination-bullet { 134 position:relative; 135 top:-10px; 136 width: 16px; /* 幅 */ 137 height: 16px; /* 高さ */ 138 letter-spacing:12px; 139 background: #FFF; /* 色：FFF緑 */ 140 opacity: 1; /* 半透明（デフォルトでは0.2） */ 141} 142 143.swiper-pagination-bullet-active { 144 width: 16px; /* 幅 */ 145 height: 16px; /* 高さ */ 146 letter-spacing:12px; 147 background: #3F51B5 0% 0% no-repeat padding-box;; /* 色：黄色 */ 148 opacity: 1; /* 不透明 */ 149} 150 151 .swiper-button-next::after, .swiper-button-prev::after { 152 content: none !important; 153 } 154 155 .swiper-button-prev { 156 position:absolute; 157 left:158px; 158 background-image: url("img/arrow/arrow-prev.png") no-repeat center center / contain; 159 160 } 161 162 .swiper-button-next { 163 position:absolute; 164 left: 1132px; 165 background-image: url("img/arrow/arrow-next.png") no-repeat center center / contain; 166 } 167 168// 以下メディアクエリの記述 169 170@media screen and (min-width:480px ) and (max-width:599px ) { 171 #wrapper{ 172 width: 100%; 173 } 174} 175 176@media screen and (min-width:600px ) and (max-width:959px ) { 177 #wrapper{ 178 width: 100%; 179 } 180} 181 182@media screen and (min-width:960px ) and (max-width:1279px ) { 183 #wrapper{ 184 width: 100%; 185 } 186} 187 188@media screen and (min-width:1280px) { 189 #wrapper{ 190 width: 100%; 191 } 192} 193}
試したこと
Progateとこちらのサイトを参照しながら記述をしてみました。
https://seolaboratory.jp/89410/
補足情報（FW/ツールのバージョンなど）
CSSはSassですか。もしそうなら、Sassをタグに追加してください。
細かいですがここも「ん？」となるので調整された方が良いかと
>反省されない
@media〜 の順が完全に逆になってるので、max-widthの大きい方を上から順に書いてみるとどうなりますか？
m.ts10806様
そうですね。小さいコードで試してみます。タイトルも修正しました。ご教授ありがとうございます。
mari.rinn様
残念ながらmax-withの大きい方から試してみたのですが、変わりませんでした。ご指摘ありがとうございました。
回答2件
0
ベストアンサー
主要な要素の配置を#wrapper基準のposition: absolute;でpx単位の絶対位置で指定していますが、それでは、どうやってもレスポンシブにはなりません。display: flex;より強力なので。
まずはそれをやめて、それぞれの要素のサイズ、位置を相対的に設定する設計に変更してください。
投稿2020/01/13 09:27
総合スコア33699
0
#wrapperが1366pxですが、メディアクエリの最後のmin-widthに1280pxが指定されています。
これだと1280px以上でwidthの100%が優先されるので、上記のコードだとどのような横幅でもwidthは100%ということになり、変化がない状態になります。1番下のメディアクエリでmax-widthを追加して1366pxを指定すると、1280pxから1366pxまでの条件になるので1366px以上は影響を受けないかなと思います。
投稿2020/01/13 07:49
総合スコア60
max-widthを追加して1366pxを指定してみたのですが、変化はありませんでした。でもわざわざご回答いただき誠にありがとうございました。
ごめなさい。はじめに書いてたものは(#wrapperの各メディアの横幅に合わせたmax-widthを設定してみて下さいという内容だった)消しました。というのも、よくよくcssを見たら、#wrapperのいろんな子要素にそれぞれ細かくwidthの値が設定されてて、これでは親要素の最大幅を指定しても、子要素のトータル幅が広いので、突き出てしまい、結局は収まりきらなくなりますね。
親要素も子要素もそれぞれのwidthを変更する必要があると思いますよ。
google chromeのデベロッパーツールで主要なスマホなどのメディアサイズで表示出来ますので、これで確認しながら細かく調整が必要だと思います。
mari.rinn様
詳細なご説明ありがとうございました。大変わかりやすいです。これから各要素を調整してきたいと思います。
あなたの回答
tips
プレビュー
