メディクエリでの画面幅での表示切替がうまくいきません。

前提・実現したいこと

HTML・CSSの勉強で個人的にWEBサイトを作っています。
メディアクエリでPCとスマホ・タブレットでデザインを変えたいのですがうまくいきません。
メディアクエリは一つのCSS内に記述しています。

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

@media screen and (max-width: 1100px) { PC表示させたいCSS }
@media screen and (max-width: 780px)　{ スマホ表示させたいCSS }

CSS内に上記のように分けて記述していますが、どちらかの表示が優先されてしまい、
画面の幅を変えてみても切り替わらず最初のデザインのままです。

PC版とスマホ版それぞれのCSSだけで確認してみると、どちらもきちんと表示できます。

該当のソースコード

【CSS】

@charset"utf-8";

body{
color: #333;
font-family: Vardana, sans-serif;
margin: 0;
}

@media screen and (max-width: 1100px) 　/* PC表示 */

header {
position: sticky;
position:  -webkit-sticky;
top: 0;
background-color: white;

}

header ul{
margin: 5px;
list-style-type: none;
}

header li {
display: inline-block;
padding: 8px 12px;
font-size: 13px;
}

header li > a {
text-decoration: none;
color: inherit;
}

.wrapper{
max-width: 1100px;
margin: 0 75px 0 75px;
padding: 0 45px;
}

.navi-navi{
.nav_red:hover {
color: #DBA2A8;
}
.nav_ye:hover {
color: #E5E7A9;
}
.nav_bl:hover {
color: #4A86B2;
}
.nav_gr:hover {
color: #419D9A;
}
.nav_pa:hover {
color: #B6A2CB;
}

.nav_red{
border-bottom: 2px dotted #DBA2A8;
}

.title {
position: relative;
margin: 10px 0 0 0;
}

.title p {
position: absolute;
top :50%;
left:50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;

color: #fffff9;
font-size: 3em;
font-family: 'Anton', sans-serif;
text-shadow: 3px 3px 5px #333;
letter-spacing: 0.2em
}

.title img {
width: 100%;
height: 150px;
object-fit: cover;
opacity: .9;
border-radius: 3px;
}

.menu{
margin: 50px 0 100px 0;
}

.container_menu{
display: flex ;
justify-content: center;
}

.item_menu img{
width: 230px;
height: 240px;
object-fit: cover;
margin: auto 10px;
border-radius: 3px;
}

.item_menu a{
margin: 5px 0 0 95px;
text-decoration: none;
color: inherit;
}

.aside {
width: 230px;
height: 240px;
margin: 0 auto 20px 30px;
padding: 0 20px;

border: double #333;
border-radius: 3px;
}

.sidebar-title{
padding: 0 8px 8px;
}

.aside h3 {
margin-top: 0;
padding: .5em ;

border-bottom: double #333;

}

.aside p {
padding: 0 10px;
width: 200px;
}

.backchenge {
background-color: #333;
/* background-color: #E5E7A9; */
padding: 30px 0;

}
.article-main{
padding: 30px auto;
margin-top: 50px;
}

.a1{
background-color: white;
margin: 0 280px 25px 0;
padding: 15px 20px 20px 15px;
border-radius: 10px;
}

section h1{
font-weight: normal;
margin-bottom: 8px
}

section p{
margin-top: 0;
font-size: 14px;
}

.pager .pagination {
text-align: center;
margin-right: 280px;
}

.pagination ul {
padding-inline-start: 0;
}

.pager .pagination li {
display: inline;
margin: 0 2px;
padding: 0;
display: inline-block;
background:#fffff9;
width: 50px;
height: 50px;
text-align: center;
position: relative;
border-radius: 50px;
}

.pager .pagination li a{
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display:table;
color: #999;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.pager .pagination li a span{
display:table-cell;
vertical-align:middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
color: #333;
background: #fffff9;
border-radius: 50px;
}

.pager .pagination li{
display: none;
}

.pager .pagination li.pre,
.pager .pagination li.next{
display: inline-block;
width: 40%;
height: 50px;
text-align: center;
}

.pager .pagination li.pre a,
.pager .pagination li.next a{
width: 100%;
text-align: center;
}

}

