HP・サイトのスマホ対応の方法

スマホが普及するにつれ、PCだけでなくハイエンド携帯端末と呼ばれるスマートフォン、さらにはタブレットからのアクセスが増えている。
htmlで作成したホームページ(HP)をスマホ対応にする方法をご紹介します。

なぜ、スマホ対応が必要なのか?

それは、スマホでPCサイトを見ると小さくて見づらいからだ。
スマホは拡大する機能があるが、それは一部のみ。

結局、サイトの色んなところを見たい場合、画面を右や左に移動させなければいけなくなる。

これはユーザーにストレスがかかる。

そこで、ユーザーがスマホでアクセスした場合にはスマホ用のサイトを、PCでアクセスした場合はPC用のサイトが表示されるとユーザーにとって便が良い。
もちろん、タブレット版もあれば言うことなしだ。

さて、その方法である。

スマートフォン対応の方法

端末によって、違うサイトを表示させるには大きく2つの方法がある。

1.PC用とスマホ用のサイトを用意し、ユーザーがアクセスした端末によってURLを振り分ける方法
2.URLは同じで、端末によって違うCSSを用意し、違ったデザインを表示させる方法。

「2」の方法は、レスポンシブWebデザインといい、検索最大手のGoogleが推奨する方法であり、「1」と比べてサイトを2つ用意する必要がないので、作成は楽だ。

レスポンシブWebデザインとは?

PC用、スマートフォン用、タブレットの画面サイズによってCSSを切り替えることで、HTML一つで複数のデザインを表現することができる。

1.HTML編集
全てのhtmlファイルのhead内に下記のソースを入れる

これはデバイス(端末)の幅に合わせてサイトを表示するという意味。
次にCSSを編集する。

2.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){
*ここにスタイルを記述する*
}

記述する「スタイル」の内容については次回の記事で紹介します。


HTMLの関連記事

このページの先頭へ