ホームページを作っているのですが、PCサイトとスマホサイトを自動切り替えする方法が分かりません。

ホームページ作りを始めたばかりの初心者です。
ホームページ作りはホームページビルダークラシックで、白紙から作っています。htmlで作っていて、そのhtmlも基本しか分かっていません。
PCサイト用のページとスマホサイト用のページを作ったのですが、PCから閲覧したときはPC用のページが、スマホから閲覧したときはスマホ用のページが表示されるようにするには、どうすればいいのでしょうか？
初心者でもできるでしょうか？初心者でも可能であるならば、出来るだけ簡単にかみ砕いて教えていただけると、大変助かります。方法を検索しても分かりませんでした。

No.2 ベストアンサー 回答者： lv4u 回答日時： 2019/01/13 11:39

最近のホームページは、レスポンシブ・デザインって技術を使って作られています。

ブラウザ画面の解像度に応じて、自動的に画面のレイアウトを変化させるようにしているのです。
たとえば、画面が小さいときは、縦に並べるとか、画像は省略するなどをしているのです。

マスターすべき必須技術としては、さしあたり、Bootstrap、jQuery、JavaScriptです。
なので、htmlのみしか知らないのでは、対応できないでしょう。
これらを覚えるために色々と参考書を購入して勉強しましょう。

ちなみに、紙芝居的なホームページではなく、「ブログやりたい」とか「アンケートページを作りたい」「会員管理できるようにしたい」など動的なページ、ユーザ管理が必要となれば、データベース処理も必要ですし、セキュリティ管理は必須となります。
ですので、上記に加えて、PHPあるいは、C#とかJavaとかSQLとかの言語や、AJAX、クロスサイトスクリプト攻撃への防止技術も盛り込まないといけなかったりします。

ですので、初心者が自力でやるのは無理でしょうね。

最近は、WordpressなどのＣＭＳが流行しています。
初心者は、こういうソフトを使うしかないと思います。

この回答へのお礼

ありがとうございます！WordPressで作ってみようと思います！

お礼日時：2019/01/18 15:32

No.4 回答者： nitto3 回答日時： 2019/01/13 13:25

私はPCサイトで作っています。

スマホのヤフーで見てみましたがきれいに表示されていますよ。

No.3 回答者： t_fumiaki 回答日時： 2019/01/13 13:04

ここで回答するには無理が有る。

1から10まで無理。
・PC専用、スマホ専用の2個作る方法。
　クエリの有った端末(機種やOS）を知り、相互に振り分ける

・ブラウザの幅で自動的にCSSを振り分ける方法
今の主流はこちらの方法（レスポンシブデザイン)。
メディア情報をクエリし、対応させるCSSを自動で使い分ける。htmlは同じ物を使い、cssによって、pc・スマホの「デザインのみ変更」で対応させる。
超超簡単に言うと、横幅を「親要素に対する%」で指定する。

ホームページビルダーでも、ビルダー自体にレスポンシブデザイン対応する機能が有るから、それで対応する。

No.1 回答者： bfox 回答日時： 2019/01/13 11:35

方法は

１、レスポンシブデザインにする
２、PC用スマホ用それぞれ作ってユーザーごとに振り分ける
この二つ。

＞初心者でもできるでしょうか？
努力すれば初心者だってできる。
大概のことは勉強すれば初心者だってできる。
わからない言葉が出てきたら逐一自分で調べて覚えてを繰り返すしかない。
今できる人も知ってる人もみんな最初は初心者で、そこから頑張って勉強してできるようになってるんだから、そのプロセスをスキップしようなんて思わないこと。

＞初心者でも可能であるならば、出来るだけ簡単にかみ砕いて教えていただけると
1についてはこんなところじゃ全然文字数が足りないから、解説しているサイトを紹介する。
https://syncer.jp/how-to-create-responsive-web-d …

次に2は、「.htaccess」を弄れることが大前提。
「.htaccess」のRewriteモジュール(mod_rewrite)を使って、ユーザエージェントを取得して特定の条件に合致している場合にだけ、指定したページへリダイレクトさせればいい。
スマホからのアクセスならスマホ用のサイトへ、PCからのアクセスならPC用のサイトへ。
これを読んで意味がわからないなら、諦めた方がいい。
下手にやると取り返しのつかないことになるから。