レスポンシブデザインの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 screen and (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 screen and (min-width:480px) {
.media {
background-color: blue;
}
}
@media screen and (min-width:640px) {
.media {
background-color: red;
}
}
</style>
<!--ここまで-->
</head>
<body>
</body>
</html>
↧