![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
スマートフォンサイトを初めて制作を試みていますが
スマートフォンでPCサイトを見た時に
下記URL 日産自動車のホームページのように
スマートフォンサイトはこちらというリンクがある場合があります。
http://www.nissan.co.jp/
これを作成したいのですが、どうすればいいのでしょうか?
スマホサイトからもPCサイトへ
リンクさせたいです。
初歩的質問で申し訳ありませんが
ご存じの方教えてください。よろしくお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
PCサイトとスマホサイトの区別は、基本的にサーバサイドフレームワーク(Java StrutsやASP.NET MVC、Cake phpなど)で行います。
ユーザエージェント、デバイスインフォメーション等の項目を判定しますが、これらのサーバサイド環境では、「生の」ユーザエージェント文字列を扱わなくていいよう、ライブラリ化されています。
また、「グローバルフィルタ」といって、いちいち記述しなくても、指定されたディレクトリ以下へのアクセスで自動的に判定をかけることができ、非常に使いやすいものです。
以前は"iPhone"や"Android"のようなUA文字列で一律に「スマホ」判定を行っていましたが、現在はタブレットの登場や、スマートフォンの高解像度化で、PC用ページとスマホ用ページのどちらを見せるか、という判定基準が難しくなっています。
ご提示のサイトの例では、「スマートフォン」デバイスで高解像度タイプの場合に、「あんたどっち見たいんだ?」といったような選択肢を出しているのだと思います。
なので、
・「グローバルフィルタ」(フレームワークによって読み方が違います)でユーザエージェントとデバイスを判定。
・そのデバイスが明らかにターゲットデバイスと異なっている場合は、ルーティングを書き変えて別サイトに誘導(スマホ -> PC、PC -> スマホ)。
・一部のAndroidデバイスのように、解像度判定だけでターゲット判定できない場合は、別デバイス用サイトへの入り口を提示してあげるのがプロっぽい方法です。
あ、CSS3だけで全デバイスに対応するなんて夢みたいな話が涌いてますが、真に受けないように。
そもそもデバイスの情報表示能力や、CSS3ブラウザ間の互換性すら全く取れていない状況で、そんなスキームは話になりません。
No.1
- 回答日時:
そのサイト自体はソースを見たらすぐわかるようにjavascriptで判別していますね。
⇒User Agent Switcher :: Add-ons for Firefox ( https://addons.mozilla.org/ja/firefox/addon/user … )
や
⇒FireMobileSimulator ( https://addons.mozilla.jp/firefox/details/8519 )
では表示されないので、ソースを見ると
<script type="text/javascript" src="/TOP/2011/JS/UADisp.js" charset="utf-8"></script>
がありました。
・サーバーでhtaccessにて振り分ける
・ページを動的に作成する。
・javascriptで
など色々な手法がありますが、CSS3の登場で、もはや過去のものとなりつつあります。
理由は
【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
特にスマホは、今後のユーザーの一角を占める重要なツールとなります。いちいち、端末ごとにページを作らなくても良いのがHTMLの最大の利点で、その長所があるから、わざわざHTMLでウェブページを作るのです。
率直に正しいHTMLでページを作成し、スタイルシートを使ってリキッドデザインでページを作成し、どうしてもそれでも不足な場合は、CSS3のMediaqueryを使ってスタイルシートで振り分ければ良いです。
別の質問で先ほど回答した
⇒ホームページにカレンダーを設置するには - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7989636.html )
のNo.1の回答のHTML--回答ではUTF-8と言っていますがShift_JISです。これをブラウザで表示してみてください。_はタブに戻すこと。
ブラウザのウィンドウ幅を色々変えてみて御覧なさい。480px以上のウィンドウ幅なら、超幅広ディスプレイなら幅900pxでページ中央に表示されるはずです。
スマホ用、携帯用、スクリーンリーダー用、パソコン用、印刷用・・・と様々なページを用意するのは馬鹿げています。SEO的にも最悪になります。
それをしなくて済むのがHTMLですよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページ、iPadやiPhoneで...
-
スマホ横幅が720px だけ 横が...
-
ポスターを作り、その中の文字...
-
Excelで、社外秘(閲覧のみ)と...
-
googleドライブで、PDFファイル...
-
HTMLからフォルダを開きたい
-
iPadの標準ブラウザでローカルH...
-
htmlの謎
-
VBA URLDownloadToFileについて
-
htmlの中にexcelが埋め込むには...
-
POSTしたデータの文字コードがu...
-
一つのリンクに複数のURLを指定
-
HTMLページが勝手にダウンロー...
-
リンクボタンにgifアニメを使え...
-
リンク先からリンク元の、同じ...
-
form action="#"
-
どのページもすべて同じURLなの...
-
インラインフレームの横スクロ...
-
Dreamweaverでソースが文字化け...
-
【HTML】1クリックで複数ファイ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページ、iPadやiPhoneで...
-
画面は固定と可変のどちらがい...
-
ホームページを作っているので...
-
ホームページ制作、SPサイトの...
-
スマホでPCサイト見たらスマホ...
-
携帯HPナノ ナノという文字につ...
-
WEBデザイナーのフォトショ中級本
-
この容量はテキストサイトとし...
-
ソリッドレイアウトとリキッド...
-
レスポンシブがよくわからない
-
デザインとコーディングは同一...
-
検索順位に詳しい方
-
ブラウザ毎の振り分け
-
携帯電話(ガラケー)でのデザ...
-
Androidスマホで表示されるサイ...
-
携帯とスマホの両方で見栄えの...
-
ページ内のリンクが外れてしま...
-
カラム落ちの何が悪いのか
-
PC用サイトをスマホに最適化す...
-
デザイナーの方にWEBデザインを...
おすすめ情報