簡単!スマートフォン対応

ウェブサイトを見るのは以前はパソコンからが殆どでしたが、最近ではスマートフォンからのアクセスがかなりの数になっています。

本格的にスマートフォン対応したサイトを作るのは専門知識が必要ですが、本ページでは出来るだけ簡単に対応する方法を説明します。

スマートフォン対応の必要性

 パソコン向けのホームページをスマートフォンで表示すると、文字が自動的に拡大されて表示される事があります。

通常サイトのスマホ表示例

 これは、スマートフォン用ブラウザの多くは自動的にフォントサイズを調整する機能があるためです。このため、スマートフォン対応しなくてもそれなりに読み易いサイトもあります。

 但し、画像は小さいままです。又、表や幅を指定したボックス内の文字、サイドバー等も小さいままです。

 このままでは拡大しないと画像や表、ボックス内の文字が見づらく、更に、タップして他のページを参照して貰える可能性が低くなります。

 又、Android標準ブラウザでは文字が拡大されず、途中で折り返してしまう可能性があります。

Android標準ブラウザ表示例

 これは、1行内の文字数が多いと読み辛いために折り返して表示しているのですが、訪れた人にはページが崩れているように見える事があります。

 このため、スマートフォンから見やすいページにするためには、ある程度の対応が必要です。

 Googleでスマートフォンから検索した時、スマートフォン対応したページの左には「スマホ対応」と付きます。このため、検索する人は見やすいサイトと思ってクリックしてくれる可能性が高くなります。又、スマートフォン対応したページは若干ですが、検索順位を優位にするとGoogleは説明しています。つまり、スマートフォン対応するとアクセスアップに繋がります。

レスポンシブウェブデザイン

 スマートフォンへの対応方法は様々です。

 例えば、パソコン向けのページとスマートフォン向けのページを別々に作成し、内容をコピーする事でも対応可能です。

 検索エンジンに不利かと言えばそうでもなく、Google等では自動的にパソコン向けかスマートフォン向けか判断してくれます。但し、同じ内容を2つのページで更新する必要があるため、手間がかかります。

 これを解決する手法の1つとしてレスポンシブウェブデザインがあります。

 これは訪問者の環境によって読み込むスタイルシートを変える方法です。パソコンであればパソコン向けのスタイルシートを読み込み、スマートフォンであればスマートフォン向けのスタイルシートを読み込んで表示します。

レスポンシブウェブデザインの表示例

 レスポンシブウェブデザインであれば、パソコン向けページとスマートフォン向けページを1つのHTMLファイルで作れます。

viewport

 スマートフォンではブラウザで表示する時の仮想的な画面を持っています。この時のピクセルをCSSピクセルと言い、ページ幅のデフォルトは例えば980pxです。このため、CSSでページ幅を指定しないと画面一杯に表示されますが、文字は小さいままです。

幅を980pxに指定した時の表示

 これは、パソコンと比較してディスプレイ自体が小さいため、980pxで表示すると文字が小さくなってしまう事が原因です。

 例えばフォントサイズが16pxの場合、幅が980pxの時はディスプレイに対して約1.6%(16px÷980px)の幅の文字として表示されます。

 これを避けるため、htmlの<head>と</head>の間に以下を追加します。

【スケール1倍の指定】
<meta name="viewport" content="width=device-width,initial-scale=1.0">

 上記を設定すると以下のように文字が読める位の大きさに拡大されます。

スケールを1に指定した時の表示

 スマートフォンのディスプレイは小さく、解像度が高いと文字が小さくなるため、ディスプレイに表示する時の最適な幅や高さを認識しています。この時のピクセルをデバイス非依存ピクセルと言い、例えばページ幅を360px等で認識していて、viewportでスケールを1倍に指定するとディスプレイの解像度に合わせて表示されます。

デバイス非依存ピクセルとCSSピクセルとディスプレイの関係

 スマートフォンを横にして見た時も自動で最適な高さや幅に調整されますが、逆に240px等、認識しているサイズより小さくページの幅を指定すると画面一杯に表示されません。

幅が240pxの時の表示

 つまり、ページ幅は固定しない方がお奨めです。

 フォントサイズが16pxの場合、幅が360pxの時はディスプレイに対して約4.4%(16px÷360px)の幅になり、980pxの時より約3倍の幅で文字が表示されます。

 スマートフォンのディスプレイ解像度は1080×1920、640×960ドット等様々ですが、viewportを指定する事で見易い大きさにする事が出来ます。

 尚、ドットは1つ1つの点を示し、ディスプレイはドットである点の集合で画面を表示しています。

