スマホが普及するにつれ、PCだけでなくハイエンド携帯端末と呼ばれるスマートフォン、さらにはタブレットからのアクセスが増えている。
htmlで作成したホームページ（HP）をスマホ対応にする方法をご紹介します。
なぜ、スマホ対応が必要なのか？
それは、スマホでPCサイトを見ると小さくて見づらいからだ。
スマホは拡大する機能があるが、それは一部のみ。
結局、サイトの色んなところを見たい場合、画面を右や左に移動させなければいけなくなる。
これはユーザーにストレスがかかる。
そこで、ユーザーがスマホでアクセスした場合にはスマホ用のサイトを、PCでアクセスした場合はPC用のサイトが表示されるとユーザーにとって便が良い。
もちろん、タブレット版もあれば言うことなしだ。
さて、その方法である。
スマートフォン対応の方法
端末によって、違うサイトを表示させるには大きく2つの方法がある。
１．PC用とスマホ用のサイトを用意し、ユーザーがアクセスした端末によってURLを振り分ける方法
２．URLは同じで、端末によって違うCSSを用意し、違ったデザインを表示させる方法。
「２」の方法は、レスポンシブWebデザインといい、検索最大手のGoogleが推奨する方法であり、「１」と比べてサイトを2つ用意する必要がないので、作成は楽だ。
レスポンシブWebデザインとは？
PC用、スマートフォン用、タブレットの画面サイズによってCSSを切り替えることで、HTML一つで複数のデザインを表現することができる。
１．HTML編集
全てのhtmlファイルのhead内に下記のソースを入れる
これはデバイス（端末）の幅に合わせてサイトを表示するという意味。
次にCSSを編集する。
２．CSS編集
スタイルシートのファイル「style.css」等（名前は任意）を編集。
デバイスの幅別にデザインを設定する。
3種類のデザインを設定する場合の記述例を紹介。
①PC用：画面の横幅が769px以上の場合、
@media screen and (min-width: 769px){
*ここにスタイルを記述する*
}
②タブレット用：画面の横幅が641px～768px以下の場合
@media screen and (max-width: 768px){
*ここにスタイルを記述する*
}
③スマートフォン用：画面の横幅が640px以下の場合
@media screen and (max-width:640px){
*ここにスタイルを記述する*
}
横幅の数字は任意。
理想は3つのスタイルを用意することだが、私は現在、PC用とスマートフン用の2種類のみ設定しています。
タブレットは自分が今、使っていないのでどういう表示か確認できないのと、タブレットからのアクセスが10％未満というのが理由です。
スタイルは下記の内容です。
①@media screen and (min-width: 641px){
*ここにスタイルを記述する*
}
②スマートフォン用：画面の横幅が640px以下の場合
@media screen and (max-width:640px){
*ここにスタイルを記述する*
}
記述する「スタイル」の内容については次回の記事で紹介します。
