レスポンシブとは
viewport
viewportとは
viewportの書き方
以下の<metaタグを<head>タグ内に記述します。
<meta name="viewport" content="width=device-width,initial-scale=1">
こんな感じです。
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8" />
<!-- ここに記述します。 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
メディアクエリ（Media Queries）
メディアクエリとは
パソコンやスマートフォン、タブレットなど画面サイズ（解像度）が異なるデバイス毎にCSSのスタイルを振り分けるためのタグです。
レスポンシブなWEBサイトを構築するためには必須のタグです。
ブレークポイント
ブレークポイントとは
メディアクエリを使ってデバイス毎に適応させるCSSスタイルを切り替えるポイント（主に横幅）を「ブレイクポイント」と言います。
モバイルファーストの書き方
Googleは、とにかく「モバイルファースト」を推奨、推進している。らしいです。