レスポンシブデザインについて

レスポンシブデザインとは？

レスポンシブデザインは、webサイトのデザインを様々な端末の画面やウィンドウのサイズに応じて適切に表示させることです。現代ではPC、タブレット、スマートフォン様々な端末によってWEBサイトが閲覧されます。それによって各端末で見た時に最適なデザインをweb上に表示させることが求められています。仮にPCに合わせてレスポンシブデザインを考慮せずコーディングを行い、スマートフォンで見てみると以下のような見栄えの悪いデザインとなってしまいます。
(PC上の表示)

(スマートフォン上の表示(デザイン崩れ表示))

レスポンシブデザインを考慮してコーティングを行うと、以下のようなスマートフォンで見たときも自然なデザインにすることができます。
(スマートフォン上の表示(デザイン崩れがない表示))

レスポンシブデザインコーディングの仕方

では、実際にレスポンシブデザインを実装していくのにはどのようにしていけばいいのかみていきましょう。

①viewportの設定
レスポンシブデザインの準備として、以下のコードをheadタグ内に記載します。設定しないと、スマートフォンやタブレットでの閲覧時にレスポンシブデザインを適応させるメディアクエリが正しく機能しません。こちらは暗記する必要はありません。これから進めていく課題のファイルにも以下のコードはデフォルトで記載されています。header.phpというファイルに、以下の画像の15行目のような形で記載されているので、一度確認してみてください。

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

②メディアクエリの設定
メディアクエリとは、ブラウザの画面サイズに応じて文字や画像のCSSを設定できる手法です。これによって、スマートフォン(sp)、タブレット(tab)、パソコン(pc)のスタイルを設定することができます。メディアクエリの書き方は以下のような形になります。@media (条件) { …. }という様に書きます。
指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。
※以下の”max-width: 1000px”というのは、CSSを適用させたい最大値を表しています。
【形式】
@media(max-width: 1000px){
ここにウィンドウ幅1000px以下の時に適用させたいCSSを記載
}
メディアクエリの条件には、max-width(最大幅)、またはmin-width(最小幅)を指定できます。
max-width: ◯◯pxと指定すると、画面幅が◯◯px以下の時にCSSを適用できます。min-widthはその反対となります。
【コードとWEB上での表示例】

<p>レスポンシブ対応</p>

p{
　color: red;
}
@media (max-width: 1000px){
　p{
　　color: blue;
　}
}

(ウィンドウ幅が1001px以上の時)

(ウィンドウ幅が1000px以下の時)

また、max-width: ◯◯px（またはmin-width: ◯◯px）のようにメディアクエリの条件を指定するとき、「◯◯px」の部分をブレイクポイントと呼びます。以下の例では、スマートフォンの画面幅は480px以下、タブレットの画面幅は481px ~ 768pxと想定して、ブレイクポイントを設定しています。

ここでレスポンシブデザインを実装する際に知っておきたいwidth(幅)の指定の仕方についてお話しします。

・Widthの指定の仕方
ここまでは幅を指定するCSSであるwidthを使うときは、pxを用いていきました。しかし、レスポンシブデザインを考慮したコーディングをしていくときは%を使うことが多いです。%を使うことで閲覧ユーザーの画面サイズの幅に対して、指定した%の分だけの幅をとり続けることができます。(一部仕様が異なりますがこの点についてはこれから覚えていきましょう。)
(px指定の場合)
【コードとWEB上での表示例】
width: 1000px;と指定した時に、画面幅を1001px以上にするとコンテンツが画面の幅に収まらなくなります。

<div class="f-container">
    <div class="f-item">f-item1</div>
    <div class="f-item">f-item2</div>
    <div class="f-item">f-item3</div>
</div>

.f-container{
  width: 1000px;
  display: flex;
  justify-content: space-between;
}
.f-item{
  width: 50px;
  height: 50px;
  background-color:#17B2A2;
  border: solid 1px #333;
}

(%指定の場合)
【コードとWEB上での表示例】
width: 100%;と指定した時に、画面幅を狭めていってもコンテンツが画面の幅に収まり続けます。

<div class="f-container">
    <div class="f-item">f-item1</div>
    <div class="f-item">f-item2</div>
    <div class="f-item">f-item3</div>
</div>

.f-container{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.f-item{
  width: 50px;
  height: 50px;
  background-color:#17B2A2;
  border: solid 1px #333;
}

・よく使うレスポンシブデザインレイアウトの整え方
widthの指定をする際に、よく使うレスポンシブデザインレイアウトの整え方があります。例えば、以下のような4つの箱を横に並べるレイアウトがあったとします。このときwidth: 20%;を指定していると、ウィンドウ幅が広い時は問題ないですが、ウィンドウ幅を狭めると箱が縮み、箱の中の要素(文字)が潰れたレイアウトになってしまいます。
【コードとWEB上での表示例】

<div class="f-container">
    <div class="f-item">f-item1</div>
    <div class="f-item">f-item2</div>
    <div class="f-item">f-item3</div>
    <div class="f-item">f-item4</div>
</div>

.f-container{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.f-item{
  width: 20%;
  background-color:#17B2A2;
  border: solid 1px #333;
}

(ウィンドウが広い状態)

(ウィンドウ幅を狭めた状態)

なので、ここでウィンドウ幅を狭めても崩れないように、width: 20%;を指定しておき、メディアクエリを使って、あるウィンドウサイズまで画面幅が狭まった時にwidth: 40%;を指定し、箱が2行のレイアウトで崩れないようにしたりします。
【コードとWEB上での表示例】

<div class="f-container">
    <div class="f-item">f-item1</div>
    <div class="f-item">f-item2</div>
    <div class="f-item">f-item3</div>
    <div class="f-item">f-item4</div>
</div>

.f-container{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.f-item{
  width: 20%;
  background-color:#17B2A2;
  border: solid 1px #333;
}
@media(max-width: 1000px){
　width: 40%;
}

(ウィンドウが広い状態)

(ウィンドウ幅を狭めた状態)

レスポンシブ対応させてみよう

ここではすでに作成されているデザインを、見本サイトをみながらレスポンシブデザインを実装してみましょう。以下のリンクに今回使うファイルが入っているのでダウンロードしてください。

ファイルをダウンロードしたら以下の手順で、指定のフォルダに配置するようにしてから実践してみてください。

1. 作業ファイルをダウンロード(リンクをクリックして、右上に出てくる三点ポチを押してみてください)
2. 「responsive」フォルダ、「img」フォルダを作成
3. １でダウンロードした「img1.png」「img2.png」「img3.png」を、2で作成した「img」フォルダに格納
4. 以下の画像のようにindex.htmlとstylesheet.css、「img」フォルダを「responsive」フォルダに格納
5. VSコードでフォルダまたはファイルを開く

【目的】

1. レスポンシブデザインの実装方法を理解する

【リンク】

・作業ファイル

• index.html
• stylesheet.css
• img1.png
• img2.png
• img3.png

・完成ファイル

• index.html
• stylesheet.css
• img1.png
• img2.png
• img3.png

【完成イメージ】

見本サイトの通り検証ツールで、スマートフォンの表示(iphoneX)にした時に、画像等下記の通り縦一列になるようにしてください。