レスポンシブwebデザイン

レスポンシブwebデザインを学ぼう

レスポンシブ対応する方法

Webサイトをレスポンシブ化するためには以下の工程が必要です。

表示領域の設定をする
画面サイズによってCSSを切り替えるための設定をする
画面サイズごとに適用するCSSを記述する

表示領域を設定する方法

レスポンシブ対応をするためには、画面幅が異なるデバイスに対してWebサイトの表示領域の設定をする必要があります。

この表示領域をviewportと呼びます。

viewportの指定をしないと、スマートフォンで表示した時に、PCサイトのレイアウトをそのままスマートフォンの画面内に収まるように縮小して表示されるので、文字が小さくなり非常に見づらくなってしまいます。

viewportを設定するためには、htmlファイルのheadタグ内に以下の記述を追加します。

例

contentプロパティにwidth="device-width"を指定することで、ブラウザの大きさをPCやスマートフォンなどの機器の大きさに合わせることができます。
initial-scaleは、画面の拡大率を指しています。拡大率は「1.0」に設定しているため、拡大は行われません。

これで表示領域の設定が完了しました。

次に、画面サイズによってCSSを切り替える方法を学びましょう。

先に例を出したほうがわかりやすいので、以下を見てください。

例えば、「画面幅が500px以下の時にのみ、pタグのfont-sizeを10pxにしたい」という場合は以下のように記述します。

@media (max-width: 500px) {
p {
font-size: 10px
}
}

見慣れない記述ですが、「max-width: 500px」の部分は「画面幅が最大500pxのとき」という意味になるので、すなわち「画面幅が500px以下のとき」という意味になります。

max-widthに対してmin-widthも存在します。その場合は「画面幅が最低500pxのとき」という意味になるので、すなわち「画面幅が500px以上のとき」という意味になります。

最後に画面サイズごとにcssを適用する方法を学びます

メディアクエリを書いたら、実際にCSSをその中に書いていきます。

例えば、以下はPC表示時はpタグのフォントサイズを30px、タブレット時は25px、スマホ時は20pxにするという記述です。

/* PC表示時 */
p {
font-size: 30px
}

/* タブレット表示時 */
@media (max-width: 1000px) {
p {
font-size: 25px
}
}

/* スマホ表示時 */
@media (max-width: 500px) {
p {
font-size: 20px
}
}

他にもPC表示時は横並びのレイアウトをスマホ時には縦並びにしたり、marginの値を小さくしたりすることがあります