簡単ホームページ作成ツールならAMS - まずはお試し

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

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

2021/7/21

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考になれば幸いです。

常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】月~金曜9:00~18:00

月~金曜9:00~18:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