HTML & CSS

最終更新日:
公開日:

レシピ

設定

メディアクエリを使って画面サイズごとにCSSを切り替える

メディアクエリを使って、画面サイズ(解像度)ごとにCSSを切り替える方法を解説します。

この記事のポイント

  • メディアクエリの基本的な使い方が分かる
  • ブレークポイントの設定方法が分かる

目次

メディアクエリとは

マルチデバイスに対応するレスポンシブサイトが増えていますが、そこで活躍するのが「メディアクエリ」です。
メディアクエリ自体は新しいものではなく、印刷用CSSなどで活躍してきた仕組みです。
この仕組みが解像度(表示幅)の種類分けでも活用されるようになりました。

例えば、フルサイズ、980px以下、660px以下、414以下の4つにブレークポイントを設定すると次のようになります。

メディアクエリの設定例

<style>
section {
	width: 90%;
	border-radius: 10px;
	border: 2px solid #ccc;
	background-color: #333;
}
.text2,
.text3,
.text4 {
	display: none;
}

/* 980px以下の場合に適用 */
@media only screen and (max-width: 980px) {
	section {
		background-color: #4da0e7;
	}
	.text1,
	.text3,
	.text4 {
		display: none;
	}
	.text2 {
		display: block;
	}
}

/* 660px以下の場合に適用 */
@media only screen and (max-width: 660px) {
	section {
		background-color: #f5506b;
	}
	.text1,
	.text2,
	.text4 {
		display: none;
	}
	.text3 {
		display: block;
	}
}

/* 414px以下の場合に適用 */
@media only screen and (max-width: 414px) {
	section {
		background-color: #f4c840;
	}
	.text1,
	.text2,
	.text3 {
		display: none;
	}
	.text4 {
		display: block;
	}
}
</style>
<section>
<p class="text1">PC版 フルサイズ</p>
<p class="text2">PC&タブレット版</p>
<p class="text3">SP版</p>
<p class="text4">SP版 最小サイズ</p>
</section>
フルサイズの表示例
980px以下の表示例
660px以下の表示例
414px以下の表示例

このように画面サイズ(ブラウザの表示幅)に応じて、サイズや背景色を自在に設定することが可能になります。

メディアクエリの適用イメージ

先ほどのコードは、次のようなイメージで表示幅に応じてCSSが適用されます。

メディアクエリによるCSS適用イメージ

981px以上のスタイルは全ての表示幅に適用されるため、全体のベースとなるスタイルになります。
そして続く980px以下、660px以下、414px以下の順にスタイルが適用されていきます。
CSSは上から順(記載された順)に適用されるため、最後に書かれたスタイルが優先して適用(上書き)されます。
つまり、今回のコード例では414pxに書かれたスタイルが最も優先度が高く、981px以上のベースになっているスタイルは優先度が低いことになります。

メディアクエリの設定例

<style>

/* 全体のベースとなるスタイルを記述 */

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

	/* 980px以下の場合に適用 */
}

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

	/* 660px以下の場合に適用 */
}

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

	/* 414px以下の場合に適用 */
}
</style>

今回は上記の3つのブレークポイントを設定していますが、サイズ(表示幅)やブレークポイントの数は自由に設定できます。