@media screen and (max-width: 780px) { /* スマホ表示 */

header {
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: white;
}

header ul{
margin: 5px;
list-style-type: none;
}

header li {
display: inline-block;
padding: 8px 12px;
font-size: 13px;
}

header li > a {
text-decoration: none;
color: inherit;
}

.navi-navi{
text-align: center;
}

.nav_red:hover {
color: #DBA2A8;
}
.nav_ye:hover {
color: #E5E7A9;
}
.nav_bl:hover {
color: #4A86B2;
}
.nav_gr:hover {
color: #419D9A;
}
.nav_pa:hover {
color: #B6A2CB;
}

.nav_red{
border-bottom: 2px dotted #DBA2A8;

.title {
position: relative;
margin: 10px 0 0 0;
}

.title p {
position: absolute;
top :50%;
left:50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;

color: #fffff9;
font-size: 3em;

font-family: 'Anton', sans-serif;
text-shadow: 3px 3px 5px #333;
letter-spacing: 0.2em
}

.title img {
width: 100%;
height: 100px;
object-fit: cover;
opacity: .9;
border-radius: 3px;
}

.item_menu{
display: none;
}

.item_menu img{
width: 70%;
height: 100px;
object-fit: cover;
}

.item_menu a{
position: absolute;
width: auto;

top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;

text-decoration: none;
color: white;
font-weight: bold; /太字に/
font-size: 2em;/サイズ2倍/
font-family :Quicksand, sans-serif;;
}

.aside{
text-align: center;
padding: 20px 80px;
}

.sidebar-title {
border-bottom: double #333;
}
.aside p {
text-align: left;
width: auto;
padding: 0 10px;
width: 800px;
}

.sidebar-content{
height: 100px;
}

.backchenge {
background-color: #333;
padding: 30px 0;

}

.article-main{
text-align: center;
margin-top: 200px;
}

.a1{
background-color: white;
text-align: left;
margin: 10px 50px;
padding: 15px 50px;
border-radius: 10px;
}

section h1{
font-weight: normal;
margin-bottom: 8px
border: double 2px #333;
}

section p{
margin-top: 0;
font-size: 14px;
}

.pager .pagination {
text-align: center;
}

.pagination ul {
padding-inline-start: 0;
}

.pager .pagination li a span{
display:table-cell;
vertical-align:middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
color: #333;
background: #fffff9;
border-radius: px;
}

.pager .pagination li{
  display: none;
}

.pager .pagination li.pre,
.pager .pagination li.next{
  display: inline-block;
  width: 40%;
  height: 50px;
  text-align: center;
}

.pager .pagination li.pre a,
.pager .pagination li.next a{
  width: 100%;
  text-align: center;
}

.pager .pagination li.pre span::after{
  content: "　前の10件へ";
}

.pager .pagination li.next span::before{
  content: "次の10件へ　";
}

}

footer{
/* width: 400px */
margin: 0 30px 0 0;
}

footer p {
color: lightgray;
font-size: 14px;
text-align: left;
}

試したこと

・viewportの記載
・PCのCSSとスマホのCSSをそれぞれ分けてスタイルシートに記述し、HTMLも下記内容に書き換え
<link href="css/styles2.css" rel="stylesheet" type="text/css">
<link href="css/styles3.css" media="(min-width: 768px )" rel="stylesheet" type="text/css">
(これも同様に片方しか適用されません。。。)

補足情報（FW/ツールのバージョンなど）

お見苦しいですが。。。
初心者のため突っ込みどころたくさんあると思いますがよろしくお願いいたします。

コード

最終的にはwordpressに乗せるためこれができたらPHPに変換する予定です。

miyabi_pudding

2019/10/27 03:38

コードは、コードブロックで記載しましょう。ツールボタンの<code>ボタンで挿入される、 ```ここに言語名ここにコード ``` という形式で入れます。

hatena19

2019/10/27 03:53

SCSSとかじゃなくて普通のCSSですよね。 {}の対応がおかしい部分がありますので、まずはそれを見直してください。例えば、 @media screen and (max-width: 1100px) の後に { がないなど、、、、もしSCSSなら、その旨を質問に追加して、タグを追加してください。

行動規範の内容に同意します

回答2件

原因は、@media screen and (max-width: 1100px)に対して、ブロックコード（{}）がないことと、
PC表示の方を、@media screen and (max-width: 1100px)と、最大サイズが1100pxの時としていることが原因かと思われます。
（PCの場合、むしろmin-width: 1100pxでいいと思うが、なんにせよ、今のままだと、780px〜1100pxの指定ができないように思える）

それであれば、
PC表示をデフォルトとし、メディアクエリを使用せず、
メディアクエリにて、最大サイズ、780pxの時（ターゲット：スマホ）、改めてスタイルを当てる、という形で指定してはいかがでしょうか。

また、"試したこと" にある、link自体にそもそもメディアクエリを指定したやり方ですが、
こちらには、min-widthとなっており、最低780pxとなっているため、
CSS内にある、max-width: 780pxとの基準が逆のため整合性がとれていないことも、
意図した挙動になっていない原因かと思われます。
この、minとmaxの挙動の違いは、よく調べ、実際に動かしてみて、挙動を確認された方がいいかと思います。

投稿2019/10/27 04:10

miyabi_pudding

総合スコア9528

PC版とSP・TAB版の２通りに分けるという認識でよろしいでしょうか？

まず気になったのが、PC版のメディアクエリの後に中括弧が無いということです。
これは、質問の際に記述を忘れただけであって、実際には書いてあるでしょうか？

また、一定の横幅（ここでは1100px）を超えてからはPC版の表示に切り替えるおつもりでしょうか？
もしそうだとすれば、メディアクエリは以下のようにするべきです。

css
1@media screen and (min-width: 1100px) // max-width を min-width に変更

これで画面の横幅が1100pxを超えてからはPC版の表示に切り替わるようになります。
変更前では、画面の横幅が1100pxまでは指定の表示にするという処理になってしまいます。
したがって、一般的なパソコンの画面で表示をした際には適用されません。

また、レスポンシブ対応をする際にはSP版→TAB版→PC版というように、
画面の小さい端末から順に対応していくのが一般的です。
ですので、SP版のスタイルは特にメディアクエリを使用せずに記述していき、
各要素ごとにTAB版とPC版のスタイルをメディアクエリを使用して書き加えていく形になります。
基本的には画面の小さい端末の方が情報量が少ないので、大きくなるにつれて
適用するスタイルを加えていくほうが、苦労も減るでしょう。
逆に進めると、せっかく作ってきたスタイルを消しながら進めることになってしまいます。

すでにそこまでCSSが書けるなら、Sassを導入することでさらに楽をできます。
SassにはSASS記法とSCSS記法がありますが、好みもありますがSCSS記法がよく使われます。

scssでレスポンシブ対応をする例を以下に記しておきます。

scss
1section {
2
3	// SP版
4	width: 100%;
5
6	// TAB版
7	@media screen and (min-width: 600px) {
8		width: 80%;
9		margin: 0 auto;
10	}
11
12	// PC版
13	@media screen and (min-width: 900px) {
14		width: 900px;
15		// margin: 0 auto; はTAB版から引き継いでいるため中央寄せになる
16	}
17}