PCとスマホで表示がガラッと変わるサイトであれば、別々のHTML・CSSでコーディングすると思いますが、いまは1つのHTMLファイルで、ウィンドウサイズで表示が切り替わる「レスポンシブウェブデザイン」が主流となっています。レスポンシブのほうが、管理するファイルが少なくなるので更新がしやすく、個人的には必ずレスポンシブで作るようにしています。今回はレスポンシブウェブデザインの作り方のポイントをまとめてみました。

1）　読み込みビューポート(viewport)タグを記述する

head内に、下記読み込みビューポート(viewport)タグを記述します。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2）　横幅を％で組む

今までは固定のpxで横幅を指定してコーディングしていたと思いますが、レスポンシブにするにはウィンドウサイズに合わせるので、横幅を％指定して組んでいきます。

3）　ブレイクポイントを決める

横幅を％で組むと、ウィンドウサイズに合わせてコンテンツが伸び縮みしますが、どのウィンドウ幅でスマホ表示に切り替えるか、表示の切り替え点であるブレイクポイントを決めます。

4）　メディアクエリを使ってウィンドウの大きさごとにスタイルを調整する

ブレイクポイントが決定したら、メディアクエリを使ってウィンドウの大きさごとにスタイルを調整していきます。この時点でいろいろなブラウザでチェックをしていき、このサイズのスマホだと表示が大きすぎるとか、表示がはみ出してしまうなどの問題点があれば、さらにブレイクポイントを設定し、スタイル調整をしていきます。

はじめは感覚をつかむのが難しいかもしれませんが、慣れてくるとPCでの表示を、スマホではどう並べればいいのかがわかってくるようになると思います。たくさん作って、感覚をつかんでいきましょう！