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

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

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

カテゴリーから探す