質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.05%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 476

im_maki

score 4

前提・実現したいこと

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に変換する予定です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/10/27 12:38

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

    キャンセル

  • hatena19

    2019/10/27 12:53

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

    キャンセル

回答 2

+3

原因は、@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との基準が逆のため整合性がとれていないことも、
意図した挙動になっていない原因かと思われます。
この、minmaxの挙動の違いは、よく調べ、実際に動かしてみて、挙動を確認された方がいいかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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

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

@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でレスポンシブ対応をする例を以下に記しておきます。

section {

    // SP版
    width: 100%;

    // TAB版
    @media screen and (min-width: 600px) {
        width: 80%;
        margin: 0 auto;
    }

    // PC版
    @media screen and (min-width: 900px) {
        width: 900px;
        // margin: 0 auto; はTAB版から引き継いでいるため中央寄せになる
    }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/27 15:23

    細かい話ではありますが、
    > min_width に変更
    _になっています。書き間違えだとは思いますが、修正すべきかと。

    キャンセル

  • 2019/10/27 15:24

    ご指摘ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る