CSS

@media screenを使ってもスマホサイズが効かない場合

@media screen（メディアクエリ）を使ってスマホサイズやタブレットサイズでCSSが変更されない場合、次の項目を確認してみましょう。

では、上の順から説明していきます。

Viewportの記述が抜けている

<head>タグ内に下記のコードを埋め込むことで@media screenが機能します。下記が抜けていると、スマホ用のCSSも効かないので注意が必要。

ただPC側ではブラウザのウィンドウサイズを変えることで、下記のコードがなくても@media screenだけを使用していれば、PC側では確認できてしまうので抜けやすいミスとなります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

別パターンのViewport例

上記のViewport例意外だと下記のコードもよく見られることがあるかと思います。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

特に変わりはなく、追加されているのはmaximum-scale=1.0, minimum-scale=1.0"のところです。

これらの役割はユーザーが縮小したり拡大したりする機能を制限することができます。また、user-scalableプロパティを使うことでWebページのブラウザのズームを無効にすることもできます。

なので、これらの設定でユーザーにとって使いやすくもなるし、使いにくくもなるのでうまく使いこなしましょう。

@media screenの記述が間違っている

下の例は@media screenを使用した例です。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>@media screen</title>
	<style>
		/* PC用（960px以上の）のCSS */
		h1{
			background:#eee;
			color:#212121;
			font-size:30px;
		}

		/* 960px〜480pxのCSS */
		@media screen and (max-width:960px){	
			h1{
				color:#a6a6a6;
				font-size:25px;
			}	
		}

		/* 480px以下のCSS */
		@media screen and (max-width:480px){
			
			h1{
				background:white;
				color:#00458b;
				font-size:20px;
			}	
		}

	</style>
</head>
<body>
	<h1>Hello, CSS</h1>
</body>
</html>

max-widthとmin-widthの使い方を間違っているPCのデザインがスマホ用のデザインで適用されてしまうのでそこは気をつけましょう。

「@media screen and (」←このスペースが抜けている

@media screen and(の「and」と「(」の間に半角スペースがないとCSSが反映されないのでこちらも気をつけるようにしましょう。

/* OK */
@media screen and (max-width:480px){

}

/* NG */
@media screen and(max-width:480px){

}

キャッシュの確認

ブラウザの設定によってはキャッシュが残っている場合があるのでクリアしましょう。