• ベストアンサー

レスポンシブ対応のサイト制作について

レスポンシブ対応サイト制作中の者です。制作自体は以前から行っていますので、それ自体に疑問はないのですが、たまにPCでウィンドウ幅を変更してもスマホ画面や、タブレット画面にならないサイトを見かけます。これはどのように実現させているのでしょうか?その場合、chromeの要素検証でスマホ画面環境を作ってやると、きちんとスマホ対応画面になるのですが。 よろしくご回答お願いいたします。

  • CSS
  • 回答数3
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

エージェントでVIEWを分けてるんじゃないかと想像します。

その他の回答 (2)

  • tracer
  • ベストアンサー率41% (255/621)
回答No.3

レスポンシブは、ウィンドウ幅(端末幅)によってレイアウトを変化させる仕様ですね。それれはつまり、1枚のHTMLでいろんな端末に対応することを意味しています。 それとは別に、モバイル専用のページをつくる場合もあります。この場合は、別のHTMLを作成して、モバイル端末のみそのHTMLにアクセスさせる仕様です。URLを変えてモバイル専用ページに移動させる場合もありますし、同じURLでも違うhtmlを表示させることが可能です。 質問に対しての直接の回答は、どのようにモバイル端末がモバイル専用ページにアクセスできるようにするか、と同等かと思われます。その代表的な方法が既に回答に出ているUA(ユーザーエージェント)を利用するというものです。実際は、UA判定以外にももっといろんな方法がありますが、そこは本題ではなく、ともかく何らかの方法でモバイル端末を判定して、違う内容を表示しているのかと思われます。

noname#217950
noname#217950
回答No.2

No.1の方と同じですが、ユーザーエージェント(UA)をPHPなどで取得して、どんなデバイスでアクセスしてきたのかを調べてCSSやHTMLを振り分けている場合が多いと思います。私もスマホ対応した時に試行錯誤しましたが、ディスプレイの解像度だとか画面の横幅だとかで判定していたのでは、新機種に対応しきれないと思いこの方法でやりました。 私個人の意見ですが、携帯デバイスの機種やメーカーの独自仕様にも左右されませんし、こちらの方法のほうがおすすめですよ。この先どんなディスプレイが開発されるかわかりませんし。 ちなみにこういった手法を使ったサイトを見分けたければ、ブラウザのアドオンでユーザーエージェントを偽装?してくれるものがありますので、インストールしてiPhoneなどのユーザーエージェントに切り替えて見てみるとスマホ用のレイアウトに変わるはずです。 私はFireFoxメインなのでIEなどはわかりませんが、FireFoxですと「User-Agent-Switcher」など、いくつかアドオンがあります。いつもの自分のPCからのアクセスをiPhoneからのアクセスと偽装してくれるわけです。