メディアクエリ

 メディアクエリを利用すると、場合分けしてスタイルシートを読み込ませる事が出来ます。

 通常、パソコン用のスタイルシートを読み込む場合、<head>と</head>の間に以下を記述します。

【スタイルシート読み込み】
<link rel="stylesheet" type="text/css" href="PC用CSSファイル">

 CSSファイルはtest.css、ディレクトリがあればcss/test.css等、スタイルシートを指定します。

 メディアクエリとして<head>と</head>の間に以下を追加する事で、追加でスタイルシートを読み込ませる事が出来ます。

【スマホ用スタイルシート読み込み】
<link rel="stylesheet" type="text/css" href="スマホ用CSSファイル" media="screen and (max-width: 767px)" />

 上記により、幅が767px以下であれば追加で「スマホ用CSSファイル」を読み込みます。つまり、PC用スタイルシートとスマホ用スタイルシートの2つを用意する必要があります。

レスポンシブでのCSSファイル読み込みの違い

 この時指定する幅はデバイス非依存ピクセルで、仕様等で記載されている物理的な解像度ではありません。このため、767px以下と指定すると物理的な解像度が高いスマートフォンも「スマホ用CSSファイル」が読み込まれます。

 これはタブレットも同様で、通常のタブレットであれば「PC用CSSファイル」だけ読み込みますが、幅が767px以下の小型タブレットでは「スマホ用CSSファイル」が読み込まれます。

 スマートフォンに限らず縦にして見た時をポートレートモード、横にして見た時をランドスケープモードと言います。ランドスケープモードではポートレートモードと比較して幅が広くなりますが、通常は最適と認識している幅は767px以下です。このため、上記設定によりランドスケープモードでみた時も追加で「スマホ用CSSファイル」を読み込むようになります。

 又、スマートフォン向けCSSファイルでは以下のようにbodyに対する指定を追加します。

【自動拡大防止】
body {
-webkit-text-size-adjust: 100%;
}

 スマートフォンでは自動的に文字を拡大して表示すると説明しましたが、自動調整されないよう上記でこの機能を無効に出来ます。

リキッドレイアウト

 「スマホ用CSSファイル」記述時は、幅は基本的にpxで指定しないようにします。

 幅を指定したい時はwidth:30%;等、%で指定します。marginやpadding等もpxではなく、%で指定します。例えば、margin-left:10px;ではなく、margin-left:1%;等です。

 パソコンでは殆どのディスプレイが横1024ドット以上あるため、ページの幅を1024px以下にしてその中で余白等をpxで指定すれば1ドット=1pxとして多くのディスプレイで同じように表示されます。

パソコンでの見栄え

 しかし、スマートフォンでは240pxや320pxといった幅を認識しているものもあるため、ページの幅を240pxや320pxに指定すると解像度の高いディスプレイでは画面より小さく表示されてしまいます。スマートフォンではディスプレイ自体が小さいため、それより小さく表示されるとかなり見辛くなってしまいます。

 又、余白をpxで指定すると幅が360pxで表示されるディスプレイより240pxや320pxで表示されるディスプレイの方が余白の占める割合が大きくなります。

解像度が異なるスマートフォンでの見栄え

 このため、%で指定する事でどのような解像度のスマートフォンでもページ一杯に同じような見栄えで表示する事が可能になります。このように、どのような環境でも自動的に拡大・縮小して同じような見栄えで表示する事をリキッドレイアウトと言います。

 スマートフォンで見た時にリキッドレイアウト対応させるには、「スマホ用CSSファイル」でパソコン用CSSファイルの設定を%で上書きするよう設定が必要になります。

 例えば、「PC用CSSファイル」で以下の定義があったとします。

【PC用CSSファイル例】
#box {
width: 400px;
margin: 0 10px 0 20px;
}

 「スマホ用CSSファイル」では以下のように定義してPC用CSSファイルで定義した幅の指定を打ち消すと共に、余白を%で指定します。

