Webサイトの閲覧には主にPCを使用するのが一般的でしたが、スマートフォンが登場して以降、iPhoneやAndoroid端末、iPadのようなタブレット端末など、様々な携帯端末（マルチデバイス）でWebサイトを利用する事が一般的となりました。
しかしスマホやタブレットには様々な画面サイズが存在しており、従来の制作基準（固定サイズ）で作成したWebサイトは、スマホの小さな画面に収まりきったり収まりきらなかったりと、環境に左右されて非常に使い辛くなってしまいます。
特にiPhoneのディスプレイは物理サイズは5.5～6.7インチでありながら解像度はフルHD解像度（1,080 x 1,920）以上あるため、小さなディスプレイ内にWebサイトが全て収まりきって表示されるので拡大表示しなければコンテンツを満足に利用できません。
どんなデバイスからでもWebサイトを快適に利用できるようにするために必要となるのがレスポンシブWebデザインです。
レスポンシブWebデザインとは、デバイスの画面サイズに合わせてレイアウトを変更して表示する動的な可変サイト設計の事です。
レスポンシブWebデザインには次の特徴があります。
レスポンシブWebデザインのメリット
- 1つのHTMソースコードで複数のデバイスに対応できる
HTMLのソースコードが一つなので修正・更新が容易です。
スマホが登場した初期の頃はPCサイトとスマホサイトを別々に制作していたので、更新の度に両方のサイトのHTMLを更新する必要がありました。 - URLが変わらない
HTMLのソースコードが一つなので、URLが変わりません。
従来のスマホサイト制作ではPCサイトとスマホサイトでドメインは一緒でもそれ以降のアドレスがそれぞれ異なるため、検索結果がバラバラになってしまう問題がありました。例：
http://example.com/
http://example.com/sp/同じドメインでも一文字でもアドレスが異なると別々のサイトとみなされます。
- SEO対策がとりやすい
ソースコードが一つであること、同じドメインであること、レスポンシブ化によるモバイルフレンドリーであることでSEO対策において非常に有利となります。
Googleはこれらの施策を評価する為、SEO対策においてレスポンシブ化は必須となります。
レスポンシブWebデザインのデメリット
- スマホでの表示に時間がかかる
全てのデバイスに同じWebサイトのデータを読み込ませるので、古いスマホでは表示に時間がかかります。またスマホで使用しないデータも読み込まれるので、不要なデータをダウンロードすることにもなります。 - デザインに制限がある
HTMLのソースコードが一つなので、設計上不可能なレイアウトがあります。 - CSSが複雑になる
複数の画面設計を行うので、コーディングが複雑になります。
レスポンシブWebデザインの作り方
レスポンシブWebデザインはCSSに用意されているメディアクエリを使用して、ブレークポイントと呼ばれる表示を切り替える境目の設定を行った上で、各デバイスに応じたスタイルを設定していきます。
メディアクエリ
メディアクエリとは、Webページを表示する画面環境に応じて適用するスタイルシートを切り替えるCSSの機能の一つです。
レスポンシブWebデザインではメディアクエリを使用してブレイクポイントと呼ばれるデザイン（レイアウト）が可変する境目を設定してデバイスごとのレイアウトを設計していきます。
メディアクエリの記述
media=”screen and (メディア特性)”
media属性の値に「screen and (メディア特性)」を指定します。
レスポンシブWebデザインではメディア特性は主に下記の値を使用します。
- max-width / max-height 指定の解像度より小さくなった場合
PC→タブレット→スマートフォンの順で作成する場合に使用します。 - min-width / min-height 指定の解像度より大きくなった場合
スマートフォン→タブレット→PCの順で作成する場合に使用します。
記述例
|
1 |
<link rel="stylesheet" href="css/style.css" media="screen and (max-width:480px)"> |
画面サイズが480pxより小さい場合はstyle.cssに記述しているCSSが適用されます。
メディアクエリの記述方法
主に外部CSSファイル内に@importで記述します。
@media メディアタイプ and (メディア特性) {
セレクタ { プロパティ:値; }
}
記述例
@media screen and (max-width:480px) {
セレクタ { プロパティ:値; }
}
具体的な記述例
解像度が800pxより小さくなったら縮小し、さらに解像度が480pxより小さくなったらレイアウトを変更する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>example</title> <style> body { margin:0; padding:0; } header,footer { background: #aaa; } nav { background: #ccc; } main { background: #ddd; } aside { background: #bbb; } #wrapper { width:800px; margin:0 auto; background: #bbb; } header,nav,main,footer { padding:1px 0; } header,footer { margin:0; padding:1px; } main { float:right; width:75%; } aside { float:left; width:25%; } footer { clear:both; } @media screen and (max-width:800px) { #wrapper { width:100%; } } @media screen and (max-width:480px) { main { float:none; width:100%; } aside { float:none; width:100%; } } </style> </head> <body> <div id="wrapper"> <header> <p>header</p> </header> <nav> <ul> <li>nav</li> <li>nav</li> <li>nav</li> </ul> </nav> <main> <h1>main-contents</h1> <p>contents1</p> <p>contents2</p> <p>contents3</p> </main> <aside> <h2>sub-contents</h2> <p>contents</p> </aside> <footer> <p>footer</p> </footer> </div> </body> </html> |
iPhone対策
前述の通り、iPhoneは解像度が高すぎる為、Webサイトが全て画面内に収まりきって表示されてしまいます。
せっかくレスポンシブWebサイト設計を行っても、iPhoneでは解像度が高すぎてスマホサイトの表示が行えません。
そこで「viewport」を設定し、それぞれのデバイスの画面幅に合わせて表示する大きさを調整します。
viewportの記述
<meta name=”viewport” content=”プロパティ=値,”>
nameの値にviewport、contentの値にプロパティ=値を指定します。
複数のプロパティを指定する場合はカンマで区切ります。
記述例
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
widthプロパティの値には「device-width」を指定します。
「device-width」を指定するとiPhone（6以降のモデル）では横幅の表示が375pxに設定されます。
「initial-scale」は倍率の設定で1を指定すると等倍表示となります。
まとめ
以上がレスポンシブWebデザインの基本設定となります。
レスポンシブWebデザインにはメリットがたくさんありますが、気を付けて設計を行わなければならないことも非常にたくさんあります。
まずはレスポンシブWebデザインの基礎をしっかり学んで、より高度なデザイン設計ができるように理解を深めてください。
