自分のブログをレスポンシブWebデザインに対応させるには

2017年3月19日カテゴリー : CSS コメント : 0

　スマホを所有する人が増えたことで、モバイルからのアクセスが増えてきました。このため、PCではPC用のデザインを、スマホにはスマホ用のデザインを用意しなければならなくなりました。

　以前はデバイス毎に HTML ファイルを複数用意していましたが、増え続けるモバイルの種類のすべてに HTML ファイルを用意するのは現実的ではありません。これに対して、レスポンシブ Web デザインはブラウザの横幅のサイズでデザインを切り替える手法です。用意する HTML・CSS はひとつずつで済みます。

　現在の Google アルゴリズムは、ウェブサイトがモバイルに対応しているかを重要視しています。このため、検索結果の上位を目指すには、レスポンシブ対応が必須になりつつあります。当然、訪問してくれたユーザーの利便性にも関係してきますので、できるだけ早くレスポンシブ対応するようにしましょう。

viewportを追加する

HTML のヘッダー部分に meta タグとして追加します。当然、これが無ければレスポンシブデザインとして動作しません。Google が推奨している viewport は次のようになります。

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

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

これを忘れて「うまく動作しないな」とハマったのは私です。

メディアクエリをどのように決めたらよいか

レスポンシブデザインは画面の大きさに応じてデザインを切り替えますが、そのとき必要になるのがメディアクエリです。次のように記述します。

/* PC用、および共通部分の CSS を記述 */

@media screen and (max-width: 768px) {
    /* タブレットPC用の CSS を記述 */
}

@media screen and (max-width: 480px) {
    /* スマホ用の CSS を記述 */
}

/* PC用、および共通部分の CSS を記述 */

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

/* タブレットPC用の CSS を記述 */

}

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

/* スマホ用の CSS を記述 */

}

ブレイクポイントに480pxと768pxを採用しています。これにより、480pxと768pxでデザインが切り替わるようになります。よりきめ細かくデザインを切り分けたい場合、ブレイクポイントの数を増やせばよいです。

有名プリプロセッサである Sass などに採用されているメディアクエリをそのままパクるのも手のひとつですが、どのように決めればよりユーザーに貢献できるかを考えたいと思います。今回はスマホ用デザインのブレイクポイントとして480pxを採用しましたが、これをどのように決めたのかを見てみます。

Google アナリティクスにはユーザーがどのような環境でウェブサイトを閲覧しているかを解析する機能があります。使っている機種やOS、ブラウザなどがわかるのですが、項目のなかに「画面の解像度」があります。

この機能を使って当ブログの訪問者が使っているスマホの解像度を調べてみました。例として、当ブログのここ1年間のスマホと思われるアクセスの解像度を挙げておきます。「うちのブログはみんなPCで見るやろ」と開き直ってほとんどレスポンシブ対応していないのですが、それでもそこそこスマホからのアクセスがあります。

375ｘ667　3.8％
360ｘ640　3.3％
320ｘ568　1.9％
414ｘ736　0.6％

私はもうひとつテキスト中心のほぼほったらかしのブログがあるのですが、そちらはアクセスの4割近くがスマホからになっています。

375ｘ667　14.8％
360ｘ640　9.9％
320ｘ568　6.9％
414ｘ736　2.4％
360ｘ592　0.9％

WordPress はバージョンの4.4からデフォルトで画像のレスポンシブ化に対応していますが、画像の切り替えを300、768、1024pxに設定しています。アクセス解析の結果を考えると、300pxでは少し小さいのかなと思います。この先も高解像度化が進んでいくことが予想されるため、480pxでいいのではないでしょうか。

タブレットに対しても同様の方法でメディアクエリを決めていきます。

floatの解除

一般的なブログの場合、PC用のデザインは2カラムや3カラムになっていると思います。当ブログなら2カラムですね。2カラムのブログをものすごく簡略化して HTML で記述するとこうなります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./style.css" type="text/css">
    <title>レスポンシブ</title>
</head>