【スマホ用CSSファイル例】
#box {
width: auto;
margin: 0 2% 0 4%;
}

 上記で右の余白が2%、左の余白が4%とられ、自動的に画面に収まる幅で表示されます。幅を例えば20%にしたい場合はwidth: 20%;と指定します。

 このように、PC用と違う定義をする部分はスマホ用CSSで上書きするように全て定義する必要があります。

 尚、スタイルシートは後に記述した内容で上書きされますが、同じプロパティがない場合は上書きされません。このため、背景色等「PC用CSSファイル」で定義しているものをそのまま利用する場合は、「スマホ用CSSファイル」で別途定義する必要はありません。

回り込みの無効化

 サイドバー等でfloatにより回り込みをしている場合、「スマホ用CSSファイル」では回り込まないようにするのが一般的です。

 例えば、「PC用CSSファイル」で以下の定義があったとします。

【PC用CSSファイルfloat例】
#box1 {
width: 80px;
float: left;
}

#box2 {
width: 80px;
float: left;
}

 上記は以下のように表示されます。

box1
box2

 上記は分かり易さのため、枠を付けて表示しています。

 回り込みを無効にするには「スマホ用CSSファイル」で以下の定義をしてPC用定義を上書きします。

【スマホ用CSSファイルfloat例】
#box1 {
width: auto;
float: none;
}

#box2 {
width: auto;
float: none;
}

 上記によりスマートフォンから見た場合、回り込みせずに幅一杯に表示されるようになります。

まとめ

 これまでの内容をまとめると以下になります。

 HTMLファイルの<head>と</head>の間に以下を記述してviewport指定やメディアクエリを設定します。

【HTMLのheadに記述】
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="PC用CSSファイル">
<link rel="stylesheet" type="text/css" href="スマホ用CSSファイル" media="screen and (max-width: 767px)" />

 上記は767px以下で「スマホ用CSSファイル」を読み込むようにしていますが、更に追加して240px以下だけ読み込む等も指定出来ますし、数字を小さくして解像度が低いディスプレイだけ対応させる事も出来ます。

 「スマホ用CSSファイル」には以下記述を追加します。

【CSSのbodyに記述】
body {
-webkit-text-size-adjust: 100%;
}

 又、リキッドレイアウトに対応するため、幅や左右余白はpxではなく%で指定し、floatによる回り込みは必要に応じて「スマホ用CSSファイル」側でnoneを指定して無効にします。

 これらの設定はレスポンシブウェブデザインによるスマートフォン対応では必須です。

考慮点

 これまでの説明ではパソコン用CSS→スマホ用CSSの順で読み込んでいます。これは既にホームページがあり、後でスマートフォン対応する時に向いています。

 この方法では、一般的にスマートフォンより通信速度が速くて性能も高いパソコンで1つのCSSファイル、速度が遅くて性能も低いスマートフォンで2つのCSSファイルを読み込む事になります。

 これを避けるため、以下のように記述も出来ます。

【スマホ用CSSを先に記述】
<link rel="stylesheet" type="text/css" href="スマホ用CSSファイル">
<link rel="stylesheet" type="text/css" href="PC用CSSファイル" media="screen and (min-width: 768px)" />

 「スマホ用CSSファイル」を先に記述し、赤字部分では幅が768px以上あれば「PC用CSSファイル」を追加で読み込むようにしています。

 これであれば速度が遅くて性能も低いスマートフォンで見た時は、1つのCSSファイルだけ読み込む事になります。新規にホームページを作成する時は、こちらがお奨めです。

 但し、WindowsXPがサポートしているIE8では2行目の記述にあるメディアクエリに対応していません。このため、IE8で見ると「スマホ用CSSファイル」を使ってディスプレイに表示されてしまいます。

 WindowsXPはMicrosoftのサポートが終了しているため少なくなっていますが、まだある程度のアクセスはあります。このため、WindowsXPでもPC用画面で表示するためには、やはり最初に「PC用CSSファイル」を読み込むか、別途JavaScript等で対応する必要があります。

サイト関連1

ホームページ作成「画像のスマートフォン対応
ホームページ作成「画像のRetinaディスプレイ対応
ホームページ作成「表のスマートフォン対応
ホームページ作成「動画のスマートフォン対応
ホームページ作成「タップターゲットのサイズ調整
ホームページ作成「スマホとパソコンで表示を変える
ホームページ作成「スマートフォン対応後の確認
  • このエントリーをはてなブックマークに追加