レスポンシブWEBデザイン
現在は、同じ web ページを様々なデバイスで閲覧することがあたりまえのようになっています。
PC ばかりではなく、スマートフォンやタブレット端末といった表示画面の大きさや表示方法の違う環境で web ページを閲覧しても違和感なく表示されるようにデザインすることをレスポンシブWEBデザイン
といいます。
PC、スマートフォン、タブレット端末によって表示デザインを変更するレスポンシブWEBデザイン
を実現するために @import
や @media(メディアクエリ)
というアットルールを使用します。
<meta name="viewport">
まずは HTML テキストの <meta>にviewport
の指定を以下のようにしておきます。
意味は content の設定値で、横幅はデバイスの表示幅に合わせる。初期のズーム比はズームなし
です。
この設定は <title> より前、最初の <meta> 設定としたほうがよいようです。
詳しくは、<meta name="viewport"> エレメント
を参照してください。
@import と @media
@import と @media はメディアクエリ
とも呼ばれ、PC、スマートフォン、タブレット端末によって表示デザインを変更する条件を設定できる at-rule です。
例えば、以下のように画面の横サイズによって読み込む CSS ファイルを変更します。
上記の例では、最初に評価すべきは横幅 760px 以下のスマートフォン用のデバイスという定義です。順次表示幅が max-device-width
以下のものを評価し、適合したものが選択されます。
PC のように表示幅が大きいデバイスから評価するように定義することも出来ますが、ここでは スマートフォン → タブレット → PCの順で評価する方法のみを扱います。
max-device-width
、 min-device-width
は max-width
、 min-width
という書き方もできます。
max-width
、 min-width
という書き方はウィンドウの表示サイズによって読み込む CSS ファイルが変化します。一方、*-device-*
という書き方は画面の大きさによって読み込む CSS ファイルが固定されます。
Windows の Chrome では*-device-*
でも max-width
、 min-width
という書き方でも同じのようでした。
mobile.css の内容
上記の例では、スマートフォン用のスタイル設定は mobile.css
ファイルです。
この CSS ファイルに以下のような、全体の横幅、文字の大きさ、1行の高さのスタイル設定をします。
この例では、横幅が 320px; 以上、font-size が 18px、一行の高さ line-height が 2.2 で調整しています。
min-width はこの指定値以上で表示するという意味です。
指定値はあくまで例ですので、好みに調整してください。日本語は大きくなりがちではあると思います。
縦向き、横向き
スマートフォンやタブレットは縦向きか横向きかによって表示幅が変わります。以上の方法のままでは、縦向きでは最適な幅でも横向きで表示すると幅が合わないことがあります。
そのような場合は、@media を利用して一部だけスタイルを変更します。
ただし、いろいろ試してみましたが、有効な設定ではありませんでした。あくまで参考にして下さい。
この例では、スマートフォンが縦向きの場合は min-width:480px; 、横向きでは min-width: 960px; とデバイスの向きに合わせて表示幅も変更します。