既存のホームページをレスポンシブスマホ対応する方法

今回は『既存のホームページをレスポンシブスマホ対応する方法』についてご紹介いたします。

2年程前からBootstrapやjQuery_Mobileによるスマートフォンサイトの作成であったり、WordPressのスマホ対応テンプレートの導入であったり、様々な手法を用いてスマホ対応を行ってきました。
最近ではWordPressのスマホ対応テンプレートか、今回ご紹介するメディアクエリによるレスポンシブスマホ対応の2パターンに収束してきた感じです。

今回はメディアクエリによるレスポンシブスマホ対応について紹介いたします。

メディアクエリとは

CSSの記述によって、画面幅に合わせたスタイルシートを適用させる事ができる手法です。
例えば、「横幅が640pxまでの画面であればこのスタイルシートを使う」といったことが容易にできます。

メディアクエリによるレスポンシブスマホ対応の利点

• 既存のホームページを流用できる。（初期コストを抑える）
• スマートフォンサイトを別に作るわけではないので、更新・運用管理が1サイト分で済む。（運用コストを抑える）
• HTMLの大幅な改修が必要なくほぼCSSの改修のみで済む。（初期コストを抑える）

デメリットは無いのか？

デメリットはあります。
PC用の画像をスマートフォン表示でも使用するので、画像のファイルサイズが大きいと回線状況によっては表示が遅くなってしまうこともあります。
また、PC用のレイアウトの並び替えを行うので有益な情報がページの下の方に行ってしまったり、逆にそれほど重要でない情報が上に来てしまうこともあります。
これらのデメリットは画像ファイルを圧縮したり、レイアウトの調整を行うことで対処可能です。

メディアクエリによるレスポンシブスマホ対応の5ステップ

ではさっそく既存のホームページをメディアクエリを使ってスマートフォン対応してみましょう。

ステップ1：HTMLの記述にスマートフォン対応の記述を追加する。

まずはHTMLにスマートフォン用の記述を追加します。

HTMLファイルの一番上からの記述になります。この中の7行目の1文、こちらを追加します。
「HTMLの横幅はデバイス（スマートフォン等端末）の横幅に従います。表示倍率の初期値は1.0です」といった内容になります。

ステップ2：HTMLにスマートフォン用のCSSの記述を追加し、対象ファイルを用意する。

続いて、PC用とスマートフォン用のCSSの追加を行います。今回は既存のCSSをPC用としてリネームし、さらにPC用のCSSを複製してスマートフォン用のCSSのベースを作成します。（この時点ではCSSの中身は同一です）
そして、HTMLのCSSを指定する箇所の記述を変更します。
タブレット用のCSSも追加可能です。必要に応じて端末の画面サイズに沿ったCSSをご用意下さい。

(min-width: 640px)画面幅640pxを超える場合のPC用CSS。
(max-width: 640px)画面幅640pxまでのスマートフォン用CSS。

ステップ3：スマートフォン用CSSを準備する。

ステップ2で作成したPC用のCSSとそれを複製したスマートフォン用のCSSの双方にそれぞれのメディアクエリの記述を追加します。

style_pc.cssの内容に追記

style_mobile.cssの内容に追記

それぞれのCSS内全体を上記メディアクエリの表示で囲います。
1行目にメディアクエリの記述、最終行にその閉じる記述を追加します。

※PC用とスマートフォン用の記述の違いにご注意下さい。
特にPC用の記述には『@media print, screen and (min-width: 640px)』とprint,が入っています。ブラウザからホームページを印刷する際に、この記述によってPC用のレイアウトで印刷されます。
また、スマートフォン用の方にはimgタグに関する記述があります。この部分はスマートフォン表示の際に画像が自動的に画面サイズにあわせて縮小表示されるようにする記述で、なおかつ画像本来のサイズより大きく表示されてぼやけるのを防いでくれる便利な呪文です。
HTML4等でHTML内に画像のサイズが記述されているままでも縮小表示されます。

ステップ4：スマートフォン用CSSを調整する。

ステップ3でCSSの準備が出来たので、ここからはスマートフォン用のCSSを改修してレイアウトを調整していきます。
ここまでくればあとは各ページをスマートフォン用にCSSを修正していけばOKです。
主に2カラムのページ表示を1カラムの縦並びに変更したり、floatの横並びをスマートフォンにあわせて縦並びにしていきます。

CSSをスマートフォン用に改修するポイントがいくつかあります。

1. htmlやbody、wrapper等の横幅の指定を100%に指定する。
widthが980pxといった状態のままだとスマートフォンの画面外にはみ出てしまいます。

2. floatで横並びになっている部分をスマートフォン表示で縦並びにする場合、
floatの記述を消すのではなくfloat: none;で解除する。
floatに限らず必要のないレイアウトを無効にする場合は記述を消すのではなく、上記の方法にて解除します。
記述を消す手法だとPC用のfloat: left;が効いてしまって縦並びにならない場合があります。

3. tableタグはthやtdをdisplay: block;で横並びから縦並びへ変更する。
会社概要のような2列のtableであればこの手法で、tdが複数あるようなtableの場合はoverflow: scroll;で画面内スクロールさせます。

4. ヘッダー領域が縦長になりすぎないように注意する。
情報量によってはヘッダー領域が縦長になってしまい、スマートフォンで見た時に画面の半分以上をヘッダー領域で埋めてしまうことがあります。
ヘッダー領域を過不足無くコンパクトにまとめるよう調整しましょう。

ステップ5：メディアクエリのCSS調整のみで解決出来ない部分の改修

上記までのステップにてほぼ対応できると思いますが、なかにはどうしてもうまくいかない部分があったり、想像と違う見え方になってしまった部分があると思います。
例えば、
　グローバルメニューがどうしてもうまくレイアウトできない。
　横長の画像が小さくなりすぎて何の画像なのかがわからない。
といった部分です。
グローバルメニューに関しては思い切って、スマートフォン用のグローバルメニューをjQuery等で実装してしまうのが一番だと思います。
こちらについてはまたの機会に紹介させて頂きます。
横長の画像が小さくなってしまう部分は、無くても良いイメージ画像であればスマートフォン用の表示では削ってしまったり、見出しに使う画像であれば縮小せずにoverflow: hidden;で画面外にはみ出た部分を強制非表示にしてしまうのも良いかと思います。

まとめ

今回は、巷でも主流になってきたメディアクエリによるレスポンシブスマホ対応についてご紹介いたしました。
ネットで調べればいくらでも出てくるありふれた情報ばかりではありますが、私が行ってきたスマートフォン対応で注意してきた点、苦労してきた点をポイントとして書き加えてみました。
何かのお役に立てればと思います。

この記事を読んだ方はこちらも読まれています

WEBページ全体のスクショがきれいに撮れる「Full Page Screen Capture」