【コーディング】今さら聞けない！レスポンシブデザインの対応方法

皆さん、レスポンシブwebデザインに対応したコーディング、できますか？

ちょっと前まではやりますか？とお客さんに確認をとって対応していましたが、
レスポンシブコーディングは今ではあたりまえになっています。

でもコーディングを始めたばかりだと、レスポンシブに対応したコーディングの方法ってよくわからないですよね。

でも大丈夫！
この記事は以下のような人の役に立つように書いています。

レスポンシブwebデザインって何？
どうやるかわからないけど難しそう
なんとなくわかるけど、ちゃんと作れるか不安

この記事を読み終わるころには、あなたが今持っている不安は消え、レスポンシブ対応の方法が分かるようになっていますよ。

レスポンシブウェブデザインとは
レスポンシブページの作り方
まとめ

レスポンシブウェブデザインとは

Googleさんによると、

ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しつつ、画面サイズに応じてレンダリング方法を変更します。Google では、実装と維持が最も簡単なデザインパターンとしてレスポンシブウェブデザインをおすすめしています。
引用元：モバイル SEO の概要 | 検索 | Google Developers

と定義されています。

簡単にいうと、1つのソース（htmlなど）が様々なデバイスに適した形で表示されることです。

少し前まではパソコンとスマートフォンで別々のページを作成するのもよくありました。

パソコン用：https://xxxx.com/index.html
スマートフォン用：https://xxxx.com/sp/index.html

こんな感じですね。
今でもこのように、パソコンとスマートフォンでファイルを分けて作成されているwebサイトもあります。

レスポンシブページの作り方

レスポンシブwebデザインに対応したコーディングで、やることは大きく2つ。

htmlにviewportを設定する
デバイスに合わせたCSSを書く

意外と少ないですよね！

viewport（ビューポート）を設定する

では、まずはhtmlのソースを編集します。
レスポンシブ対応に必要な記述を、テンプレートとして手元に用意しておくと便利です。（書くことは基本的に毎回同じなので）

下記のコードを例に順を追って解説していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <title>レスポンシブサイト</title>
</head>
<body>
  <!-- ▼▼▼コンテンツ内容▼▼▼ -->

  <!-- /▲▲▲コンテンツ内容▲▲▲ -->
</body>
</html>

※上記ソースをベースに私は作っています。コピペして流用してもOKです。

<head></head>の間に注目してください。
この部分に、レスポンシブwebデザインのコーディングには欠かせない記述を書きます。

html側で必要なのは「viewport（ビューポート）」の設定です。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewportとは、簡単に言うと表示領域を決める指定です。
viewportを指定しなければ、いくらスマートフォンに対応したCSSを書いても適用されません。

viewoportの設定項目はcontent=””の“”の間に記述します。
では、viewportの細かな設定について解説していきます。

width

表示領域の幅設定。

基本的には「device-width」を設定します。
device-widthは、「閲覧している端末の画面幅で表示」という意味です。
※ごくまれに〇〇pxといったサイズが入っているサイトもあります。

initial-scale

初期のズーム倍率の設定。

1.0＝100％表示です。

たとえば、initial-scale=2.0にすると2倍サイズで表示されます。
基本的には1.0で設定します。

minimum-scale

最小倍率の設定。
initial-scaleと同時に指定できません。

指定しないことが多いので、今回紹介したviewoportの記述には含まれていません。

maximum-scale

最大倍率の設定。

指定しないことが多いです。

user-scalable

ユーザー側でズーム操作ができるようにするかの設定。

ただし設定しても現在のiOS（iPhone）では操作できてしまいます。
なので現在、user-scalableを指定することはほぼありません。

PC用、SP用のCSSを作る

htmlにviewportの設定ができたら、次はCSSの設定を行います。

レスポンシブ対応にはメディアクエリを使い、デバイスの幅によって反映するCSSを使い分けます。

メディアクエリとは

デバイス幅によって適応されるスタイルを設定するときに使用するタグです。

@media screen and (max-width:740px) {
ここにCSSを書く
}

上記の記述だと、画面の最大幅が740px以下（SPサイズ）だった場合に、記述しているCSSを反映となります。

ブレイクポイント

表示を切り替える数値のことを「ブレイクポイント」と呼びます。

@media screen and (max-width:740px)

上記であれば、740pxがブレイクポイントです。
サイトや会社によって指定するブレイクポイントは違うので注意。

メディアクエリを使ったCSSの書き方

私はPCをベースに作ってSP用のCSSを上書きしていってサイトをレスポンシブ化させています。
※私はPCをベースに作っていますが、SPをベースに作っても問題ないです。

サイトによってはタブレット用の記述も追加します。
※タブレットにはパソコンもしくはスマートフォンのデザインを流用することが多いです。

