レスポンシブデザインのhtml記述方法
- １．headにviewportを記述する
- ２．cssでメディアクエリを設定する
##１．headにviewportを記述する
###用語
viewport：Webページを表示するデバイス（PCやスマートフォンなど）を検知し、そのデバイスの画面サイズなどを取得する。htmlのhead内にmetaタグで記述する。
###ポイント
viewportを記述しないとメディアクエリが機能しないので必ずセットで記述する！
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--ここから-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ここまで-->
</head>
<body>
</body>
</html>
##２．cssでメディアクエリを設定する
###用語
メディアクエリ：画面のサイズに合わせてCSSの適用を分岐できる機能
@media (min-width:サイズpx) { cssの定義 }で記載する
###ポイント
ブレイクポイント デバイス
480px以下 スマートフォン(縦）
600px以下 スマートフォン(横)
960px以下 タブレット
1280px以下 パソコン(画面小)
1280pxより大きい パソコン(画面大)
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ここから-->
<style>
.media {
background-color: #333;
}
@media (min-width:480px) {
.media {
background-color: blue;
}
}
@media (min-width:640px) {
.media {
background-color: red;
}
}
</style>
<!--ここまで-->
</head>
<body>
</body>
</html>