レスポンシブWEBデザイン

　現在は、同じ web ページを様々なデバイスで閲覧することがあたりまえのようになっています。
　PC ばかりではなく、スマートフォンやタブレット端末といった表示画面の大きさや表示方法の違う環境で web ページを閲覧しても違和感なく表示されるようにデザインすることをレスポンシブWEBデザインといいます。

　PC、スマートフォン、タブレット端末によって表示デザインを変更するレスポンシブWEBデザインを実現するために　@import や @media（メディアクエリ）というアットルールを使用します。

- ad -

<meta name="viewport">

　まずは HTML テキストの <meta>にviewportの指定を以下のようにしておきます。

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

　意味は content の設定値で、横幅はデバイスの表示幅に合わせる。初期のズーム比はズームなしです。

　この設定は <title> より前、最初の <meta> 設定としたほうがよいようです。

　詳しくは、<meta name="viewport"> エレメントを参照してください。

@import と @media

　@import と @media はメディアクエリとも呼ばれ、PC、スマートフォン、タブレット端末によって表示デザインを変更する条件を設定できる at-rule です。

　例えば、以下のように画面の横サイズによって読み込む CSS ファイルを変更します。

画面の大きさによるメディアクエリ

/* スマートフォン用  デバイスの横サイズが 760px 以下　*/
@import url("./mobile.css") screen and ( max-device-width:760px);
/* タブレット用  デバイスの横サイズが 761px 〜　1200px　*/
@import url("./pad.css") screen and (min-device-width:761px) and ( max-device-width:1200px);
/* PC用  デバイスの横サイズが 1201px 〜　1500px　*/
@import url("./normal.css") screen and (min-device-width:1201px) and ( max-device-width:1500px);
/* PC用  デバイスの横サイズが 1501px 以上　*/
@import url("./normal1.css") screen and (min-device-width:1501px);

　上記の例では、最初に評価すべきは横幅 760px 以下のスマートフォン用のデバイスという定義です。順次表示幅が max-device-width 以下のものを評価し、適合したものが選択されます。

　PC のように表示幅が大きいデバイスから評価するように定義することも出来ますが、ここではスマートフォン　→　タブレット　→　PCの順で評価する方法のみを扱います。

　 max-device-width 、 min-device-width は max-width 、 min-width という書き方もできます。
　いろいろやってみたら、 max-device-width 、 min-device-width という書き方がほぼ間違いなく評価するようでしたので例ではこのようにしました。

mobile.css の内容

　上記の例では、スマートフォン用のスタイル設定は mobile.css ファイルです。
　この CSS ファイルに以下のような、全体の横幅、文字の大きさ、１行の高さのスタイル設定をします。

スマートフォンの縦向き、横向き

/* 主に全体の横幅とフォントサイズ */
body{
	min-width: 320px;
	font-size: 18px;
	line-height: 2.2em;
}

　この例では、横幅が 320px; 以上、font-size が 18px、一行の高さ line-height が 2.2 で調整しています。
　min-width はこの指定値以上で表示するという意味です。

　指定値はあくまで例ですので、好みに調整してください。日本語は大きくなりがちではあると思います。

縦向き、横向き

　スマートフォンやタブレットは縦向きか横向きかによって表示幅が変わります。以上の方法のままでは、縦向きでは最適な幅でも横向きで表示すると幅が合わないことがあります。
　そのような場合は、@media を利用して一部だけスタイルを変更します。

　ただし、いろいろ試してみましたが、有効な設定ではありませんでした。あくまで参考にして下さい。