前提・実現したいこと
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 {
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: 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に変換する予定です。