レスポンシブデザインのポイント

メディアクエリー

• Webページの見栄えを記述するCSS3で追加された仕様
• 表示された画面環境に応じて適用するスタイルを切り替える機能
• ブレイクポイントを使用してレイアウトを制御

ポイント

• 各ブレイクポイントで記述すると上書きで指定されます
• 上部に指定されたスタイルは継続されるので注意します
• 複数のCSSファイルを用意する場合は、各ブレイクポイントでスタイルを指定しないとブラウザのデフォルトスタイルが適用されます。

【1つのCSSファイル】

@charset "utf-8";
body {
 
  }
@media screen and (min-width:641px){
body {
  
  }
}
@media screen and (min-width:960px){ 
 body {
 
  }
}

<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以上

フルードデザイン

• ブラウザの横幅が変化してもレイアウトを維持したまま要素のサイズが拡大・縮小していくデザインです
• 可変レイアウトともいいます

img {
  max-width: 100%;
}