レスポンシブwebデザインとは？基本の実装を学んでモバイルフレンドリーに対応しよう！【初心者向け】【SEO・WEB初心者・WEB制作・モバイルフレンドリー・レスポンシブデザイン】

posted on 2018.12.11

レスポンシブデザイン（responsive design）とは、webサイトを閲覧するユーザーのデバイスの画面もしくはブラウザのサイズに合わせて、ひとつのデザインを柔軟に変化させるデザイン手法です。

モバイルフレンドリーにウエブサイトを対応させる為の方法の一つとしてgoogleも推奨しています。

今回はレスポンシブデザインについて現在までに考案された他のデザイン手法も少しだけ振り返りながら簡単な構築方法も含め記事にしたいと思います。

レスポンシブデザインとレイアウト手法

webサイトの閲覧方法が多様化する中で、それに対応する為にいろいろなデザイン手法が生み出されました。レスポンシブデザインもその中で生み出された一つのデザイン手法です。過去のいくつかのデザイン手法を簡単に復習しながら、レスポンシブデザインについて少しだけ考えてみることにします。

リキッドレイアウト

コンテンツの幅や高さを相対で指定することでブラウザのサイズの変化に対応できるようにしたレイアウト手法。幅や高さをpx(ピクセル)ではなく%（パーセント）で指定します。

フレキシブルレイアウト

リキッドレイアウトに加え、コンテンツにmin-widthやmax-widthを指定するレイアウト手法。

グリットレイアウト

画面を基本等幅に分割した縦横のグリットに沿ってコンテンツを配置するレイアウト手法。この方法に前出のリキッドレイアウトとフレキシブルレイアウトの考え方を加えたフレキシブルに変化するグリットレイアウトのことを可変グリットレイアウトと呼ぶ。

少しだけ他のデザイン手法を振り返ってみて、あらためて「レスポンシプデザインとは」について考えてみたいと思います。まず時代の変化の中で「どんな閲覧状況にも対応するウェブサイトのデザイン」を求めて各々のデザイン手法が各々の弱点を埋める形で出現し、レスポンシブデザインもそのプロセスの延長線の上に成立しているデザイン手法であると考えられるのではないでしょうか？。ここから先は、レスポンシブデザインは他のデザイン手法の弱点を埋める形で出現し、他のデザイン手法もレスポンシブデザインに含まれる、もしくは同じプロセスの中にあるという考えで話を進めていこうと思います。

レスポンシブデザインで制作するwebレイアウトの基本

レスポンシブデザインで新しく提唱されたおもな技術はviewportの設定とMedia Queriesによるデザインの分岐です。ただその二つの考え方だけでgoogoleが推奨する「モバイルフレンドリーに対応するレスポンシブwebデザイン」でサイトを制作することは困難です。上記で述べたように他のレイアウト手法を継承して初めてgoogleの述べるレスポンシブデザインが成立します。現実として1つのhtmlですべてのデバイスに対応するために最初に必要なことのひとつが、リキッドレイアウトの「相対で指定する」という考え方だからです。もしあなたがクライアント様のpcサイトをレスポンシブデザインに変更する時、最初に考えることのひとつは主要なコンテンツの横幅は相対指定中心で考えるです。どんな仕事をする時もそうですが、なにか中心を据えなければ、ばらばらで前に進まないと思います。なのでここでは相対指定を中心に据え、レスポンシブデザインの実装を説明していきます。

前座が長くなりすみなせん。先に実装とソースを示します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>レスポンシブデザイン実装01</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            <!--
            body,html{
                margin: 0 ;
                padding: 0;
            }

            header {
                width: 100%;
                padding: 1em 0;
                background:  #9b9bf2;
                text-align: center;
            }
            #wrap{
                padding: 2em 15%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
            }

            article{
                width: 65%;
                padding: 3em 0;
                background:  #9b9bf2;
                text-align: center;
            }
            aside{
                width: 30%;
                padding: 3em 0;
                background:  #9b9bf2;
                text-align: center;
            }

            footer{
                width: 100%;
                padding: 1em 0;
                background:  #9b9bf2;
                text-align: center;
            }
            @media screen and (max-width:550px){
                /*0pxから550pxの間で適用する内容*/

                #wrap{
                    -webkit-flex-wrap: wrap;
                    -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                }

                article{
                    width: 100%;
                    margin: 0 0 2em;
                }
                aside{
                    width: 100%;
                }

                -->
            </style>



        </head>
        <body>
            <header>header</header>
            <div id="wrap">
                <article>
                    main contents
                </article> 
                <aside>sidebar</aside>
            </div>
            <footer>footer</footer>
        </body>
    </html>

<!DOCTYPE html>

<head>

<title>レスポンシブデザイン実装01</title>

<!--

body,html{

margin: 0 ;

padding: 0;

}

header {

width: 100%;

padding: 1em 0;

background: #9b9bf2;

text-align: center;

}

#wrap{

padding: 2em 15%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

}

article{

width: 65%;

padding: 3em 0;

background: #9b9bf2;

text-align: center;

}

aside{

width: 30%;

padding: 3em 0;

background: #9b9bf2;

text-align: center;

}

footer{

width: 100%;

padding: 1em 0;

background: #9b9bf2;

text-align: center;

}

