WEBのスマホ対応ってどうやるの?! レスポンシブ・デザインとメディアクエリについて

レスポンシブ・デザインってこんなもの

でも今は「レスポンシブ・デザイン」というものが主流です。どんなものかと言うと……

例えば、HTMLはPCもスマホも全く同じ（というか同じファイル）で用意します。

で、PCでもスマホでもいい感じに見えるようにそれぞれに合ったスタイルシート（CSS）を用意するんですね。

「レスポンシブ・デザイン」は、CSSを2つ用意し、HTMLファイルは全く同じなのにPCとスマホでは違ったように見える……という合理的なやり方です。

こういったデザインを
レスポンシブ・デザインと呼びます。

「responsive（レスポンシブ）」というのは「反応する・回答する」という意味で、違うデバイス（PCとかスマホ）によって、CSSで違う「反応」を示すから「responsive」なんですね。

メディアクエリって??

「メディアクエリ」は、「横幅480px以下（スマホサイズ）の画面で見た時だけ別のCSSを使うよ!」みたいな指示です

記述としては以下の様にします。

@media screen and (max-width: 480px) {   ※ ここにCSSを普通に入れる   }


メディア・クエリの具体例

では具体例を出してみます。

PCでの表示

文字の大きさを20pxで表示

スマホでの表示

文字の大きさを15pxで表示

こんなふうにPCとスマホで違う文字の大きさにしたいとします。ではどうやってCSSを記述するのでしょうか?


p { font-size : 20px ; }


ここまでは大丈夫ですか? これで、文字のサイズが20pxになりました。

でもスマホで見ても同じ大きさになります。そこでさっき出てきた「メディアクエリ」の記述内に、調整したいCSSを入れるだけです。


p { font-size : 20px ; }

@media screen and (max-width: 480px) {
p { font-size : 15px ; }
}

たったこれだけで、スマホで見たときだけ文字が15pxになります。

簡単でしょ? なお、{ } が入れ子になってダブって気持ち悪いと思いますが、正しい記述なので大丈夫ですよ（笑）。