レスポンシブWebデザインとは、1つのHTMLをCSSによってパソコンでもスマートフォンでも見やすいように最適化することです。
スマートフォンでWebサイトを見る人が多くなった現在では、WebサイトをレスポンシブWebデザインで作ることは必須だと言えます。
レスポンシブWebデザインでWebサイトを作るのは難しいと思われがちです。
確かに通常のWebサイトを作るよりは少し手間は掛かりますが、基本はシンプルで簡単です。
レスポンシブWebデザインの作り方を出来る限り簡単に解説していこうと思います。
目次
レスポンシブWebデザインの作り方
レスポンシブWebデザインを作る上で必要なものは以下の2つです。
- ビューポート（viewport）の指定
- メディアクエリ（Media Queries）
ひとつずつ解説していきます。
ビューポート(viewport）を指定する
ビューポート（viewport）とは、Webサイトの表示サイズを指定するmeta要素です。ビューポートを指定しておかないと、Webサイトが意図しないサイズで表示される場合があります。
ビューポートは<head>タグ内に記述します。
レスポンシブWebデザインのHTMLの雛形は以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブWebデザインの作り方</title>
</head>
<body>
</body>
</html>メディアクエリ（Media Queries）でデザインを切り替える
CSSのメディアクエリ（Media Queries）を使うことによって、スマートフォン、タブレット、パソコンなどのデバイスごとにデザインを切り替えることができます。
メディアクエリはCSSファイルに以下のように書きます。
/* ここにスマートフォンのCSSを書く */
@media (min-width: 768px) {
/* ここにタブレットのCSSを書く */
}
@media (min-width: 1200px) {
/* ここにパソコンのCSSを書く */
}768pxや1200pxはウインドの横幅のサイズです。min-width: 768pxはウインドウの横幅が768px以上の場合という意味になります。
まずは普通にスマートフォン用のCSSを書きます。
そして、スマートフォン用のCSSを@media (min-width: 768px)や@media (min-width: 1200px)で上書きしていくイメージです。
768pxや1200pxは自由に変更して大丈夫です。また、CSSを切り替えるポイントを「ブレイクポイント」と言いますが、ブレイクポイントを増やしたり減らしたりすることもできます。
/* ここにスマートフォンのCSSを書く */
@media (min-width: 576px) {
/* ここに大画面スマートフォンのCSSを書く */
}
@media (min-width: 768px) {
/* ここにタブレットのCSSを書く */
}
@media (min-width: 992px) {
/* ここにパソコンのCSSを書く */
}
@media (min-width: 1200px) {
/* ここに大画面パソコンのCSSを書く */
}制作するWebサイトによって対応すべきデバイスは異なるので、必要に応じてブレイクポイントを設定します。
パソコン用のCSSを先に書くパターン
パソコン用のCSSをタブレットやスマートフォン用のCSSで上書きしていくパターンもありますが、個人的にはスマートフォン用のCSSを最初に書いた方が作りやすいと思います。
スマートフォンとパソコンでは、パソコンの方が表示領域が広いのでデザイン要素が多くなり、レイアウトも複雑になりがちです。複雑なものをシンプルにしていくより、シンプルなものを複雑にしていく方が楽だと思うので、僕はスマートフォンのCSSから書くようにしています。
一応、パソコン用のCSSから書くパターンも紹介しておきます。
/* ここにパソコンのCSSを書く */
@media (max-width: 1199px) {
/* ここにタブレットのCSSを書く */
}
@media (max-width: 767px) {
/* ここにスマートフォンのCSSを書く */
}max-width: 1199pxはウインドウの横幅が1199px以下という意味です。
まずパソコン用のCSSを書き、ウインドウの横幅が1199px以下、767px以下になるごとにCSSを上書きしていきます。
レスポンシブWebデザインのサンプルを紹介
レスポンシブWebデザインでよく使うサンプルをいくつか紹介します。
どのサンプルもスマートフォン用のCSSをタブレットやパソコン用のCSSで上書きする形になっています。
デバイスごとにフォントサイズを変更する
レスポンシブWebデザインでは、見出しのフォントサイズをデバイスごとに変更することが多いです。スマートフォンに合わせてフォントサイズを指定するとパソコンでは小さく感じますし、パソコンに合わせてフォントサイズを指定するとスマートフォンでは大きすぎて改行が増えることもあります。
仮にH2のフォントサイズをデバイスごとに変更する場合は、以下のようなCSSになります。
h2 {
font-size: 18px;
}
@media (min-width: 768px) {
h2 {
font-size: 24px;
}
}
@media (min-width: 1200px) {
h2 {
font-size: 32px;
}
}デバイスごとに縦並びや横並びのレイアウトを変更する
スマートフォンでは1列で縦並びになっている要素を、パソコンでは4列で横並びにするなど、デバイスによってレイアウトを変えることができます。
レスポンシブWebデザインにおいて、このレイアウト変更はあらゆる場面で使います。
今回は以下のようにレイアウトを変更したいと思います。
- スマートフォンでは1列で縦並び
- タブレットでは2列で横並び
- パソコンでは4列で横並び
HTMLを以下のように書きます。
<div class="row">
<div class="col">カラム</div>
<div class="col">カラム</div>
<div class="col">カラム</div>
<div class="col">カラム</div>
</div>CSSを以下のように書きます。
.row {
display: flex;
flex-wrap: wrap;
}
.col {
width: 100%;
}
@media (min-width: 768px) {
.col {
width: 50%;
}
}
@media (min-width: 1200px) {
.col {
width: 25%;
}
}.rowにdisplay: flex;を指定して.colが横並びになるようにします。このままだと.colが折り返らずウインドウ から見切れてしまうので、flex-wrap: wrap;で折り返すように指定しています。
スマートフォン用のCSSでは.colにwidth: 100%;を指定しているので、.colの横幅はウインドウの横幅いっぱいになり1列で折り返って縦並びになります。
タブレット用のCSSでは.colの横幅を50%に指定しているので、.colは横2列でお折り返って横2列、縦2行のレイアウトになります。
パソコン用のCSSでは.colの横幅を25%に指定しているので、.colは横に4列並ぶレイアウトになります。
スマートフォンで画像が見切れないようにする
大きめの画像を配置した場合、スマートフォンでは見切れてしまう場合があります。その場合は、imgタグにmax-widthを指定することで解決できます。
img {
height: auto;
max-width: 100%;
}ただし、これだけだとパソコンでは画像が左寄せになってしまいます。
ウインドウの横幅が画像の横幅より大きくなった場合は、画像を中央寄せにした方がレイアウトとしてキレイです。この場合は以下のようにCSSを書けば大丈夫です。
img {
display: block;
height: auto;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}レスポンシブWebデザインの作り方まとめ
レスポンシブWebデザインの作り方で押さえておくべきポイントは以下の2つです。
- ビューポート（viewport）の指定
- メディアクエリ（Media Queries）
ビューポートは1回書くだけなので書き忘れに注意しておけば問題ありません。
あとはメディアクエリでデバイスごとにCSSを指定していくだけです。メディアクエリの基本形は以下の通りです。
/* ここにスマートフォンのCSSを書く */
@media (min-width: 768px) {
/* ここにタブレットのCSSを書く */
}
@media (min-width: 1200px) {
/* ここにパソコンのCSSを書く */
}複雑なレスポンシブWebデザインも、この基本形を応用することで作られています。まずは簡単なデザインやレイアウトの切り替えから練習し、徐々に複雑なレスポンシブWebデザインに挑戦していけばいいと思います。
以上がレスポンシブWebデザインの作り方でした。