PCとスマホを判別して自動で切り替えるタグについて

Question

今現在、楽天の特設ページを作る際にPC用とスマホ用の2ページを作成しています
PC用のページのみ作成し、PCとスマホを判別して自動で切り替える様に作成する簡単な方法はありますでしょうか？
出来ると作業時間がかなり短縮できると思います。
教えていただけたらありがたいです。

Answer

ECマスターズの伊藤です。

> PC用のページのみ作成し、PCとスマホを判別して自動で切り替える様に作成する簡単な方法はありますでしょうか？
> 出来ると作業時間がかなり短縮できると思います。

レスポンシブと呼ばれる
１つのHTMLでPCにもスマホにも
対応したページを作成する方法がございます。

例えば、画像１枚を横幅いっぱいに表示させるには

のように、画面（正確には親要素の横幅）に対して
％で指定することで、様々な画面幅に
対応させることができます。




としていただきますと
画像が同じ横幅でならんで表示されるようになります。


また、画面幅を見て、CSSを変更する方法がございます。

＝＝＝＝＝以下をCSSに記述＝＝＝＝＝
p { color:red;}

@media screen and (min-width:480px) { 
  p { color:blue;}
}
＝＝＝＝＝以上をCSSに記述＝＝＝＝＝

と記述していただきますと

Pタグの文字色を赤
↓
画面幅が480px以下で
Pタグの文字色を青

のように

@media screen and (min-width:480px) {

と

}

で囲ったCSSが画面幅480px以下になったときに
適用されます。

数字を変えていただければ480px以外の画面幅でも
指定することができますので
レイアウトに応じて、ご利用くださいませ。

Answer

ありがとうございます
教えていただいた方法で試してみます