全国対応!まずはご相談ください 電話番号0120-55-4682

簡単ホームページ作成ツールならAMS

ホームページのパソコン用スマホ用表示の切り替え方法

2021/7/21

ホームページのパソコン用スマホ用表示の切り替え方法

今やアクセスの5割以上を占めるiPhoneやAndroidなどスマホからのアクセス。もし貴社のホームページが未だスマホに対応していないと多くのアクセスを逃してしまっているかもしれません。

ホームページをスマホ対応にするための、パソコン用からスマホ用に表示を切替えるやり方についてお伝えします。

ホームページをスマホでも文字サイズやレイアウトが見やすい表示にするためのやり方は大きく分けて2つあります。

パソコン用とスマホ用2つのウェブページを用意する

1つはパソコン用とスマホ用の2つのウェブページを用意して、アクセスユーザーのユーザーエージェントをプログラムで自動で判断し表示を切替えるという方法です。

自動で表示を切替えるためには、ウェブサーバーに.htaccessというファイルを設定する、phpかJavascriptでプログラムを用意するといった方法があります。

※ユーザーエージェントとはホームページにアクセスするときウェブサーバーに自動で伝えられる情報のひとつで、ユーザーが利用しているOSやブラウザの種類、スマートフォンの機種などの情報が伝えられます。

このやり方のメリットとしては、スマホ用専用としてパソコン用とは大きく異るデザインを採用することができるといったことがあげられます。

しかし、同じウェブページを2つづつ用意するため、制作の手間や更新や修正の手間とコスト、そして管理コストが余計にかかってしまうというデメリットもあります。

パソコン用とスマホ用と分けずに1つのウェブページで対応する

もう一つは1つのページでパソコン用スマホ用を共用して対応させ、アクセスユーザーが利用している端末の横幅をプログラムで自動で判断し表示を切替えるという方法です。

自動判定のための特別なプログラムを用意することも不要で、ホームページ制作に必須のスタイルシートへの記述で自動判定と表示切り替えの仕組み(メディアクエリ)が用意されています。

このような対応のしかたをレスポンシブデザインとよび、多くのウェブサイトがこの方式をとられています。

参考になれば幸いです。

ホームページでお困りならAMSにお任せください。

  • 制作会社の選び方がわからない。
  • どの制作会社も費用が高額で手が付けられない。
  • 今のホームページが簡単に更新できなくて困っている。

などホームページでお困りではありませんか?
弊社AMSでは効果のある高品質なホームページを格安で制作いたします。
まずは料金やプラン内容、制作実績などを下記の画像をクリックして ご覧ください。

copy1696235529_banner_agency.png
キーワードでコンテンツを検索
sidebanner_ams.gif
AMSコンテンツ
AMSニュースアーカイブ
サイトPR.png
sidebanner_manual.gif
sidebanner_contact.gif

会社概要

社名 株式会社AMS
本社 石川県金沢市問屋町2丁目99番地
代表者 代表取締役 若林 雄一郎
会社HP https://amsstudio.jp/
お気軽にご相談ください
0120-55-4682
【受付時間】月〜金9:00〜18:00 ※祝日除く