More than 3 years have passed since last update.

CSSでメディアクエリが効かない原因について

Posted at 2021-06-27

##はじめに
Bootstrapを使ってWEBサイトを作成した際に、
メディアクエリが効かずに解決するまで2日かかったため、
解決するまでに学んだことを備忘録として記録します。

==環境は以下の通りです。==
・Windows10
・Bootstrap　v4.1
・HTML5
・CSS3

##メディアクエリ(＠media)とは？
＠mediaはメディアクエリと呼ばれている。
メディアクエリとは、
スマホやPC、タブレットなどの画面サイズによってレイアウトを変更するレスポンシブデザインを作成する際に頻繁に使用される方法のこと。

##メディアクエリ(＠media)の書き方

@media only screen and (〇〇-width:△△px){
    //適用させるcssを記述
}

#####○○には、maxかminを記述する。

#####△△には、任意の数字を記入する。

#####andと()の間には半角スペースを入れる。
今回私は、andの後ろに半角スペースがなかった為に、メディアクエリが効きませんでした。

#####端末の種類
主に、all・screen・printが使われる。
・all 「全ての端末に一致」
・screen 「PCやスマホ等の画面」
・print　「プリンター」

#####記入例

/*　画面幅が768px未満の時、「pc」classは非表示、「sp」classは表示する　*/
@media only screen and (max-width:768px){
    .pc { display: none; }
    .sp { display: block; }
}

##メディアクエリ(＠media)が効かなかった時に確認したこと
①viewportを正しく書いているか？
②CSSがそもそもHTML上に読み込まれているか？
③メディアクエリの記述は正しく書かれているか？
④CSSの優先順位について理解しているか？

####1.viewportを正しく書いているか？
メディアクエリはHTMLのheadタグ内にviewportを正しく記述していないと動作しない。
以下を、必ず記述する。　

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

viwportは↓こちらのURL↓に記載してあります。
https://bit.ly/3jhA4QF　

####2.cssがそもそもHTML上に読み込まれているか？
「./style.css」は読み込ませたいCSSファイルの名前です。

index.html

<link href="./style.css" rel="stylesheet" >

####3.メディアクエリの記述は正しく書かれているか？
間違えたので何度も言います。
私はandの後ろの半角スペースがなかった為、メディアクエリが効かず２日悩みました。。

style.css

@media only screen and (max-width:768px) {
 .pc { display: none !important; }
 .sp { display: block !important; }
}

「!important」がついているプロパティは最優先して使用される。

####4.CSSの優先順位について理解しているか？
今回、以下の記事でcssの優先順位について再確認する事が出来ました。
https://bit.ly/3y0LYCv