関連するQ&A

  • 大手サイトがレスポンシブに対応していない

    大手企業のサイトほどレスポンシブがちゃんとしてないのはなんででしょうかね? 画面幅を狭くするとレイアウトが崩れてしまいます 大手サイトがこうなるのはちょっとどうなんだろう…って思ってしまいます

    • ベストアンサー
    • HTML
  • 初心者でもレスポンシブ対応のサイトが作れるソフト

    初心者でもレスポンシブ対応のサイトが作れるソフトを教えてください。 以前はホームページビルダーの古いバージョンでレンタルサーバーにhtmlを作ってサイトを運営していました。 スマホ対応にと去年wordpressに変えたのですがサーバが重いので、wordpressを使わないでレスポンシブにしたいです。 「SIRIUS」 「ホームページビルダー」「QHM HAIK」 「BiND」などあるようですが、おすすめを教えてください。

  • 大きいサイトでレスポンシブってありえますか

    小さいながらビジネス関連のスクールのサイトを、リニューアルして作成する予定です。量的には、中規模くらいといえるかと思います。私自身はサイト作成については、初心者より多少はできるレベルです。社内で作って自分で少しずつ更新・追加していく予定です。更新の容易さ、スマホ対応の必要性から、レスポンシブで作ろうと思います。しかしレスポンシブは、どちらかといえば、大きな写真などを多用し、視覚重視の製品・サービスのサイトに適している感じがします。また、ですから情報量がある程度多く、また、ある程度固めのイメージを出したく、またいちいちスクロールせずに、必要な情報を見られるような感じのサイトにしたい場合、レスポンシブで作成するのは適していないのかなと思ったりします。レスポンシブのデモサイトを見てみると、非常にゆったりしたスペースを使っているのが多いように思います。レスポンシブでありながら、情報量の多い(例えばビジネス系の)サイト、の例などあれば教えて下さい。何かアドバイスがいただければ有難いです。 去年からWixでサイトを作り、1年位たちますが、なにせ重いので、自分で作ったほうがよいと思っています。 宜しくお願い致します。

    • 締切済み
    • CSS
  • レスポンシブwebデザインでのIE対応について

    レスポンシブwebデザインでサイト制作する際、CSSのIE対応はどこまでやるべきか悩んでいます。 お詳しい方々、是非アドバイスをお願いします。 現状の対応としては・・・ IE9 → 他ブラウザ同様にレスポンシブ対応 IE8 → レスポンシブ非対応・IE専用CSS(PCサイズ版)を適用 IE7 → 完全無視 (IE7はttp://www.ajike.co.jp/2012/08/browse_share201207/やその他複数のデータを基に、完全無視で問題ないと判断しました) としております。 そこで作っていてふと想ったのですが、タブレット端末やスマートフォン端末では実質的にIEではなくなるので、結局IE9をレスポンシブ対応させる意味がないのではないか? なら、IE8と同様にIE用のCSSを適用させるだけで良いのではないか? と想ったのですが、どうなんでしょうか? ここはやはり将来性を鑑みてIE9は現状のままレスポンシブ対応させておくべきなのか・・・ それともIEは9だろうと8だろうと一括でIE専用CSSを適用させてレスポンシブ対応させないのか・・・ 初心者の私にはIE用のCSSですら恐ろしくめんどくさいというか難しく、IE9をレスポンシブ対応させるだけでも四苦八苦しております。。。 いったいどうしたら良いでしょうか? 是非ぜひ、ご教授願います。

    • ベストアンサー
    • CSS
  • レスポンシブがよくわからない

    ■質問1 PC、タブレット、スマホで一つのhtmlとcssでレスポンシブに変更する場合、 @media screen and (min-height: 600px) を使って変更すると説明している解説サイトが多いです。 しかし端末は年々高解像度になっていますし、解像度は端末毎にみんなバラバラですよね? 解像度が低いとスマホ、中位だとタブレット、高解像度だとPCみたいな別け方ですが、 最近のスマホはかなり高解像度でPC並だと思うのですが、なぜこのcssで 振り分けができるのでしょうか? 自分が思うのは、スマホの横解像度が1024pxだったとしてもスケールが影響して @media screen and (min-height: 600px)に収まるようになっているとかでしょうか? このへんを説明しているサイトがなく、単に@media screeを使うとしか解説していないので教えて もらえると助かります。 ■質問2 端末によって横解像度が違うのでdivブロック内の文章がどの文字でdivの右端で折り返されるかは 端末毎に変わるのは仕方のないことですよね? 取引先の担当者に、改行や右端での折り返しが端末ごとに異なると怒られたのですが、なるべく見やすく 文字をremで指定しているし、そもそもフォント自体の幅が端末毎に違うので折り返しがまちまちなのは仕方のないことなのでしょうか? それとも同じにできるのでしょうか? どうぞよろしくお願い致します。

    • ベストアンサー
    • CSS
  • レスポンシブのデザインについて

    ポスポンシブのデザインを設計する際はどのように書いていますか? iPhone5系などの320×568を基準に作っていますか? それともシェアが多い375×667を基準ですか? デザイナーからspのフレームワークをもらったのですが、基準が750pxになっており、750pxではパーフェクストピクセルで表示できるのですが、320×568ではやはりレイアウトが崩れてしまいます。 なぜかというとそもそもボックスがwidth:600pxとなっていてiPhone系ではレイアウトが崩れます。 今回はpcとタブレット兼スマホでブレイクポイントを作っていますので、この場合では750pxではなく画面サイズが小さいスマホ(320px)を基準に作るべきではないのですか? 320px基準であれば750pxに画面幅が広がっても拡大されるだけなのでレイアウトは崩れないと思うのですが、、、 レスポンシブを初めて作るので勝手がわからず、意味不明な質問かもしれませんが、回答よろしくお願いします。

    • 締切済み
    • CSS
  • ブログパーツをレスポンシブ化したい

    下記のようなブログパーツをレスポンシブ化したいです。 <script type="text/javascript" src="URL&width=500&height=500"></script> 上記のようにPC用サイトにあわせてサイズを指定すると、スマホのページではみ出してしまいます。 スマホのページでもPCのページでもサイトの幅にぴったり収まるように幅を自動調整させたいのですが、どうすればいいでしょうか。

  • レスポンシブWebデザインに詳しい方

    PC、スマホサイトを運営しています。A業者さんに、レスポンシブwebデザインで制作していただきました。今回、リニューアルをする予定なんですが、B業者に、PC版のみ制作してもらった場合、自動でスマホ版も更新されるのでしょうか?もしされない場合、B業者が作ったHPを、別の業者にレスポンシブwebデザインにて変更していただくことは可能なんでしょうか?諸事情で、A業者さんには頼めません。B業者は、レスポンシンブでは作れないとのことです。

    • 締切済み
    • CSS
  • レスポンシブに出来るデザインと出来ないデザイン

    レスポンシブに出来るデザインと出来ないデザインがあると聞いたのですが、 具体的にどんなデザインだと出来ないという情報が無いのですがどんなデザインは出来ないのでしょうか? スマホがワンカラムなのでワンカラムに出来ないサイトは出来ないということでしょうか? 380px以上でワンカラムに出来ればどんなデザインも大丈夫なのでしょうか? またスマホやタブレット用のサイズのときはGVを下に持っていくなどそれようのUIに変形するように実務ではすべきなのでしょうか? それともPCと同じ順番でもよいのでしょうか? また賛否両論でこれからWEBクリエイターを目指す者がこちらを習得すべきなのでしょうか? それともそれぞれの端末ごとの作成を習得した方がよほどよいのでしょうか?

    • ベストアンサー
    • CSS
  • レスポンシブWebデザインでテキストの振分について

    現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか? もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト(文章)の振り分もできるということなのでしょうか? レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。

    • 締切済み
    • CSS

専門家に質問してみよう