[HTML+CSS]display:none;でスマホの場合だけ非表示にする方法

2019 2/11

2019.02.11

最近は、PCで表示した場合とスマホで表示した場合で、表示の仕方を変える場合がほとんどだと思います。

そしてその実現手段としてCSSで画面幅ごとに対応していく場合があります。

例えばPCではヘッダー部にメニューを設置しているが、スマホではハンバーガーメニューにしてタップすると上からにゅーっと出てくるようにしたりです。

この場合、PCで用意したメニューをそのままスマホのハンバーガーに使えるならいいですが、HTMLの構造やスキルのレベルで同じHTMLを使いまわせない場合が出てきたりします。

そんなときはPC用のメニューはPCでのみ表示させて、スマホメニューはスマホでのみ表示させれば切り分けれるので簡単ですね。

上記のような場合でなくても、スマホでは非表示にしてPCでは表示したり、またはその逆の場合はよくあることだと思います。

PHPでそもそも出力するHTMLを切り分ける方法もありますが、PHPのスキルも必要になってきます。

今回はCSSを使って表示を切り替える方法を紹介します。

[HTML+CSS]display:none;でスマホの場合だけ非表示にする方法

実際にPCとスマホで表示が切り替わるコードを書いてみます。

今回は簡易的にPCでは猫画像が表示され、スマホでは犬画像が表示されるというものを作成しました。

HTML

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSSテスト</title>
		<meta name="description" content="このページの概要を書く">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/dispnone.css">
	</head>
	<body>
		<div class="animal pcview">
			<p>今日のにゃんこ</p>
			<img src="img/neko.jpg" />
		</div>
		<div class="animal spview">
			<p>今日のわんこ</p>
			<img src="img/inu.jpg" />
		</div>
	</body>
</html>

猫エリアも犬エリアもHTMLとしては出力してしまいます。

表示の切り替えはCSSで行います。

CSS

@charset "UTF-8";

.animal {
	max-width: 1200px;
	width: 100%;
}
.animal img {
	width: 100%;
}


.pcview {
}
.spview {
	display: none;
}

@media screen and (max-width: 979px) {
	.pcview {
		display: none;
	}
	.spview {
		display: block;
	}
}

pcviewがクラスに設定された猫エリア要素は、PC時にのみ表示されます。

スマホ表示時（979px以下のとき）は pcview には display: none; が適用されて非表示になります。

逆にspviewがクラスに設定された犬エリア要素はスマホ時のみ表示されます。