PC 用 Web サイトを CSS のみでスマートフォンに対応する

Web

SoGap

最近、iPhone を入手した事もあって SoGap - ソーシャルサービス間での話題性の「ギャップ」ランキング を iPhone（スマートフォン）に対応しようかと言う気になりました。ただ、スマートフォン用の専用ページを作るほどの労力はかけたくなかったので、CSS だけを弄って取りあえず見られるかなと思えるレベルまで持っていく事を考えます。

基本戦略としては、以下の通りです。

  • 2 カラムのリキッドスタイル（サイドバー側は固定幅）を基本スタイルとして採用する。
  • スマートフォンの場合はサイドバーのカラムを下に落として、両カラムを 100% の幅で表示する。

以下、CSS をカスタマイズした時のメモ。

前提

まず、iPhone（Andoroid 携帯も？）の Web ブラウザ（Safari）は、デフォルトの状態だと「980px の横幅で描画された上で端末の横幅に合わせて縮小表示される」と言う挙動をするそうです。この挙動は viewport と言う meta タグで制御できるようで、縮小表示等が起こらないようにするには以下のような記述を html の head 部分に記述します（参考：Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編）- Kaleidoscope）。

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

参考元記事では user-scalable=0 で完全に拡大・縮小できないように設定されていましたが、一応、拡大はできるようにした方が良いかなと思ったので、maximum-scale=1.0,user-scalable=0 の設定は省いています。

PC 用の 2 カラムのリキッドスタイル

PC 用は、サイドバー側を固定幅の 2 カラム・リキッドスタイルを採用します。CSS は以下のようになります。

body {
    width                   : 100%;
    margin                  : 0;
    padding                 : 0;
    border                  : 0;
}

.container {
    width                   : 95%;
    overflow                : hidden;
}

/*
 * .contents-buffer と .contents と言う 2 種類の div タグを用いて、
 * メインコンテンツ側のカラムのスタイルを定義する。
 */
.contents-buffer {
    width                   : 100%;
    float                   : left;
    margin-right            : -310px;
    padding                 : 0;
    border                  : 0;
}

.contents {
    margin                  : 1em;
    margin-right            : 330px;
    padding                 : 0;
    border                  : 0;
    position                : relative;
    overflow                : hidden;
}

/* サイドバー側のカラムは 310px の固定幅 */
.sidebar {
    width                   : 310px;
    float                   : right;
    display                 : inline;
    margin                  : 1em 0;
    padding                 : 0;
    border                  : 0;
    position                : relative;
    overflow                : hidden;
}

片方だけ固定幅のリキッドスタイルは box-flex プロパティ を使うともっとスマートに実現できるようなのですが、対応していないブラウザ等の事を考慮して、現状では泥臭い形で実現しています。

スマートフォン用のスタイル

スマートフォン用のスタイルは、@media の中で再定義します。最初に述べたように、スマートフォンで表示するときはサイドバー側のカラムを下に落とし、それぞれのカラムを画面いっぱいに表示します。

@media screen and (max-device-width:480px) {
    body, table, input, textarea, address {
        line-height             : 1.4;
        color                   : #222222;
    }
    
    .container {
        width                   : 99%;
    }
    
    .contents-buffer {
        display                 : block;
        width                   : 100%;
        margin                  : 0;
        padding                 : 0;
        border                  : 0;
    }
    
    .contents {
        margin                  : 1em;
        padding                 : 0;
        border                  : 0;
    }
    
    .sidebar {
        display                 : block;
        width                   : 100%;
        margin                  : 0;
        padding                 : 0;
        border                  : 0;
    }
}

広告表示のスマートフォン対応

広告 (Google Adsence) も PC とスマートフォンでそれぞれ表示するものを変更しています。PC で表示されるときはモバイルコンテンツ用の広告を、スマートフォンで表示されるときは PC 用の広告を、それぞれ display:none を使用して隠すことでレイアウトが崩れるのを防いでいます。

.pc-adsence {
    display                 : block;
}

.footer-mobile-adsence {
    display                 : none;
}

@media screen and (max-device-width:480px) {
    .pc-adsence {
        display                 : none;
    }
    
    .footer-mobile-adsence {
        display                 : block;
        position                : fixed !important;
        position                : absolute;
        bottom                  : 0;
        left                    : 0;
    }
}

サイドバーの広告に関しては、今回のように PC とスマートフォンで表示させる広告を完全に切り替える方法の他に、スマートフォンで表示した際、サイドバーの広告を効果的な配置にするテクニック - コリス のような方法を紹介している記事もありました。

その他

PC 用の Web ページの場合は割と横幅に余裕がある事もあって水平方向の余白も多めに確保してゆったりとしたレイアウトにする事が多いのですが、スマートフォンのような小さな端末で表示する場合は水平方向の余白は必要最低限に抑えた方が良い感じで、その辺りも考慮して html&css を組む必要があるなと感じました。

現状での問題点は「上部のナビゲーション用のバーの文字が小さい」辺りになります。ナビゲーションバーは基本的に 1 行で表示する事を考えていたため、2 行以上で表示されるとレイアウトが崩れてしまいます。そのせいで無理やり 1 行に収めた結果、かなり小さな表示となってしまいました。この辺りは、そのうち、複数行で表示されても問題ないようなレイアウトに変えようかなと思います。

実際にスマートフォンで閲覧してみると予想以上に描画に時間がかかるので、本気でスマートフォンに最適化しようとするとやはり要らない描画を削ぎ落とした専用ページを作る必要がありそうですが、まぁこんな所かなぁと言った感じです。2 カラムスタイルを採用する場合、固定幅にするかリキッドスタイルにするかについては「正直、どっちでもいい」とこれまで思っていたのですが、スマートフォン等でそれなりに見られるように弄ろうとするとリキッドスタイルの方が都合が良いかなぁと言う気がしました。

Related Pages