★メディアクエリでスタイルシートを切り替える前回、meta要素でビューポートを設定して、ウェブページを等倍に表示させられるようになりました。この状態のウェブページに対して、スマートフォン用のスタイルを作成していきます。スマートフォン用のスタイルを作成すると言っても、スマートフォン向けに新たに別のウェブページを作成するわけではありません。これまでに作成したHTMLファイルをそのまま利用して、スタイルシートを切り替えることでスマートフォンサイトを実現します。具体的には、ユーザーがパソコンでアクセスしてきた場合と、スマートフォンでアクセスしてきた場合とで、適用するスタイルシートを別のものにします。それを実現するためにメディアクエリという手法を使います。メディアクエリとは、ユーザーの利用しているデバイスのウィンドウサイズに応じて、適用するCSSを切り替えるというものです。パソコンモニタのような大きな画面の場合にはパソコン向けのスタイルシートを適用させて、スマートフォンのような小さな画面の場合にはスマートフォン向けのスタイルシートを適用させるということです。サンプルサイトでは、大きな画面と小さな画面の境目を800ピクセルにしようと思います。index.htmlに以下の記述を追加してください。Reserved.</small></div></div></body></html>上記のHTMLでは、まずbase.cssを適用して、さらに、ウィンドウサイズが800px以下の場合にはbase_sp.cssも適用するように指定しています。base_sp.cssを作成していないので、ブラウザで表示をしても特に変化はありません。ウィンドウ幅に応じて異なるスタイルを指定する今回追加したHTMLソースの内容を確認しておきましょう。2つのCSSファイルと関連付けています。base.cssはすべてのメディアで適用され、base_sp.cssはウィンドウ幅800px以下の場合にだけ適用されます。メディアクエリを使用してスタイルを指定し分ける場合、ユーザーが利用しているデバイスの種類ではなく、ユーザーが閲覧しているウィンドウ幅に応じてスタイルが適用されます。スマートフォンはウィンドウサイズが小さいため(ウィンドウ幅800px以下のデバイスならば)、base_sp.cssが適用されます。ユーザーがパソコンで閲覧している場合にも、ブラウザのサイズを小さくして横幅800ピクセル以下にリサイズすれば、base_sp.cssが適用されることになります。次回は、base_sp.cssを新規作成して、本当にウィンドウ幅に応じてスタイルが切り替わるかどうか、表示テストをしてみましょう。