<body>
    <div class="header">
        
    </div>
    
    <div class="wrapper">
        <div class="content">
            
        </div>
        <div class="sidebar">
            
        </div>
    </div>
    
    <div class="footer">
        
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>レスポンシブ</title>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

これを2カラムにするためのスタイルシートは次のようになります。

.wrapper {
    overflow: hidden;
}

.content {
    float: left;
}

.sidebar {
    float: right;
}

.wrapper {

overflow: hidden;

}

.content {

float: left;

}

.sidebar {

float: right;

}

float を指定した要素の親要素に overflow:hidden; を指定しています。今回の例でいえば wrapper クラスですね。これは float によって表示が崩れないように float を解除するためのものです。クリアフィックスでも同様のことができます。

さて、ここからレスポンシブデザインについて考えます。スマホやタブレットはPCほど画面が大きくないので、2カラムのままでは都合が悪いです。スマホやタブレットのときには2カラムを解除してやる必要があります。

先ほどの CSS を次のように修正します。

.wrapper {
    overflow: hidden;
}

.content {
    float: left;
}

.sidebar {
    float: right;
}

@media screen and (max-width: 768px) {
    .content {
        float: none;
    }

    .sidebar {
        float: none;
    }
}

.wrapper {

overflow: hidden;

}

.content {

float: left;

}

.sidebar {

float: right;

}

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

.content {

float: none;

}

.sidebar {

float: none;

}

スマホとタブレットで共通の設定なので、480pxのメディアクエリの記述は省略することができます。メディアクエリ内で float を無効にしてやればよいです。

ピクセル単位でデザインしてパーセント単位に変換

レスポンシブデザインはあらゆる画面の大きさに対応するため、width、margin、padding などの値を％で指定します。これをリキッドデザインと呼びますが、最初からレイアウトを％指定するのは結構大変です。

そこで、最初はpxなどによりデザインを指定し、後から％に変換する手法を使います。px→％への変換には次の数式を使います。

求める％値＝変換する値 ÷ 変換する値の親要素の値 × 100

例えば、ブログコンテンツの幅が700px、p タグで囲まれた文章が650pxだとします。このとき求める％は、

650÷700×100＝92.85714285714286

となります。これを

p {
    width: 92.85714285714286%;
}

p {

width: 92.85714285714286%;

}

と指定すればよいです。これをすべての width、margin、padding に適用させていきます。

こちらのほうがスマートな記述かもしれません。

p {
    width: calc(650 / 700 * 100%);
}

p {

width: calc(650 / 700 * 100%);

}

スマホページの文字は大きめか？

レスポンシブデザインでフォントサイズを決める際、「スマホページの文字は大きめにする」とよく言われます。実際にいくつかのページを確認してみたのですが、PCとスマホで同じだったり、PCのほうが大きかったりとまちまちです。

テーマのデザインにもよりますが、14～16pxに指定するのが一般的なようです。「スマホからアクセスしてくるユーザーを大事にしたい」と思うのなら、PCより1～2px大きくするとよいでしょう。

それよりも、リンクやボタンを縦に並べる場合、上下の余白が少ないと目的でないものを誤タップしてしまうことがあります。上下に7～10pxぐらいの余白を入れるようにしましょう。

画像は可変に

レスポンシブデザインで使う画像は大きさを可変できるようにしなければなりません。スタイルシートで次のように指定するだけです。この手法をフルードイメージと呼びます。

img {
    max-width: 100%;
    height: auto;
}

img {

max-width: 100%;

height: auto;

}

なぜこのような設定が必要なのか。例えば、480pxの画面をもつスマホで600pxの画像をダウンロードしたと考えてください。画面サイズよりも画像の幅のほうが大きいので、親要素を突き破って横スクロールバーなどが表示されてしまいます。

画像をフルードイメージ化しておけば、縦横比を保ったまま親要素の大きさまで縮小してくれるので、表示が崩れたりするのを防いでくれるようになります。

iframeのレスポンシブ対応

レスポンシブデザインにおいては iframe タグについても考慮がいります。ウェブサイトに Youtube や Google マップなどを貼り付ける場合には対応しなければなりません。

まずは貼り付ける iframe を div タグで囲んでやります。スタイルシートでデザインカスタマイズをするために、適当なクラス名を付けてあげてください。

