CSSの基本
schedule2022.10.22

【CSS】PCとスマホの切り替え方法（メディアクエリ）

CSS

スマホの普及とともにスマホに対応したWEBサイトの需要も増加しました。今ではWEBサイトに訪れる約7割がスマホです。そこで問題になるのがPCとスマホでCSSを切り替える方法です。PC版とスマホ版でHTMLそのものを別に作る方法もありますが、主流となっているのはCSSだけを切り替える方法です。

このPCとスマホでCSSを切り替える方法をシンプルにお伝えします。より深い方法は別記事に記載予定です。また、WEBサイトをスマホに最適化させるためレスポンシブサイトにするという考え方もあります。こちらも別記事で書く予定です。

HTMLの<head>にビューポート設定が必要

CSSにレスポンシブの記述をしてもスマホ側はPC版のCSSを読もうとするのでHTMLの<head>でレスポンシブが反映されるように記述しなければなりません。

指定は非常に簡単です。下記の一文を<head>に追記するだけ。

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

これで各デバイスは自身の画面サイズでCSSを読み込む用になります。

ピンチで拡大縮小を止めさせたい場合は「user-scalable=no」を追記します。

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

３つのCSSを切り替える方法

  • CSSファイル内でメディアクエリを利用する
  • CSSファイルの読み込みをメディアクエリで分ける
  • プログラムなどでユーザーエージェントを取得して切り替える

大きく分けるとこの３つの方法でCSSをPCとスマホで分けることができます。

メディアクエリはプリンター／モニターの指定、そして画面のサイズでCSSを切り替えられることができます。スマホという指定は無く、プリンター／モニターという大枠でしか指定できないためスマホを指定したい場合は横画面サイズで切り分けることになります。

CSSファイル内でメディアクエリを利用する

PC／スマホでCSSを切り替える方法として最も利用率の多い方法がCSSファイル内でメディアクエリを利用することです。使い方自体は難しくありません。

@media (プロパティ:サイズ) {
    p{fontsize:14px;}
}

このように@mediaを宣言して画面サイズを書くだけです。{}の中に書かれたCSSが@mediaで指定した画面サイズになると適用されます。

考え方としては「PC／スマホで切り分ける」…ではなく「スマホくらいの画面サイズになったらCSSを調整する」といった感じです。固定のwidthとheightを指定すれば特定の画面サイズのスマホに限定することもできますが、基本はどのスマホで見てもCSSが適用されるように記述します。

では実際の例を見てみましょう。

*=============================
    全画面サイズ
==============================*/
p{font-size:18px;}

/*=============================
    タブレットサイズ
    641px〜768pxの間
==============================*/
@media (min-width:641px) and (max-width:768px){
    p{fontsize:16px;}
}

/*==============================
    スマホサイズ
    640px以下
==============================*/
@media (max-width:640px) {
    p{fontsize:14px;}
}

これは始めに基本的なCSSを普通に書きます。その後にタブレットサイズのデバイス（641px〜768pxのサイズ）で見た場合にCSSを上書きします。スマホサイズ（640px）で見たら別にCSSを上書きすることができます。

重要なのは画面サイズを何PXにするかです。スマホやタブレットは機種で微妙に横の画面サイズが異なるので必要に応じてメディアクエリの数を増やします。特にこだわりがない場合は上記の記述でも切り替えが可能です。

切り分け方は職場などで仕様が決まっているならそれに沿って指定しましょう。

CSSファイルの読み込みをメディアクエリで分ける

HTMLファイルで<link rel="stylesheet">と読み込んでいると思います。この<link>タグにはメディアクエリを指定できます。記述は上記に書いたCSSファイル内で指定するメディアクエリと同じです。

<link rel="stylesheet" href="CSSファイル" media="(max-width:640px)" />

このようにmedia=""の部分にメディアクエリを書きます。andも書けるのでmedia="(min-width:100px ) and (max-width:640px)"のように画面サイズの範囲を指定することも可能です。

プログラムなどでユーザーエージェントを取得して切り替える

プログラムやJavaScriptを利用することでユーザーが操作している端末の情報を調べて読み込むCSSを切り替えることができます。普通は上記に記載しているメディアクエリで切り替えるだけで事足りますが、更に精度を高くしたい場合はプログラムやJavaScriptでユーザーエージェントを取得させます。

ただしプログラムやJavaScriptでユーザーエージェントを取得して切り分けるのは100%の精度があるわけではありません。例えばAndroid端末はスマホとタブレットの違いがわからなかったり、そもそもメンテナンス性が下がることもあります。
※Androidはメーカーの機種毎にユーザーエージェントを取得すれば100%の精度が出るかもしれません。やったことが無いし端末が増えた場合の保守に不安が残るので微妙そうですが。

今はレスポンシブサイトにすることが主流。レスポンシブサイトとはどのようなデバイスで見てもデザインが可変して正しく見えるサイトのことです。それを別々にスタイルシートを分けることになるのでメンテナンス性がかなり落ちることになります。

もしユーザーエージェントで分ける場合は一部のCSSだけを別ファイルにして切り替えるようにし、コアなCSSは切り替えないようにした方が無難だと思います。