@media screen and (max-width:550px){

/*0pxから550pxの間で適用する内容*/

#wrap{

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

article{

width: 100%;

margin: 0 0 2em;

}

aside{

width: 100%;

}

-->

</style>

</head>

<body>

<header>header</header>

main contents

</article>

<aside>sidebar</aside>

</div>

<footer>footer</footer>

</body>

</html>

もしこの記事をパソコンで見ているのなら、ブラウザのサイズを小さくしてみてください。レイアウトの変化を見て取れます。（それ以外はすみません、）

基本的な実装はコンテンツの幅を相対で指定した、ただのリキッドレイアウトです。それをレスポンシブデザインの手法であるメディアクエリを使って、画面サイズでデザインを分岐します。

メディアクエリ(Media Queries)について

メディアクエリ（Media Queries）とは特定のポイント、ブレイクポイントを記述してデザインを分岐する手法です。

一つのcssファイル内でメディアクエリを使用する場合の記述方法です。

@media screen and (min-width:480px) and (max-width:800px) {
  /* タブレットまたはウィンドウ幅の狭いデスクトップ向けのスタイル
 　　 480pxから800pxの間のcssを記述します。
*/
}
 
@media screen and (max-width:479px) {
  /* スマートフォン向けのスタイル
　　　480px以下のcssを記述します。
 */
}

@media screen and (min-width:480px) and (max-width:800px) {

/* タブレットまたはウィンドウ幅の狭いデスクトップ向けのスタイル

　　 480pxから800pxの間のcssを記述します。

}

@media screen and (max-width:479px) {

/* スマートフォン向けのスタイル

　　　480px以下のcssを記述します。

}

想定デバイスごとにデザインを強めに変化させたい場合や、保守性を高めたい場合などはデバイスごとのcssを準備してheader内で分岐します。記述方法を記載します。

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

1	<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

メディアクエリ(Media Queries）で使用できるプロパティーは以下になります。

Max Width	ビューエリアの最大幅。このサイズより小さい場合に適用
Min Width	ビューエリアの最小幅。このサイズより大きい場合に適用
Max Device Width	デバイスサイズの最大幅。このサイズより小さい場合に適用
Min Device Width	デバイスサイズの最小幅。このサイズより大きい場合に適用
Orientation	縦長か横長かで振り分ける
Device Pixel Ratio	デバイスの解像度で振り分ける。

Orientationでの使用例です。

@media all and (orientation: landscape) {
  /*ランドスケープモード(横向き)向けのスタイル */
}
 
@media all and (orientation: portrait) {
  /*ポートレートモード（縦向き）向けのスタイル */
}

@media all and (orientation: landscape) {

/*ランドスケープモード(横向き)向けのスタイル */

}

@media all and (orientation: portrait) {

/*ポートレートモード（縦向き）向けのスタイル */

}

一応いくつかのプロパティーを紹介しましたが、ブラウザごとに対応状況も変わってきます。特に必要がないようであれば、max-width,min-widthの使用をお勧めします。

ビューポート（viewport）について

viewportは、ページのサイズやスケーリングを、デバイスの幅に合わせてどう調整するかをブラウザに伝える役割を持ちます。スマートフォンの初期設定ではAndroidでは800px、iOSでは980pxでwebページを画面にレンダリングする仕様になっています。viewport タグを指定していなければ、パソコンの画面で表示さているようなwebページが縮小された形でモバイルの画面で表示されることになります。モバイルデバイスにあった正しい縮尺でブラウザにページを表示させるには、 viewportの指定が必須となります。

viewportはmetaタグの1つの要素として、header内に次のように指定します。

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" />

1	<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" />

content属性には、以下のプロパティを指定することができます。

width	表示領域の幅の設定。ピクセルで指定するか、もしくはdevice-width。通常はdevice-widthを指定
height	表示領域の高さの設定。ピクセルで指定するか、もしくはdevice-height。通常は指定しない。
initial-scale	最初の画面表示時のズーム倍率。通常は1（等倍）を指定。
minimum-scale	画面の縮小率の設定。倍率0～10 の範囲で初期値は0.25。
maximum-scale	画面の拡大率の設定。倍率0～10 の範囲で初期値は1.6。
user-scalable	ユーザーへ画面の拡大、縮小を許可するかの設定。yes or noで指定。初期値はyes。

プロパティーの意味を確認したところで、先程の例の意味を少し確認してみましょう。

まず、width=device-widthで表示幅をデバイスの本来の画面幅に設定します。この設定をしておけば、スマートデバイスを縦から横に切り替えた時でも表示を更新してくれます。この設定をしなければ、androidは800px、iphoneは980pxでレンダリングされます。次にinitial-scale=1で最初にレンダリングした時の拡大率は等倍すなわちdevice-widthであることを設定します。user-scalable=noでユーザーには拡大、縮小の操作をさせない設定をして、表示幅を常にデバイスの本来のサイズに固定します。user-scalableの設定をyesにした時、maximum-scaleとminimum-scaleで拡大率、縮小率を設定することになりますが、googoleはユーザーに拡大、縮小の操作を強いるサイトをモバイルフレンドリーではないと判定するケースもあります。できる限り、user-scalableはnoの設定で済むようなサイトの構築が望ましいでしょう。

レスポンシブwebデザインまとめ

pc、タブレット、スマートフォンとインターネットを閲覧するデバイスが混在する中、googleが提唱するモバイルフレンドリーなサイトを構築する為に、レスポンシブwebデザインは必須の技術です。この記事を見てくださった方の知識および技術の向上に少しでもお役に立てていれば幸いです。それではまた。