<div class="iframe_wrapper">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/LNguxg0NXAk" frameborder="0" allowfullscreen></iframe>
</div>

</div>

CSS で次のように指定します。

/* PCでの表示 */
iframe {
    width: 560px;
    height: 315px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .iframe_wrapper {
        position: relative;
        width: 100%;
        max-width: 560px;
        padding-top: calc(315 / 560 * 100%);
    }
    
    .iframe_wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* PCでの表示 */

iframe {

width: 560px;

height: 315px;

}

/* レスポンシブ対応 */

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

.iframe_wrapper {

position: relative;

width: 100%;

max-width: 560px;

padding-top: calc(315 / 560 * 100%);

}

.iframe_wrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

ポイントは iframe_wrapper クラスに指定した padding-top です。calc に入っている数値ですが、これは今回 Youtube を例にしたからです。Youtube の動画はPCで表示する場合、縦横の幅：高さが560：315になっています。幅：高さが600：400の iframe をレスポンシブ対応したければ、calc(400 / 600 * 100%) にすればよいです。

iframe_wrapper クラスにおいて max-width を560pxに指定していますが、これはなくても動作します。その場合、560～768pxの画面の時には Youtube の動画が拡大表示されます。多少画質が荒くなるかなとは感じましたが、それほど神経質にならなくてもよいかもしれません。

このように指定することで、iframe を縦横比を保ったままレスポンシブ対応することができます。今回は padding-top を指定しましたが、padding-bottom に指定しても同じ効果が得られるようです。

古いブラウザへの対応

Windows Vista が2017年4月にサポートを終了することで、対応するIEはバージョン11のみとなります(マイクロソフトさんは「最新IE」とアナウンスしているので、IE12とか出ればそちらになります)。Windows Server 2012 においてのみIE10のサポートを2023年まで行うようですが、これは考慮しなくてもいいよね？

従来では古いIEに対応するために Respond.js といった JavaScript ライブラリを読み込む必要がありましたが、これからはこの作業が不要になります。

モバイルファーストとは？

最近のデザインの主流はモバイルファーストです。モバイルファーストというと、Google が提唱した「モバイル環境を考慮したウェブサイトを検索上位に表示する」というアルゴリズムを思い浮かべるかもしれません。

これに対して、まずはスマホ用のデザインを作成しておき、後からPC用のデザインを付け足していくデザイン手法を Web デザイン界隈では「モバイルファースト」と呼んでいます。

先ほどPCで2カラムだったデザインをスマホとタブレットで解除しましたが、今度はモバイルファーストで記述してみます。

// -------------------------------------------------
//     スマホ、および共通部分のデザイン
// -------------------------------------------------


// -------------------------------------------------
//     タブレットのデザイン
// -------------------------------------------------
@media screen and (min-width: 480px) {
    
}

// -------------------------------------------------
//     PC用のデザイン
// -------------------------------------------------
@media screen and (min-width: 768px) {
    .wrapper {
        overflow: hidden;
    }
    
    .content {
        float: left;
    }
    
    .sidebar {
        float: right;
    }
}

// -------------------------------------------------

// スマホ、および共通部分のデザイン

// -------------------------------------------------

// タブレットのデザイン

// -------------------------------------------------

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

}

// -------------------------------------------------

// PC用のデザイン

// -------------------------------------------------

@media screen and (min-width: 768px) {

.wrapper {

overflow: hidden;

}

.content {

float: left;

}

.sidebar {

float: right;

}

メディアクエリの記述の仕方などがかわっていることに注意してください。一概には言えませんが、PCファーストでスタイルシートを記述した場合、PCで指定したデザインをスマホ・タブレット部分で一度キャンセルしなければならないことが多いです。

モバイルファーストの場合、キャンセル分の記述を減らすことができるためスタイルシートのメンテナンス性が上がることになります。レスポンシブデザインを学習すると、PCでデザインしてからモバイルに変換するという手順を踏むことが多いため違和感を覚えるかもしれませんが、慣れてしまえば記述量を減らせるので便利だと思います。