ブレイクポイントの復習 - WEB制作の備忘録

bodyの背景の色をブラウザの幅によって変更する

確認の仕方は、ブラウザを手動でスライドしていきます

1200px〜　黒
1000〜801px　赤
800〜601px　青
600〜401px　黄
〜400px　緑

PCサイズから作成する場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブウェブデザイン | メディアクエリーの復習</title>
<link rel="stylesheet" href="css/style_layout2_pc.css">
</head>
<body>

</body>
</html>

@charset "UTF-8";

/* reset */
html,body {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* body */
body {
  color: #666;
  background: green;
}


@media screen and (max-width: 1000px){
body {
  background: red;
}
}
@media screen and (max-width: 800px){
body {
  background: blue;
}
}
@media screen and (max-width: 600px){
body {
  background: yellow;
}
}
@media screen and (max-width: 400px){
body {
  background: green;
}
}

モバイルファースト：スマートフォンのサイズから作成する場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブウェブデザイン | メディアクエリーの復習 | モバイルファースト</title>
<link rel="stylesheet" href="css/style_layout2_pc.css">
</head>
<body>

</body>
</html>

@charset "UTF-8";

/* reset */
html,body {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* body */
body {
  color: #666;
  background: green;
}


@media screen and (min-width: 401px){
body {
  background: yellow;
}
}
@media screen and (min-width: 601px){
body {
  background: blue;
}
}
@media screen and (min-width: 801px){
body {
  background: red;
}
}
@media screen and (min-width: 1200px){
body {
  background:#000;
}
}