今回は、「レスポンシブwebデザイン」について簡単に説明していきます。
レスポンシブwebデザインは、略してレスポンシブと言われることが多いです。
レスポンシブwebデザインを学ぶことで、1つのWebサイトをスマートフォン表示、タブレット表示、PC表示と様々なデバイスに対応することができます。
目次
レスポンシブwebデザインについて学ぼう
まずは、レスポンシブwebデザインの概要について説明していきます。
レスポンシブwebデザインとは
レスポンシブwebデザインとは、webサイトをパソコン以外のデバイス（スマートフォンやタブレット）で表示するための手法になります。
レスポンシブwebデザインをする理由
ここからはレスポンシブwebデザインを行う理由について説明していきます。
先に結論を申し上げると、webサイト制作においてレスポンシブwebデザインを行うことは必須です。
この記事を読まれる方は、どうしてレスポンシブwebデザインが必要なのかきちんと説明できるようになりましょう。
ご自身がwebサイト制作の仕事をする際に、クライアント（お客様）に意図をきちんと伝えられるようになりましょう。
レスポンシブwebデザインを行う理由は大きく分けて３つあります。
パソコン以外でwebサイトが閲覧される機会が増えた
webサイトを使ってもらえなくなる
検索結果に表示されにくくなる
ここからはそれぞれの理由について説明していきます。
パソコン以外でwebサイトが閲覧される機会が増えた
こちらは皆さんも経験があるかと思います。
情報化が進む現代において、スマートフォンやタブレットの普及によりwebサイトの閲覧のされ方も大きく変化しました。
現代では、パソコンを使わずとも、スマートフォンやタブレットを使用することでwebサイトが閲覧できる時代になりました。
つまり、webサイトはパソコン版だけの見た目だけでは、スマートフォンやタブレットの表示に対応できなくなったということです。
そしてwebサイトを制作する際は、スマートフォンを第一に制作していく「モバイルファースト」という考え方が主流となりつつあります。
webサイトをスマートフォンやタブレットでも綺麗に表示するための手法が「レスポンシブwebデザイン」なのです。
webサイトを使ってもらえなくなる
情報化が進む現代において、スマートフォンやタブレットの普及によりwebサイトの閲覧のされ方も大きく変化しました。
パソコンを使わずとも、スマートフォンやタブレットを使用することでwebサイトが閲覧できる時代になりました。
検索結果に表示されにくくなる
こちらの理由は、先ほどの理由と少し重なるところがあります。
2015年にGoogleが「モバイルフレンドリーアップデート」として、レスポンシブwebデザインは検索結果の表示順位の要因の一つになることを発表しました。
2018年よりモバイル端末での表示速度についてもアルゴリズムに追加することを発表しています。
以上のことから、webサイトの検索を管理するGoogleは、レスポンシブwebデザインを行っていないサイトを検索結果に表示されにくくするということが伺えます。
レスポンシブwebデザインは必須である
以上の理由から、webサイト制作を行う上でレスポンシブwebデザインは必須であることがイメージできたかと思います。
レスポンシブwebデザインを確認してみよう
この章では、レスポンシブwebデザインの確認の方法を紹介します。
Google Chrome のデベロッパーツールを使う
Google Chromeのデベロッパーツール（検証ツール）を使うことで、webサイトをスマートフォンやタブレットで閲覧した時の状態を確認することができます。
デベロッパーツール（検証ツール）とは
デベロッパーツール（検証ツール）とは、webページなどを作成する際に、ページのHTMLやCSSを確認や仮編集することができるブラウザに付属しているツールです。
ブラウザによって「開発者向けツール」「要素の検証」などと呼ばれていたりします。
ここからは、ZeroPlusの公式サイトをスマートフォンとタブレットで閲覧した時の状態にしていきます。
ZeroPlusの公式サイトにアクセスする
以下のリンクにアクセスし、Google ChromeでZeroPlusの公式サイトを開きます。
右クリックして「検証」をクリックする
右クリックし、「検証」の項目をクリックすることで検証ツールを開くことができます。
（Windows: Ctrl + Shift + i, Mac: ⌘ + option + i でも可能）
「Toggle device toolbar」 をクリックする
デベロッパーツール左上にある「Toggle device toolbar（スマートフォンとタブレットのアイコン）」をクリックします。
「Dimensions」から画面の幅を変更する
レスポンシブwebデザインはwebサイトが表示されている「画面の横幅」が大切になります。
webサイトが表示されている画面の上に、「Dimensions」という項目があります。
「Dimensions」から閲覧したいデバイスを選ぶことができるので、「iPhone6/7/8」の項目を選んでみましょう。
確認したい機種に応じて変更をする
「iPhone SE」の項目を選ぶと、Googler Chromeの画面をIPhone SEの機種で閲覧したように、ZeroPlusの公式サイトを確認することができます。
タブレットで閲覧した状態にしたい場合は、「iPad」の項目を選びましょう。
「Dimensions」の項目は自分でも設定可能です。
表示された項目以外のデバイスで検証を行いたい場合は、自身で追加を行いましょう。
デベロッパーツールの注意点
webサイトをレスポンシブ対応する際にもデベロッパーツールを用いて開発を行います。
ただし、実機で見たときのように正確ではないので、実際にwebサイトを制作し最終的な確認は実機を使って確認する必要があります。
レスポンシブwebデザインの方法
ここまででレスポンシブwebデザインのイメージを膨らませてきました。
この章では、レスポンシブwebデザインを行う方法を紹介します。
headタグ内に レスポンシブ用のmetaタグ を記述する
<meta name="viewport" content="width=device-width, initial-scale=1" >
レスポンシブwebデザインを導入するためには、headタグ内に上記のコードを記述して「viewport」を設定する必要があります。
viewportは、それぞれの画面幅に合わせて表示する大きさを調整するためのコードです。
レスポンシブwebデザイン用のCSSを記述する
次に、レスポンシブwebデザイン用のCSSを記述します。
メディアクエリを使用して、1つのCSS内に指定する
デバイスごとにCSSファイルを準備する
方法は上記の２種類があります。
メディアクエリを使用して、1つのCSS内に指定する
@media screen and (min-width: 1024px){ }上記記述で、「画面幅が1024px以上のとき、{}の中のスタイルが適用される」ようになります。
デバイスごとにCSSファイルを準備する
<link rel="stylesheet" href="css/~~.css" media="(min-width: 1024px)">デバイスごとに別のCSSを準備し、HTMLのheadタグにて読み込みます。
これで「画面幅が1024px以上のとき、CSSファイル内の ”~~.css” を読み込む」ようになります。
前者の手法の方が一般的なので、「メディアクエリを使用して、1つのCSS内に指定する」方法で行いましょう。
ブレイクポイントを設定する
ブレイクポイントとは、webサイトの表示を切り替える画面幅の値のことです。
レスポンシブwebデザインはサイトを表示する画面幅によって、スマートフォンでサイトを閲覧しているのか、タブレットで閲覧しているのかを判断します。
レスポンシブwebデザインを行うにあたり、どの画面幅でwebサイトの表示の切り替えを行うかが大切になってきます。
タブレットの時の切り替えの例
/* スマートフォンの時のコード */
@media screen and (min-width: 896px){
/* タブレットの時のコード */
}iPhone XS Max／XR／11／11 Pro Maxの横の画面幅が896pxです。
タブレットの縦の画面幅、そしてスマホの横の画面幅に対応しやすいブレイクポイントと考えられています。
スマートフォンの時の切り替えの例
/* スマートフォンの時のコード */
@media screen and (min-width: 480px){
/* 他のデバイスのコード */
}モバイルファーストでwebサイトを制作するために、画面幅を設定する必要があります。
スマホの縦の画面幅は320px〜420pxの間が多く、iPhone4の横の画面幅が480pxであることから、480pxでの設定をする事が多いようです。
実際にコードを書いてみよう
ここまでで、レスポンシブwebデザインの方法について説明してきました。
レスポンシブwebデザインは、ブレイクポイントによって表示されるスタイルを切り替えていることが理解できていれば大丈夫です。
あとは、実際にコードを記述して実際に確かめながら学んでいきましょう。
