スマホ最適化【4】メディアクエリー（Media Queries）の設定

viewportを設定したら、次はMedia Queriesを設定します。
今まで設定してあったCSSを修正して、画面サイズごとに切り替えて最適な状態で表示させるようにしましょう。

Media Queries とは
 Media Queries を設定する前に
 Media Queries の設定
　　∟スマホ用、タブレット用、パソコン用、印刷用それぞれのCSSを設定する
印刷時の設定
　　∟印刷しない範囲を指定する方法
link要素のmedia属性でCSSを設定する場合
　　∟複数のCSSファイルを画面サイズごとに切り替えたいとき

Media Queries とは
Media Queries を設定する前に
Media Queries の設定
印刷時の設定
link要素のmedia属性でCSSを設定する場合

Media Queries とは

閲覧に使用されている機器（デバイス）の画面サイズや解像度によってCSSを切り替えて
より適した見え方を表示させる設定をMedia Queries（メディアクエリー）といいます。
機器の画面幅が●●px以下ならこのCSSスタイルで！というように
任意のサイズ指定が可能なため、スマホ用CSS、タブレット用CSS、パソコン用CSSを
ひとつのファイルに記述して切り替えることが可能です。

「画面の幅が320pxだから640px以下のCSSを読み込まないといけませんね」　
「スマホの画面サイズ？あ、違う、じゃあタブレットサイズ？
　　あ、それも違うならパソコン用サイズってことで通常のCSSを適用しときますね！」　
というように小さな画面幅から順に適用されていくため、
スマホにパソコン用の画面が表示されることもなく、
ユーザーにとって最適の状態で画面を表示させることができます。

また、忘れてはならないのが印刷用のCSS。
これを忘れると、ブラウザの印刷時にスマホ用のCSSが適用されたりして印刷がガッタガタになります。
別にうちのサイトを印刷するひとも居ないだろうし・・・と思われる方もいらっしゃるかもしれませんが、
印刷してまで手元においておきたいと思ってくれたユーザーさんが現れたときのためにも
せっかくですからこの機会に一緒に設定しておいてくださいね。

Media Queries を設定する前に

まず現在のサイトの状態を把握しましょう。
基本的にはhtmlファイルとCSSファイルがセットで存在しているか、
htmlファイルの中にCSSを記述しているかのどちらかだと思います。

今回Media Queriesを設定するにあたって、
・スマホ用のCSS
・タブレット用のCSS
・パソコン用のCSS
・印刷用のCSS
と、最低でも4種類のCSSをひとつのファイルに記述していきます。

ページ数の少ないシンプルなサイトさんならhtmlファイルにCSSを合わせて記載しても良いのですが、
ページ数が多く、CSS装飾も多いサイトさんだと、htmlファイルにCSSを合わせて記述すると
ずらーっと長くなって見直すのも大変な状態になると思いますので
独立したCSSファイルを用意していただくことをオススメします。
　⇒ご参考に　Webサイトを作ろう！　【１２】スタイルシート（CSS）の解説

また、複数のCSSファイルを全て書き直すのもなかなか大変なので、
出来る限りひとつのCSSファイルを全てのページに使いまわせるようにしたいところです。

たとえば common.css というファイルを用意した場合、
htmlファイルの<head>から</head>の間のmeta領域に以下の記述を追加しておきます。

ひとつのCSSにスクリーン指定もプリント指定もしてあるファイルなので
念のために media=”all” を書いています。
（別に書いてなくても自動でall扱いにしてくれるとは思うのですが）
今まで別のCSSファイルを適用していた場合には、その記述をファイル名に合わせて書き直すか、
削除して上の記述を追加してください。

Media Queries の設定

ここではひとつのCSSファイルの中に
・スマホ用のCSS
・タブレット用のCSS
・パソコン用のCSS
・印刷用のCSS
以上の4つのCSSを記述し、画面の幅によって切り替える方法をご説明します。
　※CSSファイルを4つに分けて振り分けたい場合は
　　link要素のmedia属性でCSSを設定する場合　をご覧ください。

基本的に必要なのはこのような条件指定をCSSに追加することです。

CSSコードの追加

@media screen and (max-width: 640px) {
ココにCSSを記述
}

この場合は、画面の横幅が640px以下ならこのCSSを読み込んでね！という指定になります。

複数のデバイスに合わせて切り替える指定を行うと以下のようになります。
画面幅の数値などはお好みで変更してください。

CSSコード

/* 画面の横幅が640px以下・スマホ用CSS */
@media screen and (max-width: 640px) {
body {
font-size: 98%;
color: #2a2a2a;
}
img {
max-width: 100%;
height:auto;
}
}

/* 画面の横幅が768px以下・タブレット用CSS */
@media screen and (max-width: 768px) {
body {
font-size: 98%;
color: #2a2a2a;
}
img {
max-width: 100%;
height:auto;
}
}

/* 画面の横幅が769px以上・パソコン用CSS */
@media screen and (min-width: 769px) {
body {
margin : auto;
padding:0;
font-size: 96%;
}
img {
border-style:none;
}
}

/* 印刷用CSS */
@media print {
body {
font-size: 96%;
}
img {
border-style:none;
}
.delete {
display:none;
}
}

上の例では body と img のみ設定していますが、各CSSはご自分のサイトに合わせて記述してください。
パソコン用のCSSは今までのものを使いまわせば良いのですが、他のデバイスのCSSを考えるのが大変かと思います。

印刷時の設定

@media print で指定したCSSで、印刷に出したくない箇所を指定することができます。

弊社サイトのFAXのページ　http://pc-pier.com/fax.html
こちらを試しに印刷プレビューで見ていただくと、
上部の説明文章と、下部フッターの部分が印刷に出てこないはずです。
（Internet Explorerのバージョンによっては普通に出てくるかもしれませんが・・・）
これは全てを印刷に出してしまうと、うまくA4サイズにおさまらないので
htmlとCSSそれぞれの設定によって印刷に出したくない部分を決めているためです。

その印刷時に表示させない設定がこれ。

CSSコード

.delete {
display:none;
}

※deleteの部分は任意のクラス名で大丈夫です。

このCSSを記述したら、html側で印刷に出したくない部分を

HTMLコード

で囲めばOKです。

メニューバーやサイドバーなど、印刷時に表示しなくても良い箇所がある場合は設定しておくと親切ですね。