【HTML】レスポンシブページを作るときに忘れがちなこと

by

レスポンシブデザインのページを作るときに忘れがちなことのまとめ。

メディアクエリを入れてるのに正常に動作しないなどのときの確認に。

ビューポートの設定

CMSなど使ってると用意されたヘッダに埋め込まれているので、ついつい忘れがち。動作テストなどでHTML単品で動かしているときにレスポンシブが効かないのは大体こいつのせい。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

メディアクエリの書き方

基本の書き方

@media screen and (min-width:368px){
  span.aaa{
    color:#FFF
  }
}

andの後のスペースを入れるのを忘れがち。

min-width→「少なくとも〜〜以上」
max-width→「大きくても〜〜以下」

の意味になるのでminとmaxを間違えがちだったり

おまけ

メモ帳からHTML作ったりなんて場合はドックタイプ宣言とか文字セットの宣言を忘れることも

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

HTML5になってドックタイプがすっきりしたのはすごく良いと思う