（※これから紹介するのはほんの一例であり、私の個人的見解を含みます。これが絶対ということはないですし、もっと良いやり方があったり、コンテンツの内容によって違ってきたりするということは理解しておいてください。）

生徒「レスポンシブって難しい・・・。」
先生「どうしました？」
生徒「先生、レスポンシブがうまくできないんです。」
先生「レスポンシブとはどういうことを言うか、わかりますか？」
生徒「PCでもスマホでもサイトが見られるということですよね？」
先生「そうですね。もう少し詳しく言えば、一つのHTMLソースをデバイスや画面サイズに応じて適切に表示できるようにすることですね。なのでただ画面サイズに対して縮めただけというようなレイアウトではレスポンシブと呼べるかは微妙なところですね。」
生徒「そうなんですね。」

先生「簡単なコードを例にレスポンシブのやり方について見ていきましょう。まず、用意したHTMLはこちらです。」



「そしてそれに対してこのようにスタイルを設定します。」



「その見栄えがこちら」
DEMO①

「まずはPC用に固定値でレイアウトを決めました。次にこれを画面サイズに応じて最適なものにしていくのですが、このとき幅や余白などの数値はbodyに対して相対的に設定したいので、％にします。
ということで％にしたものがこちらです。今回は幅のみ％指定です。」



DEMO②

「これで画面を縮めても表示されてるでしょう。どこまでも伸びていくと気持ち悪いので、max-widthを指定しています。」
生徒「でも、先生。縮めていくとリストやコンテンツが狭くなりすぎる気がするのですが。」
先生「そうですね。同じレイアウトのまま画面サイズが小さくなれば見づらくなります。そこでブレークポイントを指定しましょう。」
生徒「ブレークポイント？」
先生「ブレークポイントとは画面サイズが変化したときにスタイルが変わる画面幅のことです。メディアクエリー（@media screen snd …）でブレークポイントを指定した、その画面サイズまでの間でのみ違うスタイルを適用させることができます。（※デバイスサイズや向きによっても分けられます。詳しくはこちら
デバイスに合わせてCSSを振り分ける「Media Queries」）
メディアクエリーで画面サイズ600xp以下の時のスタイルを指定したものがこちらです。(@media以外は②と一緒です)」



DEMO③

「これだと画面サイズが小さくなってもある程度見やすさを維持できていると思います。」

生徒「そうですね、コンテンツの幅もあるし、ナビのボタンもタップしやすいです。」
先生「実際にはこれにコンテンツの内容が入ってくるので、これだけでレスポンシブ完成というわけにはいきませんが、基本的な考え方はこんなかんじです。」
生徒「そうなんですね。先生、もう一度レスポンシブに挑戦してみます。」

参考サイト
必読！5分でわかるレスポンシブWebデザインまとめ
レスポンシブWebデザインの作り方（簡単設定方法）