複数ファイルでのレスポンシブデザインとviewportの設定
前回の授業で、レスポンシブデザインはメディアクエリーを使って各ブレイクポイントでCSSを切り替えマルチデバイスに対応する。という手法だという事が解ったと思います。
前回のように記述が短い場合であれば、1枚のCSSファイルにPCサイズ、タブレットサイズ、スマホサイズのスタイルをまとめて記述するのが一般的ですが、記述が長くなる場合は各ブレイクポイント毎に、複数のCSSファイルに分けて記述する場合もあります。
複数のCSSファイルに分けた場合の記述方法と問題点をしっかりと理解しましょう。
記述方法
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>レスポンシブ対応サイト・サンプル２(スタイルが継承されないパターン)</title> <link rel="stylesheet" href="style-l.css" media="only screen and (min-width:960px)"> <link rel="stylesheet" href="style-m.css" media="only screen and (max-width:959px)"> <link rel="stylesheet" href="style-s.css" media="only screen and (max-width:767px)"> </head> <body> </body> </html>
viewportの設定
実はメディアクエリーのみではスマホの実機で見た際にCSSの切り替えは出来ません。
指定したメディアクエリーをスマホでちゃんと対応させるには「viewport」の設定が必要になります。
viewportとは？
viewportとはスマホ独特の指定方法でPCサイトには無かった概念です。簡単に言うとスマホで見た際の「表示領域」を示す記述です。一昔前は「width=320px」や「width=420px」というように固定値を記述していましたが、スマホの画面サイズの種類が多くなった現在では固定値は使わず「width=device-width」というように記述します。device-widthというのはユーザーが見ているデバイスの大きさによって「表示領域」が可変するという事です。「viewport」はHTMLファイルのhead部分に記述します。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
viewportで指定するもの
- width=device-width（表示領域）
- initial-scale=1（古いiOSでは、画面を横向きにすると自動でページが拡大される設定になっているが、その自動拡大を防ぐため）
- user-scalable=no（ユーザーがピンチイン、ピンチアウトで拡大・縮小出来るかの設定。Yes/no or 1/0）
