これまでの授業でモバイルサイトから作っていくモバイルファーストや、既存の企業サイトをモデルにした物など数種類のレスポンシブデザインのサイトを制作してきましたが、大事なポイントをまとめると、
- メディアクエリー
メディアクエリーの使い方には、1つのCSSファイルに複数のブレイクポイントを設定する方法と、ブレイクポイント毎に複数のCSSファイルを設定する、の2種類の方法があります。注意が必要なのは
1つのCSSファイルにまとめる場合は各ブレイクポイントで上書きしないと上部に指定したスタイルが継続される。
複数のCSSファイルを用意する場合は各ブレイクポイントでスタイルを指定しないとブラウザーのデフォルトのスタイルが適用される
という事です。ここがメディアクエリーを使う際に一番大事なポイントなので必ず覚えましょう。
例 1つのCSSファイルにまとめるバージョン
@charset "utf-8"; body { } @media screen and (min-width:641px){ body { } } @media screen and (min-width:960px){ body { } }
ブレイクポイント毎に複数のCSSファイルを設定するバージョン
<link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/style-l.css" media="only screen and (min-width:960px)"> <link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:641px) and (max-width:959px)"> <link href="css/style-s.css" rel="stylesheet" media="only screen and (max-width:640px)">
- ブレイクポイント
ブレイクポイントとは、メディアクエリーによってCSSを切り替える条件となるポイントのことで、ブラウザーのウィンドウ幅（px）で考えます。ユーザーが使うであろうデバイスを念頭にブレイクポイントを決めます。ブレイクポイントは必ずしも決まっている訳では無く、その都度変わる可能性もあります。
ブレイクポイントの例
スマートフォン用のポイント 640px以下
タブレット用のポイント 641px～959px
パソコン用のポイント 960px以上
- フルードデザイン（Fluid Design）
ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズが拡大・縮小していくデザイン。「可変レイアウト」ともいう。今まではwidthなどにpx単位で固定値をしていましたが、フルードデザインの場合はパーセント指定が必須。