例）

/* PC用CSS */
.sample {
color: red; /*文字色は赤*/
}

/* SP用CSS */
@media screen and (max-width:740px) { /*画面幅740px以下はこのCSSを反映*/
.sample {
color: blue; /*画面幅740px以下で文字色を青に*/
}
}

※上記ソースをベースに私は作っています。コピペして流用してもOKです。

レスポンシブに対応したCSSの考え方

CSSは後ろの行に書いてある内容が反映されるので、前に書いてある記述を、後ろに書いた記述で上書きしていきます。

パソコン用のCSSが書いてあるだけでは、スマートフォンで見た時もパソコンと同じレイアウトで表示されます。
スマートフォン対応するには、パソコン用に書いたCSSの記述で不都合な内容をスマートフォン用CSSで上書きします。
（スマートフォン用の記述が先に書いてある場合は、パソコン用の内容で上書き）

少し具体的な例を紹介します。

カラムの解除

PCデザインだと複数のカラムで作られる場合が多々あります。
しかし、スマートフォンで閲覧した場合、カラム数が多いと小さくて見えなくなってしまいます。

なので、スマートフォンでは1カラムのレイアウトが多いです。
内容や情報量によりますが、多くても2～3カラムが限度かなと思います。

例）PCデザイン3カラムをSPデザイン1カラムにする場合
下記のようにSPで上書きするCSSにwidthとfloatをリセットして書きます。

/* PC用CSS */
.sample div {
width: 300px;
float: left;
}

/* SP用CSS */
@media screen and (max-width:740px) {
.sample div {
width: auto; /*要素の幅を画面幅に合わせて自動調整*/
float: none; /*floatを解除*/
}
}

↓flexboxだとこんな感じ。

/* PC用CSS */
.sample div {
width: 300px;
display: flex;
justify-content: space-between;
}

/* SP用CSS */
@media screen and (max-width:740px) {
.sample div {
width: 100%;
flex-direction: column; /*並びを縦並びに*/
justify-content: normal; /*justify-contentを解除*/
}
}

flex-direction：columnを指定した子要素の高さがおかしくなってしまった場合は、min-height: 0%;を指定すると解消されます。

画像用の幅を指定

PCサイズの画像をそのまま使うとサイト幅より大きくなって突き抜ける場合があります。

下記の記述をSP用のCSSに記載すると、画面内に収まるようになります。

/* PC用CSS */
img {
width: 500px;
}

/* SP用CSS */
@media screen and (max-width:740px) {
img {
width: 100%; /*親要素の幅に合わせて自動調整*/
height: auto; /*横幅に合わせて高さを自動調整*/
}
}

「この画像は50％で表示したい」などのときは、↓このようにクラス等を割り当てて対応してくださいね。
例）

img.w50p {
width: 50%;
height: auto;
}

レスポンシブに最適な画像サイズ

レスポンシブに対応した画像サイズは、一番頭を悩ませる問題です。

レスポンシブコーディングの場合、サイズの異なるデバイス（パソコン、スマートフォンなど）を考え、なるべく大きい画像にしておくべきです。
しかし、あまりにも画像サイズが大きいと、ページの読み込み速度が遅くなる「ページが重い」現象が発生します。

また、PCデザインのサイズ感のまま書き出すと画像がぼけてしまう場合があります。
レティナディスプレイや4Kディスプレイなど、解像度の高いディスプレイもあるためです。

2倍のサイズで画像を書き出す

レスポンシブに適した画像サイズ：2倍のサイズで画像を書き出す

2倍で書き出すことで、ある程度キレイな画質が維持できます。

パソコンとスマートフォンで共通の画像

パソコン用の画像を2倍サイズで書き出し

パソコンとスマートフォンで別の画像を使用

原寸で書き出し（スマートフォンのデザインが最初から2倍で作られている場合）
※スマートフォン用の画像が極端に小さい場合は3倍書き出しの場合もあります

今後、5Gの普及によっては3倍・4倍といったサイズで書き出しても問題のない時代が来るかもしません。

まとめ

ざっとですが、作り方の解説でした。

レスポンシブwebデザインだからと言って、難しく考える必要はありません。
要は今までPCページ・SPページと分けていたことを、1ページで完結するように作るだけで、やっていることは変わらないからです。

慣れないうちは時間がかかったり、参考サイトとにらめっこしながら作ることがあるかもしれません。
でも結局のところ数をこなすことが大事で、慣れます。

自分用のHTML・CSSソースのテンプレートを作っておくと非常に便利です。
今回私が記述したソースはコピーOKなのでじゃんじゃん使って効率化してください。

ではまた。

この記事を書いた人

moga

現役のフロントエンドエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

レスポンシブ ウェブデザインとは