【CSS】レスポンシブ前のCSSが反映されない。モバイルサイズは反映済み

Question

前提・実現したいこと

質問です、お分かりの方お助け下さい。
今「1冊ですべて身につくHTML&CSSとWEBデザイン入門講座」の本を見ながら、レスポンシブの対応を行っています。
216ページ、レスポンシブに対応させようのチャプターで止まってしまっています。

元々はレスポンシブの反映ができなかったのですが、maxだと思ってたのがminだったという値が一致していない事に気づきmaxに全修正。

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

モバイルサイズ（768px）以下の時は、問題なく反映されている。
なのに、デスクトップサイズにするとすべてのCSSが消えてしまいます。
ただのHTMLのデータのみが反映される形になってしまっています。

自分なりに色々調べてみたんですが、解決しません！

該当のソースコード

<meta name="viewpoint" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css" type="text/css" media="screen and (max-width: 768px)">

@media screen and (max-width: 768px) {

試したこと

maxとminを入れ替えてみたり、そもそものメディアスクリーンのサイズを変えてみたりしたものの、何も変わりません。

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

ここにより詳細な情報を記載してください。

Answer 1

本を持っていないので、意図した回答になっていないのかもしれません。

ディスクトップ版のCSSの内容は、
@media screen and (max-width: 768px) の前に書く必要がありますが、
記載されていますでしょうか？

/*ここにディスクトップ版のcssを書く*/

@media screen and (max-width: 768px) {
/*ここにモバイル版のcssがかかれている*/
}

Comments

[missy]

ご回答ありがとうございます。

実は、ネットで検索をかけたところ下記のような形を見つけ試しました。

@media screen and (min-width: 769px),
@media screen and (max-width: 768px)　{

ですが、エラーになってしまいました。また本には

@media screen and (max-width: 768px) {

のみしか掲載がないので、解決法が分からないままになっております。
ディスクトップ版のCSSの内容ですが、どのような文章になりますでしょうか？

お手数おかけ致しますが、お教えいただけると嬉しいです！

[退会済みユーザー]

cssファイルですが、@media screen and max-width: 768px) {と
}の間に、モバイル用のCSSの記載をしているのでしょうか？
もしそうであれば、その記載を全部コピーして、

@media screen and max-width: 768px) {
と書いてある前に、ペーストしたらできないでしょうか？

-----------
例えば、

@media screen and (max-width: 768px) {
.profile {
font-size:1rem;
}
}
とかかれていたとすると、

.profile {
font-size:1rem;
}

@media screen and (max-width: 768px) {
.profile {
font-size:1rem;
}
}
という感じにするイメージです。

[missy]

はい、おっしゃる通りです。下記のような感じです。

@media screen and max-width: 768px) {

/＊--モバイル用のCSSの記載--＊/
.page-header {
flex-direction: column;
align-items: center;
}
：
}

@media screen and max-width: 768px) と書いてある前に、ペーストする理由は何なのでしょうか？
ちなみにCSSファイルは1枚に、デスクトップ用CSSとモバイルサイズ用CSS全て記載しております。

ご回答大変助かります!ありがとうございます！！

[退会済みユーザー]

@media screen and max-width: 768px) {
}
の意味は、{}の中は、横幅が768px以下の場合にこのcssが採用されますの
意味になります。

もし768px以上の場合は、
@media screen and max-width: 768px) {
}
の”上”側の記載を使用しますという決まりなっているからです。

なので、レスポンシブルにする場合の、cssの記載は、

/*ディスクトップ用のcssの記載*/
@media screen and max-width: 768px) {
/* モバイル用のcssの記載*/
}

というように書きます。

今回、ディスクトップ用の記載が何も書いていないと聞いたので、
とりあえず、モバイル版のcssの記載を、ディスクトップ用の
cssのところにペーストすれば、とりあえず、cssが適用されるのを
確認するのが良いと思いました。

その上で、モバイル版と、ディスクトップ版で変えたいところが
あれば、変更して行けば良いと思いますー。

[missy]

ご丁寧な回答ありがとうございます！

レスポンシブルのCSSは、最後に記載していく形になるということですね。

/*ディスクトップ用のcssの記載*/
@media screen and max-width: 768px) {
/* モバイル用のcssの記載*/
}
/*ディスクトップ用のcssの記載*/

だったので、@media 前にディスクトップ用のcssを移動させました！

お手数でなければ、もう一点お教えください。
上記で試したんですが、未だにレスポンシブルが反映されないのです。

<link rel="stylesheet" href="./style.css" type="text/css" media="screen and (min-width: 768px)">
@media screen and (max-width: 768px) {}

minとmaxが合っていないのは承知です。HTMLを(max-width: 768px)にすると、レスポンシブル対応される代わりにデスクトップ版で対応されなくなってしまうのです。

どのように修正すればいいのでしょうか？

[退会済みユーザー]

HTMLの記載を
<link rel="stylesheet" href="./style.css" type="text/css" >

に変更すると、レスポンシブルにならないでしょうか？

[missy]

ご回答いただいたない様：media="screen and (max-width: 768px)" の記載を消して
<link rel="stylesheet" href="./style.css" type="text/css" >のみにしたところレスポンシブル対応致しました！

ありがとうございます！

本に載ってた通りで記載していたのですが、基本的にHTMLにmedia="screen and (min-width: 768px)"　の記載は不要という事なのでしょうか？

[退会済みユーザー]

レスポンシブルの方法は、何種類かあると思います。

１つが、以下のように１つのcssに、2箇所記載する方法。今回の方法です。

style.css
/* ディスクトップ版CSS */

@media screen and (max-width:768px) {
/* モバイル版CSS */

}

２つ目は、２つのcssを用意する方法

例えば、
desktop_style.css→ディスクトップ用
mobile_style.css→モバイル用cssファイル

その場合、HTMLで以下のように記載します。

<link rel="stylesheet" href="desktop_style.css" media="screen and (max-width:768px)">
<link rel="stylesheet" href="mobile_style.css" media="screen and (min-width:768px)">

自分もまだまだ未熟ですので、間違っていたらすいません！！

2つ目に関しては、以下のサイトが参考になりました。
https://sole-color-blog.com/blog/71/

[missy]

ご丁寧な回答いただけた事、感謝いたします！
progateでは、2枚のCSSを使った記憶がおるのですが、今回使用した本ではその旨記載がなかったので、1枚に記載したんですよね。
大変勉強になりました！
ご紹介いただいたサイトも確認してみます！ありがとうございました。