レスポンシブデザインに対応する為のCSSのmax-with・min-widthを使った切り分け方法

以前はPCとスマホのアクセスに対して、それぞれのhtmlファイルを用意するケースが多かったですが、昨今はレスポンシブデザインで対応するのがほとんどとなってきています。
ただ、レスポンシブデザインで対応する為にはCSSで画面サイズに合わせた微調整が不可欠です。その方法はいくつかありますが、ここではCSS内で画面サイズを判別して書き分ける方法をご紹介します。

CSSで画面サイズを切り分けるとは？

CSSではアクセスするデバイス画面サイズを判別してCSSの適用を切り分ける事ができます。
例えば下記のように画面幅に対して適応するcssを指定する事ができます。

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen and (min-width: 767px)">

ただこの方法は管理するcssファイルが増えて煩雑になるので、このページでご紹介している1つのcss内で切り替える方法をオススメします。

CSS内で画像サイズに合わせえて切り分ける方法

外部cssファイル内で画面サイズのブレイクポイントを指定して、それぞれのサイズへのCSS適用内容を分ける事ができます。
その場合にどのようにオーバーライド（上書き）していくかの考え方がいくつかありますので、自サイトに合わせて使い分けてください。ポイントは複数の方法をまぜずに、1つのサイトでは1つの方法で統一させた方が保守管理がしやすいです。

スマホ優先で構成する（min-width）

スマホをメインで考える場合、まずはスマホデザインをCSSで調整し、スマホより大きいサイズを上書きしていきます。
@media screen and ( ){ } で囲った要素は、( )内で指定した画面サイズに対して{ }内で記述した要素を適用します。min-widthは指定した画像サイズ以上にという意味を持っています。

.class {
  font-size: 12px;
}
 
@media screen and (min-width: 480px) {
  .class {
    font-size: 14px;
  }
}
 
@media screen and (min-width: 768px) {
  .class {
    font-size: 18px;
  }
}

この内容ではまずfont-sizeは12pxが適用されます。CSSは後で書いた方がオーバーライド（上書き）しますので、480px以上の場合は14pxが、768px以上は18pxが適用されます。

PC優先で構成する（max-width）

PCをメインで考える場合はスマホデザインとは逆で、まずはPCデザインをCSSで調整しサイズが小さくなるごとに要素を上書きしていきます。max-widthは指定した画像サイズ以下にという意味を持っています。

.class {
  font-size: 18px;
}
 
@media screen and (max-width: 768px) {
  .class {
    font-size: 16px;
  }
}
 
@media screen and (max-width: 480px) {
  .class {
    font-size: 14px;
  }
}

この内容ではまずfont-sizeは18pxが適用されます。そして768px以下の場合は16pxが、480px以下は14pxが適用されます。

スマホ優先でも言える事ですが、注意点としては768pxと480pxの指定が下記のように逆になっていると、480px以下となっても後述の768px以下の内容で上書きされるので、結果480pxの指定が効かないような状態となります。

@media screen and (max-width: 480px) {
  .class {
    font-size: 14px;
  }
}
 
@media screen and (max-width: 768px) {
  .class {
    font-size: 16px;
  }
}

多重オーバーライド（上書き）を回避する

上記のPC優先やスマホ優先の記述方法で、ベースの指定に対してどのサイズ指定の記述が最終的に適用されているのかがわかりにくくなるという方は、各サイズの指定を干渉させない記述方法もあります。

スマホ優先の場合です。max-widthとmin-widthを組み合わせます。(max-widt:767px) and (min-width:480px) と記載する事で、767px以下480px以上という意味になります。
min-width:768pxは768px以上という意味になりますので、それぞれの干渉が無くなります。指定が干渉し合わないので、@media screenの順番が逆転しても表示結果には影響が出ません。

.class {
  font-size: 18px;
}
 
@media screen and (max-width:767px) and (min-width: 480px) {
  .class {
    font-size: 16px;
  }
}
 
@media screen and (min-width: 768px) {
  .class {
    font-size: 14px;
  }
}

PC優先の場合です。こちらも同様にmax-widthとmin-widthを組み合わせます。(min-widt:481px) and (max-width:768px) と記載する事で、481px以下768px以下という意味になります。
max-width:480pxは480px以下という意味になりますので、それぞれの干渉が無くなります。

.class {
  font-size: 18px;
}
 
@media screen and (min-width:481px) and (max-width: 768px) {
  .class {
    font-size: 16px;
  }
}
 
@media screen and (max-width: 480px) {
  .class {
    font-size: 14px;
  }
}

ここでのポイントは1pxずれがある点です。min-width:480px、max-width:480pxとしてしまうと、480pxの場合のみ干渉合うので予期せぬ表示になってしまう事がありますのでご注意ください。

最後に

色々な解像度のスマホやタブレットがあるので、解像度が分岐するブレイクポイントをどこにするかは頭を悩ませるところかもしれません。
1px単位でこだわるようなデザインでは無く、メインとする端末を見据えながらどのような解像度でも耐えられる幅のあるデザインも意識するようにもする事がレスポンシブデザインでは重要となります。
media screen だらけとなるようなら、デザインの見直しを行うのも重要かもしれません。