CSS メディアクエリ@mediaの設定方法

スクリーンサイズによってCSSを切り替えるメディアクエリの使い方。

共通のCSSを書いた後に、各端末用に変更の必要がある部分のみ@mediaに記述する。@mediaの指定の状態になった時のみCSSを「上書き」するので共通のCSSに書いてある内容をもう一度書く必要は無いが、共通のCSSの一部設定を無効にする事は出来ないため無効化したい場合は打ち消すような設定で上書きしなければならない。

高解像度(PCなど)のCSSを基本にスマホやタブレットなど低解像度に対応する。

<style>
/* ここにPC用のスタイルを書く(共通) */
img{width:900px;}
 
/* 次のカッコ内に タブレットなど 900px 以下の端末のスタイルを書く */
@media (max-width:900px) {
  img{width:640px;}
}
/* 次のカッコ内に スマホなど 640px 以下の端末のスタイルを書く */
@media (max-width:640px) {
  img{width:100%;}
}
</style>

「max-width」により表示領域がこのサイズより狭い場合にカッコ内のCSSが上書きされます。

低解像度(スマホ)のCSSを基準にタブレットやPCなど高解像度に対応する。

<style>
/* ここにスマホ用のスタイルを書く(共通) */
img{width:100%;}
/* 次のカッコ内にタブレットなど 640px 以上の端末のスタイルを書く */
@media (min-width:640px) {
  img{width:640px;}
}
/* 次のカッコ内にPCなど 900px 以上の端末のスタイルを書く */
@media (min-width:900px) {
  img{width:900px;}
}
</style>

「min-width」により表示領域がこのサイズより大きい場合にカッコ内のCSSが上書きされます。

PCスタイルを基本にスマートフォンを@mediaで対応するか、逆にスマートフォンを基本にPCスタイルを@mediaで対応するべきかの調べてみました。

ネットで調べると、

• モバイルファーストがSEOによい？
• IE8など@mediaに未対応のブラウザがあるのでPCスタイルをベースにした方が良い？
• 作りやすい方から作れば良い・・

など色々あるようです。

レスポンシブデザインやモバイルフレンドリーに関する内容でググルと、既存のPCスタイルのWebサイトをモバイルでも見れるようにする情報が圧倒的に多いのでトラブル解決しやすいと思われます。