レスポンシブ対応スマホ用テンプレートの作り方

このウェブサイトは、スマートフォン(以下、スマホ)からアクセスするとスマホ用テンプレートで表示されます。このサイトを例に、MODX Evolution CMSのPC用テンプレートをベースにスマホ用テンプレートを作るときの注意点をまとめます。この記事は、iPhone向けです。Android対応は未確認です。

PC用テンプレートからのカスタマイズ

まずPC用テンプレートのCSSをコピーして、例えばmobile.cssのようにリネームしておきます。次にPC用テンプレートをコピーして、スマホ用テンプレートにして、そのCSSの指定を先ほどのCSSに書き換えます。

準備ができたら、スマホ用テンプレートを1コラムでレイアウトし直します。スマホでウェブサイトを縦長に表示すると、幅は320pxに限られるためです。

スマホ対応の注意点は、スマホの向きによって表示サイズが大きく変わる点です。スマホからブラウズするときのスマホの向きは、たいてい縦長です。ところが、たまに横長にすることがあります。そのため、元のテンプレートやCSSに固定幅の指定があれば削除して可変幅にします。

また、PC用テンプレートが<table>タグでレイアウトされている場合でも、スマホ用テンプレートのレイアウトには<table>タグを使わないようにしましょう。このサイトのPC用テンプレートは<table>タグでレイアウトされていますが、スマホ用テンプレートはCSSだけでレイアウトされています。

参考事例として、このウェブサイトのスマホ用テンプレートの構成を下図に示します。

MODXレスポンシブ化の例

HTMLの注意点

スマホ用HTMLでは、METAタグにViewpointの指定をする必要があります。Viewpointとは、iPhoneでの表示方法のことです。このサイトでは、下記のように設定しています。

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

上記のパラメータの意味は、それぞれ以下の通りです。

パラメータ意味
width=device-width 表示幅をデバイスの横幅に合わせる(縦長向きのiPhoneでは320px)
initial-scale=1 表示倍率の初期値
maximum-scale=1 表示倍率の最大値

通常、上記のコードをそのままコピーしてお使いいただければ問題ありません。

CSSの注意点

設定説明
img{max-width:100%; height:auto;} 画像の横幅が画面の表示幅を超えたら、画面の表示幅に合わせ、それに合わせて画像の高さを縦横比を維持して自動調整する設定。この設定により、PC用のコンテンツの画像も自動的にスマホサイズに収まる。【必須】
body{font-family: "Hiragino Kaku Gothic ProN", sans-serif;} デフォルトのフォントを日本語フォントにする設定。iPhoneでは標準のフォントが英文フォントなので、全角文字の箇所と半角英数字の箇所で文字の高さが揃いません。そんなときに見た目を揃えるために、この設定を加えます。(このサイトには不使用)
width CSS内のすべての要素で幅の指定を確認し、絶対値(px)指定があれば、(1)そのままでよいのか、(2)相対値(%)に直すか、(3)削除するかを判断する。【必須】

特に表組みやフォームについては、スマホから実際にアクセスして確認する必要があります。これらの点に注意してスマホ用のHTMLデザインができたらMODX CMSに載せて確認しましょう

関連記事

MODXとは

新着情報

Published on
CORESERVER.JPCORESERVER.JP